Softonic

ตัวตรวจสอบ Open Graph

ขั้นตอน 1 / 3
ถัดไป

วาง HTML ของหน้าเว็บ (เฉพาะส่วน <head> ก็เพียงพอ) แล้วเครื่องมือนี้จะแยกวิเคราะห์แท็กเมตา og: และ twitter: ทุกตัวที่พบ จากนั้นรายงานว่ามีแท็กสำคัญตัวใดครบทั้งหกตัว ตัวใดขาดหายไป และค่าที่แน่นอนของแต่ละตัว เนื่องจากอ่านจากมาร์กอัปที่คุณวางแทนการดึง URL สด เครื่องมือนี้จึงใช้ได้กับเซิร์ฟเวอร์ staging, localhost และหน้าที่อยู่หลังการเข้าสู่ระบบ ซึ่งเป็นที่ที่ตัวเก็บข้อมูลออนไลน์เข้าถึงไม่ได้

เครื่องมือนี้อ่านแท็กของคุณอย่างไร

  1. 1

    เปิดซอร์สของหน้าเว็บ

    กด Ctrl+U (หรือ Cmd+Option+U บน macOS) เพื่อดู HTML ดิบที่ตัวเก็บข้อมูลของโซเชียลได้รับจริง

  2. 2

    คัดลอกส่วน head

    เลือกตั้งแต่ `<head>` ถึง `</head>` ไม่จำเป็นต้องใช้ `<body>` แม้การวางทั้งหน้าก็ไม่มีปัญหาใดๆ

  3. 3

    วางลงในเครื่องมือ

    แท็ก `<meta>` ทุกตัวจะถูกแยกวิเคราะห์ขณะที่คุณพิมพ์ ไม่มีการดึง URL ใดๆ ตรวจสอบเฉพาะมาร์กอัปที่คุณวางเท่านั้น

  4. 4

    อ่านรายการตรวจสอบ

    การตรวจสอบหกรายการจะเปลี่ยนเป็นสีเขียวหรือแดง: og:title, og:description, og:type, og:url, og:image และ twitter:card

  5. 5

    ตรวจดูค่าที่พบ

    แท็ก og: และ twitter: ทุกตัวจะแสดงพร้อมเนื้อหาของมัน ทำให้การพิมพ์ผิด ค่าที่ว่างเปล่า และเส้นทางรูปภาพแบบสัมพัทธ์ปรากฏชัด

แท็ก Open Graph ที่เครื่องมือนี้มองหา

แท็ก วัตถุประสงค์ อยู่ในรายการตรวจสอบไหม?
og:title หัวข้อของการ์ด ใช่ จำเป็น
og:description คำบรรยายรองของการ์ด ใช่ จำเป็น
og:type website, article, video ฯลฯ ใช่ จำเป็น
og:url URL มาตรฐาน (canonical) ใช่ จำเป็น
og:image URL ของรูปภาพตัวอย่าง ใช่ จำเป็น
og:site_name บรรทัดชื่อแบรนด์เหนือหัวข้อ แสดงเมื่อมี
og:locale en_US, es_ES ฯลฯ แสดงเมื่อมี

แท็ก og: อื่นๆ ในมาร์กอัปของคุณก็จะแสดงด้วยเช่นกัน แม้จะไม่ได้อยู่ในรายการตรวจสอบก็ตาม

แท็ก Twitter Card

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

แท็ก วัตถุประสงค์
twitter:card summary, summary_large_image ฯลฯ
twitter:site @handle ของบัญชีที่เผยแพร่
twitter:creator @handle ของผู้เขียน
twitter:title แทนที่ og:title
twitter:description แทนที่ og:description
twitter:image แทนที่ og:image

ข้อกำหนดของรูปภาพที่ใช้ได้ทุกที่

เครื่องมือนี้ยืนยันว่ามีการประกาศ og:image แต่จะไม่ดาวน์โหลดไฟล์เลย ดังนั้นให้ตรวจสอบสิ่งเหล่านี้ด้วยตนเอง:

  • ขนาด: 1200 x 630 พิกเซล (Facebook, LinkedIn และการ์ด Twitter ขนาดใหญ่)
  • อัตราส่วนภาพ: 1.91:1 สำหรับ summary_large_image
  • ขนาดไฟล์: ต่ำกว่า 5 MB โดยควรต่ำกว่า 1 MB เพื่อไม่ให้ตัวเก็บข้อมูลหมดเวลา
  • รูปแบบ: JPG หรือ PNG ส่วน WebP และ AVIF ยังได้รับการรองรับอย่างไม่สม่ำเสมอ
  • URL แบบสัมบูรณ์: ใช้ที่อยู่เต็ม https://... เสมอ ห้ามใช้เส้นทางแบบสัมพัทธ์กับโปรโตคอลหรือสัมพัทธ์กับราก

ปัญหาที่พบบ่อยที่รายงานเผยให้เห็น

  • ไม่มี og:image ข้อผิดพลาดที่พบบ่อยที่สุด หากไม่มีรูปภาพ การ์ดจะลดรูปเหลือเพียงลิงก์สีน้ำเงินที่ไม่มีการจัดรูปแบบ
  • แท็กที่มีอยู่แต่ว่างเปล่า เครื่องมือนี้แสดงทุกค่า จึงจับได้ง่ายเมื่อ og:title ไม่มีเนื้อหาต่อท้าย
  • เส้นทางรูปภาพแบบสัมพัทธ์ og:image ต้องเป็น URL แบบสัมบูรณ์ เส้นทางอย่าง /img/card.jpg จะทำให้การเก็บข้อมูลผิดพลาด
  • og:url ไม่ตรงกัน เมื่อ og:url ต่างจาก canonical จริง แพลตฟอร์มอาจปฏิเสธการเก็บข้อมูลของหน้าเว็บ
  • แท็กที่ถูกแทรกโดย JavaScript แท็กเหล่านี้จะไม่ปรากฏใน view-source จึงไม่ปรากฏที่นี่ด้วย และตัวเก็บข้อมูลส่วนใหญ่จะมองไม่เห็น
  • การ์ดที่ล้าสมัยบน Facebook ไม่ใช่ปัญหาของมาร์กอัป Facebook เก็บผลการดึงข้อมูลไว้ในแคช ให้บังคับรีเฟรชจาก Sharing Debugger ของมัน

คำถามที่พบบ่อย

เพราะการวางมาร์กอัปจะแสดงสิ่งที่ตัวเก็บข้อมูลของโซเชียลเห็นในการตอบสนองแบบดิบอย่างแม่นยำ และใช้ได้กับหน้าที่ตัวเก็บข้อมูลเข้าถึงไม่ได้ เช่น เซิร์ฟเวอร์ staging, localhost, อินทราเน็ต และทุกอย่างที่อยู่หลังการเข้าสู่ระบบ เปิดหน้าเว็บของคุณ กด Ctrl+U คัดลอกซอร์ส แล้ววางที่นี่

ไม่จำเป็นเสมอไป X จะย้อนกลับไปใช้แท็ก Open Graph เมื่อไม่มีแท็ก twitter: จึงมีเพียง twitter:card เท่านั้นที่อยู่ในรายการตรวจสอบ เพิ่มแท็กที่เหลือเฉพาะเมื่อคุณต้องการหัวข้อ คำบรรยาย หรือรูปภาพบน X ที่ต่างจากแพลตฟอร์มอื่นทั้งหมด

เครื่องมือตรวจสอบแสดง DOM หลังจาก JavaScript ทำงานแล้ว ในขณะที่ตัวเก็บข้อมูลของโซเชียลอ่านการตอบสนอง HTML แบบดิบ ให้ใช้ view-source (Ctrl+U) ไม่ใช่เครื่องมือตรวจสอบ แล้ววางสิ่งนั้น หากแท็กมีอยู่เฉพาะใน DOM ให้เพิ่มการเรนเดอร์ฝั่งเซิร์ฟเวอร์หรือบริการพรีเรนเดอร์ เพื่อให้ตัวเก็บข้อมูลมองเห็นได้

1200 x 630 พิกเซล รูปแบบ JPG หรือ PNG เป็นขนาดที่แนะนำสำหรับการ์ดขนาดใหญ่ของ Facebook และ LinkedIn ใช้ได้กับ X และปรับขนาดได้อย่างคมชัดบน Slack, Discord และแอปอื่นๆ ที่แสดงตัวอย่างลิงก์ เครื่องมือนี้ยืนยันว่ามีการประกาศ og:image แต่จะไม่เปิดไฟล์ ดังนั้นให้ตรวจสอบขนาดด้วยตนเอง

Facebook เก็บผลการดึงข้อมูลไว้ในแคชนานถึง 30 วัน วาง URL ลงใน Sharing Debugger ที่ developers.facebook.com/tools/debug แล้วดึงข้อมูลใหม่เพื่อล้างแคช

เครื่องมือที่เกี่ยวข้อง

เครื่องมือตรวจสอบความยาวของคำอธิบายเมตา

วัดคำอธิบายเมตาเป็นจำนวนอักขระและพิกเซลโดยประมาณ เปรียบเทียบแนวทางการเรียบเรียง และดูตัวอย่างการจัดวางบนเดสก์ท็อปกับมือถือ

เครื่องดึงลิงก์ภายนอก

วางโค้ด HTML ดิบ และระบุ URL ฐานได้ตามต้องการ จากนั้นรับรายการลิงก์ภายนอก http/https ทั้งหมดในโค้ดแบบไม่มีรายการซ้ำ เพื่อใช้ตรวจสอบลิงก์และประเมินผล SEO

เครื่องมือสร้างสเกมาสำหรับคำถามบ่อย (FAQ Schema Generator)

สร้างมาร์กอัป JSON-LD แบบ FAQPage จากคู่คำถามและคำตอบ เพื่อให้หน้าเว็บของคุณเข้าเกณฑ์ผลการค้นหาแบบสมบูรณ์ (rich results) และกล่องคำตอบของ Google

เครื่องมือตรวจสอบเฮดเดอร์ความปลอดภัย HTTP

วาง HTTP response headers แล้วตรวจ HSTS, CSP, clickjacking, MIME, referrer และนโยบาย cross-origin ภายในเบราว์เซอร์

ตัวจำลองผลการค้นหา Google

ดูตัวอย่างผลค้นหาแบบ Google โดยประมาณด้วยขีดจำกัดจำนวนอักขระสำหรับมือถือและเดสก์ท็อป ร่างของคุณอยู่ในเซสชันเบราว์เซอร์นี้เท่านั้น

เครื่องมือตรวจสอบ XML Sitemap

ตรวจสอบ XML Sitemap ในเบราว์เซอร์เพื่อค้นหาข้อผิดพลาดในการแยกวิเคราะห์ ตำแหน่งที่ขาดหาย URL ซ้ำ และค่าฟิลด์ที่พบบ่อย

เครื่องมือนี้มีให้บริการในภาษาอื่น