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 แล้วดึงข้อมูลใหม่เพื่อล้างแคช

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

ตัวสร้าง Breadcrumb Schema

สร้าง BreadcrumbList JSON-LD ที่ถูกต้องสำหรับลำดับชั้นของหน้าใดก็ได้ ได้มาร์กอัป schema.org พร้อมวางลงในส่วน head ของเว็บไซต์

เครื่องตรวจสอบความสามารถในการจัดทำดัชนี (Indexability Checker)

ตรวจสอบว่า URL นั้นสามารถถูกดักจับโดยระบบดัชนีได้หรือไม่ โดยพิจารณาจากไฟล์ robots.txt, meta robots, X-Robots-Tag, สัญญาณ canonical และสถานะ HTTP

ตัวสร้างลิงก์ UTM

สร้าง URL ติดตามแคมเปญด้วยพารามิเตอร์ UTM source, medium, campaign, term และ content ลิงก์สะอาดที่เข้ารหัส URL แล้ว พร้อมใช้สำหรับโฆษณาและจดหมายข่าว

ตัวอย่าง SERP

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

ตัววิเคราะห์ UTM

วาง URL แคมเปญแล้วอ่านแท็ก UTM มาตรฐานทั้งห้าตัว (source, medium, campaign, term และ content) พร้อมค่าที่ถอดรหัสแล้วในแต่ละตัว วิธีที่รวดเร็วในการตรวจสอบลิงก์ติดตามก่อนส่ง

เครื่องมือวิเคราะห์ส่วนหัวความปลอดภัย

วางส่วนหัวการตอบกลับ HTTP ของคุณ แล้วรับคำแนะนำแบบจัดลำดับความสำคัญเกี่ยวกับส่วนหัวความปลอดภัยที่สำคัญ: Content-Security-Policy, Strict-Transport-Security, X-Frame-Options, Referrer-Policy และอื่น ๆ

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

คู่มือและกรณีการใช้งาน