ดูตัวอย่าง Open Graph

เครื่องมือดูตัวอย่างและตรวจสอบ Open Graph ออนไลน์ฟรี

ตรวจสอบว่า URL ใดๆ จะแสดงอย่างไรเมื่อแชร์บน Facebook, Twitter (X), LinkedIn, Discord, Slack และแพลตฟอร์มโซเชียลอื่นๆ เครื่องมือนี้จะดึง OG meta tags และแสดงตัวอย่างที่ใกล้เคียงจริง พร้อมคะแนนความครบถ้วนและรายการ tag ที่ขาด

Open Graph Protocol คืออะไร?

Open Graph protocol ถูกสร้างโดย Facebook ในปี 2010 เพื่อให้หน้าเว็บกลายเป็นวัตถุที่แสดงผลแบบ rich object บน social graph แพลตฟอร์มโซเชียลจะอ่าน meta tags ที่มี property="og:..." เพื่อกำหนดชื่อ คำอธิบาย รูปภาพ และ metadata อื่นๆ ที่แสดงในการ์ดตัวอย่าง

Open Graph Tags ที่จำเป็น

<!-- Required OG Tags -->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">

<!-- Recommended OG Tags -->
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Twitter Card Tags

Twitter/X ใช้ meta tags เฉพาะของตัวเองสำหรับตัวอย่างลิงก์ หากไม่มี tag ของ Twitter ระบบจะ fallback ไปใช้ Open Graph tags โดย card หลักมีสองแบบคือ summary และ summary_large_image

แต่ละแพลตฟอร์มใช้ OG Tags อย่างไร

แนวทางที่ดีสำหรับรูป OG

วิธีใช้เครื่องมือนี้

1. ป้อน URL: วาง URL เต็มของหน้าที่ต้องการดูตัวอย่างลงในช่องป้อนข้อมูล
2. กดดูตัวอย่าง: เครื่องมือจะดึงหน้าเว็บและแยก Open Graph, Twitter Card และ meta tags
3. ตรวจสอบตัวอย่าง: สลับแท็บ Facebook, Twitter/X, LinkedIn และ Discord เพื่อดูว่าลิงก์จะแสดงอย่างไร
4. ดูคะแนน: ตรวจสอบคะแนน OG และรายการ tag ที่ขาด
5. ดู tag ทั้งหมด: ใช้แท็บ tag ทั้งหมดเพื่อดู meta tag ทุกตัวที่ตรวจพบ
6. แก้ไขและทดสอบใหม่: อัปเดต meta tag บนหน้าเว็บ deploy แล้วทดสอบอีกครั้ง

ปัญหา OG Tag ที่พบบ่อย

เหมาะสำหรับ