เครื่องมือตรวจสอบ OG ฟรีและ
ตัวตรวจสอบ Open Graph

แท็ก Open Graph คืออะไรและสำคัญอย่างไร?

แท็ก Open Graph (OG) เป็นส่วนโค้ดเมตา HTML ที่อยู่ในส่วนของหน้า <head> แท็กเหล่านี้กำหนดการแสดงเนื้อหาของคุณเมื่อแชร์บนโซเชียล เช่น Twitter/X, LinkedIn, Slack, iMessage และ Facebook หากไม่มี แพลตฟอร์มจะเดาเองว่าควรแสดงอะไร ซึ่งมักได้ผลไม่ดี

สี่แท็กที่ทุกหน้าควรมี

• og:title — พาดหัวที่แสดงในตัวอย่างลิงก์ (ควรยาวไม่เกิน 60 อักขระ)
• og:description — ข้อความสรุปประกอบ (ความยาวเหมาะสมคือ 150–160 อักขระ)
• og:image — รูปภาพตัวอย่าง (1200×630px, JPEG หรือ PNG)
• twitter:card — ตั้งค่าเป็น summary_large_image เพื่อให้ได้รูปแบบหน้า Twitter ที่ดีที่สุด

ทำไมบุ๊กมาร์กเสียภาพตัวอย่าง?

แท็ก OG เปลี่ยนเมื่อเว็บไซต์ออกแบบใหม่ เปลี่ยน CMS หรืออัปเดตโค้ด ลิงก์ที่บันทึกเมื่อหกเดือนก่อนพร้อมภาพตัวอย่างสวยงามอาจแสดงภาพว่างตอนนี้ เพราะเว็บไซต์ลบหรือเปลี่ยนชื่อเส้นทางภาพ OG เครื่องมืออย่าง Savebase ให้เก็บภาพย่อตัวอย่างต้นฉบับ ณ เวลาบันทึก เพื่อให้คอลเลกชันมีภาพสอดคล้องกันตลอดไป

เครื่องมือนี้ทำงานอย่างไร

ตัวตรวจดึง URL ฝั่งเซิร์ฟเวอร์ข้าม CORS แล้วอ่านถึงท้าย HTML<head> แล้วดึงแท็ก OG, Twitter Card และเมตาแท็กมาตรฐานทั้งหมด ผลลัพธ์ให้คะแนนเต็ม 100 ตามการมีอยู่และคุณภาพของแท็กสำคัญที่สุดหกตัว

ใช้เป็นเครื่องมือตรวจและแก้ OG

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

กรณีใช้งานตัวตรวจสอบ Open Graph

• ดูตัวอย่างบทความบล็อกก่อนเผยแพร่บน LinkedIn, Facebook, X หรือ Slack
• ยืนยันว่า og:image เป็นสาธารณะ มีขนาดถูกต้อง และเชื่อมโยงกับหน้าที่ถูกต้อง
• เปรียบเทียบแท็ก Open Graph กับช่อง Twitter Card เมื่อแต่ละแพลตฟอร์มแสดงตัวอย่างต่างกัน
• ตรวจแลนดิ้งเพจหลังย้าย CMS ปรับดีไซน์ หรือเปลี่ยนโดเมน

ตัวตรวจ OG เช็กอะไร?

ป้อน URL สาธารณะใดก็ได้เพื่อตรวจสอบ og:title, og:description,og:image URL หลัก, Twitter Card, ไอคอนเว็บไซต์ และเมทาดาทาอื่น ๆ ที่มีผลต่อภาพตัวอย่างลิงก์ในโซเชียล การวินิจฉัยจะระบุฟิลด์ที่ขาดและความยาวชื่อหรือคำอธิบายที่อาจถูกตัดเมื่อแชร์

ฉันจะตรวจสอบรูปภาพ Open Graph ได้อย่างไร?

วาง URL หน้าเว็บด้านบนแล้วเลือก ตรวจสอบ หากหน้านั้นมีog:image เครื่องมือตรวจสอบจะแสดงในภาพตัวอย่างของ X, Slack/iMessage และ LinkedIn หากไม่มี ให้เพิ่ม URL รูปภาพสาธารณะขนาด 1200×630px ลงในเมทาดาทา Open Graph ของหน้า

คำถามที่พบบ่อยเกี่ยวกับตัวตรวจสอบ OG