เมตาแท็ก Twitter Card

Twitter (X) กำหนดโพรโทคอลการ์ดตัวอย่างของตนเองก่อนที่จะมี OpenGraph และยังคงดูแลโพรโทคอลนั้นอยู่ แม้ Twitter รุ่นปัจจุบันจะใช้แท็ก OG เป็นทางเลือกสำรองเมื่อไม่มีแท็ก twitter:* แต่การประกาศ twitter:card อย่างชัดเจนจะให้รูปแบบการ์ดที่คาดเดาได้มากที่สุด

การ์ดมี 4 ประเภท: summary (ภาพขนาดย่อเล็กถัดจากชื่อเรื่องหรือคำอธิบาย), summary_large_image (ภาพหลักเต็มความกว้าง), app (การติดตั้งแอปบนอุปกรณ์เคลื่อนที่) และ player (วิดีโอหรือเสียงแบบฝัง) เลือก summary_large_image สำหรับบทความที่มีเนื้อหาจำนวนมาก

หากมีค่าเหล่านี้ จะใช้แทน og:title และ og:description บน Twitter ใช้เมื่อคุณต้องการพาดหัวที่แตกต่างสำหรับผู้ชม Twitter จากผู้ใช้ OpenGraph ทั่วไป มิฉะนั้นให้ Twitter ใช้ค่าจาก OG เป็นทางเลือกสำรอง

สำหรับการ์ดแบบ summary ให้ใช้ภาพสี่เหลี่ยมจัตุรัสอัตราส่วน 1:1 ขนาดอย่างน้อย 144x144 สำหรับ summary_large_image ให้ใช้ภาพอัตราส่วน 2:1 โดยควรมีขนาด 1200x600 ขึ้นไป Twitter ปฏิเสธภาพที่มีขนาดเกิน 5 MB ใช้ URL แบบสัมบูรณ์เช่นเดียวกับ og:image เพราะเส้นทางแบบสัมพัทธ์ใช้ไม่ได้

ข้อความแสดงแทนสำหรับภาพบนการ์ด ยาวได้สูงสุด 420 อักขระ ช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอที่เรียกดู Twitter เข้าถึงเนื้อหาได้ดีขึ้น และเป็นคำอธิบายสำรองเมื่อโหลดภาพไม่สำเร็จ ควรระบุค่านี้เสมอ เพราะใช้เวลาเพียง 30 วินาทีแต่ช่วยส่งเสริมการมีส่วนร่วมของทุกคน

twitter:site คือชื่อบัญชี Twitter ของเว็บไซต์คุณ (รวม @) ส่วน twitter:creator คือชื่อบัญชีของผู้เขียนแต่ละคน การกรอกข้อมูลเหล่านี้ทำให้ Twitter แสดงข้อความ "from @yoursite" และเชื่อมโยงชื่อผู้เขียนไปยังบัญชีจริง

OpenGraph ใช้ property="og:..." ส่วน Twitter ใช้ name="twitter:..." ความแตกต่างนี้มีสาเหตุทางประวัติศาสตร์ (RDFa เทียบกับ HTML5 meta) ทั้งสองแบบถูกต้องในทางเทคนิค การใช้แอตทริบิวต์ที่ถูกต้องกับแต่ละโพรโทคอลช่วยหลีกเลี่ยงกรณีพิเศษกับตัวตรวจสอบที่เข้มงวด

twitter:card="app" ช่วยให้คุณโฆษณาแอป iOS/Android ด้วย twitter:app:id:iphone, twitter:app:id:ipad, twitter:app:id:googleplay และลิงก์ลึก twitter:app:url:* เมื่อแตะการ์ด ระบบจะเปิด App Store/Play Store หรือเปิดแอปโดยตรงหากติดตั้งไว้แล้ว

twitter:card="player" ฝังเครื่องเล่นวิดีโอหรือเสียงไว้ในทวีตโดยตรง ต้องใช้ twitter:player (URL ของ iframe ที่เป็น HTTPS), twitter:player:width และ twitter:player:height Twitter อนุมัติการ์ดเครื่องเล่นด้วยตนเองเพื่อป้องกันการใช้งานในทางที่ผิด ให้ส่งคำขอผ่าน developer.twitter.com

Twitter ปิดส่วนติดต่อผู้ใช้สาธารณะของ Card Validator แล้ว แต่การ์ดยังคงแสดงตัวอย่างในทวีตร่าง วาง URL ของคุณในร่างส่วนตัวเพื่อดูว่าการ์ดประเภทใดและภาพใดจะแสดงผล ก่อนเผยแพร่ทวีตจริง

ใส่ทั้ง twitter:card และแท็ก OG ครบชุดเสมอ แพลตฟอร์มส่วนใหญ่ที่ไม่ใช่ Twitter จะไม่สนใจแท็ก twitter:* และไคลเอนต์ Twitter รุ่นใหม่ส่วนใหญ่จะใช้ OG เป็นทางเลือกสำรอง ดังนั้นการใช้ทั้งสองแบบจึงให้ตัวอย่างแสดงผลที่ถูกต้องในทุกที่โดยมีข้อมูลซ้ำเพียงเล็กน้อย

หากไม่มี twitter:title แต่มี og:title การ์ด Twitter จะแสดงอะไร

การ์ด Twitter (ประกาศผ่าน name="twitter:card") ทำให้หน้าเว็บมีตัวอย่างแสดงผลที่คาดเดาได้บน X เลือก summary_large_image สำหรับเนื้อหาด้านบรรณาธิการ เพิ่ม twitter:image พร้อม URL แบบสัมบูรณ์และ twitter:image:alt ระบุเว็บไซต์หรือผู้สร้างด้วยชื่อบัญชี และให้ค่า OG เติมข้อมูลในแท็กที่คุณไม่ได้กำหนดทับ