เครื่องสร้าง Open Graph

1200x630 พิกเซล (อัตราส่วน 1.91:1) เป็นขนาดมาตรฐานที่ปลอดภัยสำหรับ Facebook, LinkedIn, Twitter summary_large_image และแพลตฟอร์มอื่นๆ ส่วนใหญ่ ขนาดไฟล์ควรต่ำกว่า 8 MB (ขีดจำกัดของ Facebook) — ควรตั้งเป้าไว้ที่ต่ำกว่า 1 MB เพื่อการโหลดที่รวดเร็ว ใช้ PNG สำหรับกราฟิกที่มีความโปร่งใส และ JPEG สำหรับรูปถ่าย หากขนาดต่ำกว่า 200x200 พิกเซล อาจไม่แสดงผลเลยบน Facebook รูปทรงจัตุรัส (1200x1200) ก็สามารถใช้งานได้ดีเช่นกันหากรูปภาพของคุณดูดีในรูปแบบจัตุรัส

og:type บอกแพลตฟอร์มว่าเนื้อหาบนหน้าเว็บของคุณคือประเภทใด website เป็นค่าเริ่มต้นและใช้งานได้สำหรับหน้าแรก, landing pages, และหน้า static ส่วนใหญ่ article ใช้สำหรับโพสต์บล็อกและข่าว — ซึ่งจะเปิดใช้งานแท็กเพิ่มเติม เช่น article:author, article:published_time, และ article:section ส่วน product ใช้สำหรับรายการสินค้าอีคอมเมิร์ซ ยังมี video.movie และ music.song สำหรับเนื้อหาสื่อ การใช้ประเภทที่ถูกต้องสามารถช่วยให้แสดงตัวอย่างที่สวยงามยิ่งขึ้นบนบางแพลตฟอร์ม

Twitter จะอ่าน OG tags เป็นค่าสำรอง ดังนั้นลิงก์ของคุณจะแสดงตัวอย่างได้แม้ไม่มี Twitter Card tags เฉพาะเจาะจง อย่างไรก็ตาม Twitter Card ให้คุณเพิ่มข้อมูลสำคัญสองส่วน: (1) ประเภท twitter:card — summary_large_image จะแสดงรูปภาพเต็มความกว้างเหนือข้อความลิงก์ ซึ่งดึงดูดความสนใจได้มากกว่าภาพขนาดย่อใน basic summary card; (2) twitter:site และ twitter:creator — เพื่อให้ชื่อบัญชี @handle ของคุณปรากฏใต้การ์ด สำหรับการตลาดเนื้อหา การเพิ่ม Twitter Card tags นั้นคุ้มค่ากับ HTML เพิ่มอีกสองบรรทัด

Facebook และ LinkedIn มีการแคช (cache) ข้อมูล OG อย่างเข้มงวด หลังจากอัปเดต og:image URL ให้ใช้ Facebook Sharing Debugger (developers.facebook.com/tools/debug) เพื่อบังคับให้ทำการดึงข้อมูลใหม่ — วาง URL ของคุณแล้วคลิก "Scrape Again" สำหรับ LinkedIn มี Post Inspector ที่ linkedin.com/post-inspector ส่วน Twitter/X โดยปกติจะรีเฟรชอัตโนมัติภายในไม่กี่ชั่วโมง การเปลี่ยน URL รูปภาพ (เช่น การเติม ?v=2 เพื่อล้างแคช) ก็สามารถบังคับให้แพลตฟอร์มดึงรูปภาพใหม่ได้เช่นกัน

og:locale ระบุภาษาและพื้นที่ของเนื้อหาของคุณ เช่น en_US, fr_FR หรือ tr_TR เป็นตัวเลือกเสริมแต่จะมีประโยชน์สำหรับเว็บไซต์หลายภาษา — ช่วยให้ Facebook แสดงเวอร์ชันภาษาที่ถูกต้องเมื่อผู้ใช้คลิกลิงก์ที่ถูกแชร์ รูปแบบคือ ภาษา_TERRITORY โดยใช้เครื่องหมายขีดล่าง (ไม่ใช่ขีดกลาง) og:locale:alternate สามารถระบุภาษาเพิ่มเติมที่รองรับ สำหรับเว็บไซต์ภาษาเดียว การไม่ใส่ก็ไม่มีปัญหา Facebook จะเลือกเป็น en_US เป็นค่าเริ่มต้น

Facebook Sharing Debugger (developers.facebook.com/tools/debug) ครบถ้วนที่สุด — มันแสดงให้เห็นอย่างชัดเจนว่ามีการดึงแท็กใดไปบ้าง, การแจ้งเตือนใดๆ และให้คุณบังคับรีเฟรชแคชได้ LinkedIn Post Inspector (linkedin.com/post-inspector) ใช้สำหรับทดสอบการแสดงผลบน LinkedIn ส่วน Twitter Card Validator (cards-dev.twitter.com/validator) ใช้ตรวจสอบ Twitter cards เครื่องมือเหล่านี้จะแสดงข้อมูลที่ถูกดึงจริง ไม่ใช่การจำลอง ดังนั้นจึงตรวจพบปัญหา เช่น URL รูปภาพที่ถูกบล็อก หรือแท็กที่จำเป็นแต่ขาดหายไป

ไม่เลย การสร้าง OG tags และการเรนเดอร์ตัวอย่างโซเชียลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณด้วย JavaScript ชื่อหน้าเว็บ, คำอธิบาย, URL และ URL รูปภาพของคุณจะไม่หลุดออกจากเครื่องของคุณเลย