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

ดูตัวอย่างและตรวจสอบความถูกต้องของ meta tag Open Graph สำหรับการแชร์บนโซเชียลโดยการตรวจสอบจาก URL จริงหรือวาง HTML ตรวจสอบ og:title, og:description, og:image, ลิงก์ canonical, Twitter fallbacks, แท็กที่ซ้ำกัน, พฤติกรรมการเปลี่ยนเส้นทาง และปัญหาการแสดงตัวอย่างการแชร์ทั่วไปที่ส่งผลต่อ Facebook, LinkedIn, Slack, Discord และแอปส่งข้อความ

QA โซเชียลการ์ด

ตรวจสอบ metadata ที่กำหนดว่า URL จะมีหน้าตาเป็นอย่างไรเมื่อมีคนแชร์ใน Facebook, LinkedIn, Slack, Discord, iMessage, X หรือแพลตฟอร์มพรีวิวอื่นๆ คุณสามารถตรวจสอบ URL จริงหลังการปรับใช้ หรือวาง HTML ในช่วงทดสอบเพื่อตรวจหาแท็ก og:* ที่หายไปก่อนเผยแพร่จริง

ตัวอย่างด่วน

ตั้งค่าแหล่งที่มา

โหมด URL จริงจะตรวจสอบสิ่งที่ Crawler เห็นในตอนนี้ โหมดวาง HTML มีประโยชน์ก่อนการเปิดตัว, ภายใน CMS หรือเมื่อคุณต้องการตรวจสอบมาร์กอัปส่วน head ที่เรนเดอร์จากเซิร์ฟเวอร์โดยไม่ต้องเผยแพร่

โหมดการตรวจสอบ ใช้โหมด URL จริงสำหรับการ QA ระบบที่ใช้งานจริง ใช้โหมดวาง HTML สำหรับช่วงทดสอบหรืองานเทมเพลต

URL หรือ URL อ้างอิง ในโหมด URL จริง นี่คือหน้าที่ต้องการดึงข้อมูล ในโหมดวาง HTML จะทำหน้าที่เป็น base URL ตัวเลือกสำหรับระบุเส้นทางรูปภาพหรือ canonical แบบ relative

สิ่งที่ตัวตรวจสอบยืนยัน

ฟิลด์หลักของ Open Graph: title, description, image, URL และ type
ความสอดคล้องของลิงก์ Canonical, พฤติกรรมการเปลี่ยนเส้นทาง และ metadata ที่ซ้ำซ้อน
ฟิลด์สำรองของ Twitter และสัญญาณคุณภาพของ URL รูปภาพ
ปัญหาความยาวของข้อความพรีวิวที่มักทำให้ถูกตัดหรือแสดงผลไม่ชัดเจน

มีประโยชน์สำหรับ

การ QA ด้านเทคนิค SEO, เวิร์กโฟลว์การเผยแพร่ข่าวสาร, การตรวจสอบก่อนเปิดตัวอีคอมเมิร์ซ, การย้ายระบบ CMS, การแก้ปัญหาการแสดงลิงก์ในแอปแชท และการทดสอบพรีวิวก่อนแคมเปญจะเริ่มทำงานจริง

ซอร์สโค้ด HTML

วาง HTML ทั้งหมด หรืออย่างน้อยส่วน <head> ที่มีข้อมูล metadata สำหรับโซเชียลของคุณ

HTML ที่วาง ตัวตรวจสอบจะอ่านซอร์สโค้ดดิบ JavaScript ที่แทรกแท็กหลังโหลดหน้าเว็บอาจยังคงใช้งานไม่ได้กับ Crawler จริง

รายละเอียดผลลัพธ์จะปรากฏด้านล่างในรายงานการตรวจสอบและการ์ดพรีวิว พื้นที่แสดงผลลัพธ์ถูกเรนเดอร์จากฝั่งเซิร์ฟเวอร์เพื่อให้ผลลัพธ์ทำงานได้โดยไม่ต้องพึ่งพาการคำนวณที่ฝั่งหน้าบ้านเพียงอย่างเดียว

\\n' } }; function setValue(id, value) { var el = document.getElementById(id); if (el) { el.value = value; } } function syncMode() { var modeField = document.getElementById('id_mode'); var pastePanel = document.getElementById('ogc-paste-panel'); var hint = document.getElementById('ogc-url-hint'); var mode = modeField ? modeField.value : 'fetch'; if (pastePanel) { pastePanel.classList.toggle('is-visible', mode === 'paste'); } if (hint) { hint.textContent = mode === 'paste' ? 'ระบุหรือไม่ก็ได้ แต่มีประโยชน์ หากมาร์กอัปที่คุณวางใช้ URL แบบ relative base URL นี้จะช่วยให้ตัวตรวจสอบวิเคราะห์เส้นทาง canonical และรูปภาพได้' : 'ป้อน URL สาธารณะให้ตรงกับที่ผู้ใช้หรือแคมเปญจะแชร์ การเปลี่ยนเส้นทางและ URL สุดท้ายที่ดึงมาจะแสดงในรายงาน'; } } function applyExample(key) { var example = examples[key]; if (!example) { return; } setValue('id_mode', example.mode); setValue('id_page_url', example.page_url); setValue('id_html_source', example.html_source); document.querySelectorAll('.ogc-example-btn').forEach(function (btn) { btn.classList.toggle('is-active', btn.getAttribute('data-example') === key); }); syncMode(); } document.addEventListener('DOMContentLoaded', function () { var modeField = document.getElementById('id_mode'); if (modeField) { modeField.addEventListener('change', syncMode); } document.querySelectorAll('.ogc-example-btn').forEach(function (btn) { btn.addEventListener('click', function () { applyExample(btn.getAttribute('data-example')); }); }); syncMode(); }); })();

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

เกี่ยวกับ ตัวตรวจสอบ Open Graph

ตัวตรวจสอบ Open Graph ช่วยคุณยืนยัน metadata ที่แม่นยำซึ่งควบคุมการแสดงผลของหน้าเว็บเมื่อมีการแชร์ลิงก์ในฟีดโซเชียล, แอปแชท, พรีวิวอีเมล หรือเครื่องมือทำงานร่วมกัน แทนที่จะปล่อยให้แพลตฟอร์มคาดเดาหัวข้อ คำอธิบาย หรือรูปภาพจากเนื้อหาเอง แท็ก Open Graph จะให้คำสั่งที่ชัดเจนแก่ Crawler ว่าควรแสดงหัวข้อใด สรุปความอย่างไร รูปภาพใดที่ต้องดึงมา ลิงก์ canonical ใดที่เชื่อมโยงกับการแชร์ และเนื้อหาหน้านั้นเป็นประเภทใด สิ่งนี้สำคัญสำหรับเวิร์กโฟลว์ SEO และ GEO เพราะระบบค้นหาข้อมูลสมัยใหม่มักนำสัญญาณระดับหน้าเว็บเหล่านี้ไปสร้างเป็นพรีวิว ลิงก์การ์ด สรุปความ หรือการอ้างอิงแหล่งที่มา

วิธีใช้งาน

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

สิ่งที่ตัวตรวจสอบประเมิน

สัญญาณ	ความสำคัญ	ปัญหาที่พบบ่อย
`og:title`	ให้หัวข้อที่ชัดเจนแก่ Crawler แทนที่จะใช้ title ของ HTML หรือหัวข้อแบบสุ่ม	หัวข้อที่สั้นเกินไปจะดูทั่วไปเกินไป ในขณะที่หัวข้อที่ยาวเกินไปมักถูกตัดในการพรีวิวข้อความ
`og:description`	ควบคุมข้อความเสริมที่อธิบายเนื้อหาต่อจากหัวข้อ	คำอธิบายที่น้อยเกินไปทำให้เสียพื้นที่พรีวิว หรือปล่อยให้แพลตฟอร์มสุ่มเนื้อหาบางส่วนมาแสดงเอง
`og:image`	กำหนดรูปภาพตัวอย่างหรือรูปภาพหลักในการ์ด	URL แบบ relative, รูปภาพที่เป็น HTTP หรือรูปภาพที่หายไป ทำให้พรีวิวไม่สอดคล้องกันในแต่ละแอป
`og:url` และ canonical	ช่วยให้แพลตฟอร์มรวบรวมการแชร์และรักษา URL หน้าที่ต้องการให้สอดคล้องกัน	การเปลี่ยนเส้นทางหรือ URL ที่ไม่ตรงกันทำให้ยอดการเข้าถึงถูกแยกส่วนและรบกวนสัญญาณการทำดัชนี
`twitter:card`	ปรับปรุงการแสดงผลสำรองบน X และตัวฝังลิงก์บางตัว แม้จะมี Open Graph อยู่แล้วก็ตาม	ทีมงานมักคิดว่า OG เพียงพอแล้ว แต่กลับได้การ์ดที่เล็กกว่าหรือแสดงผลไม่คงที่ในบางแพลตฟอร์ม

ข้อผิดพลาดทั่วไปและเคล็ดลับการตีความ

หน้าเว็บอาจดูถูกต้องในเบราว์เซอร์แต่ยังคงแสดงพรีวิวโซเชียลที่ไม่ดี หาก metadata ซ้ำซ้อน ถูกแทรกช้าด้วย JavaScript หรือแนบอยู่กับ URL canonical ที่ผิดพลาด ข้อผิดพลาดที่พบบ่อยอย่างหนึ่งคือการใส่ og:url เป็นเวอร์ชันที่ไม่ใช่ canonical หรือมีพารามิเตอร์ แต่กลับแชร์ URL อื่นในแคมเปญ อีกอย่างคือการใช้ path รูปภาพแบบ relative ที่ทำงานได้ในเบราว์เซอร์แต่สร้างความสับสนให้กับ Crawler แท็ก og:title หรือ og:description ที่ซ้ำกันก็มีความเสี่ยง เพราะแพลตฟอร์มอาจเลือกค่าแรก ค่าสุดท้าย หรือค่าเก่าที่แคชไว้ขึ้นอยู่กับวิธีการดึงข้อมูลของแต่ละที่

หากตัวตรวจสอบรายงานการเปลี่ยนเส้นทาง ให้เปรียบเทียบ URL ที่ร้องขอ, URL ที่ดึงได้สุดท้าย, ลิงก์ canonical และ og:url ไปพร้อมกัน โดยปกติค่าทั้งสี่ควรระบุถึงหน้าเดียวกัน หากไม่เป็นเช่นนั้น ให้แก้ไขก่อนเริ่มโปรโมชันเพื่อให้การแชร์โซเชียล การวิเคราะห์ และสัญญาณการทำดัชนีชี้ไปยัง URL เดียวที่เสถียร

กรณีการใช้งาน

เครื่องมือนี้ใช้งานได้จริงสำหรับทีมบรรณาธิการที่ตรวจสอบการแชร์บทความก่อนเผยแพร่ ทีมงานอีคอมเมิร์ซที่ยืนยันการ์ดสินค้าก่อนเริ่มแคมเปญ และนักพัฒนาที่ตรวจสอบผลลัพธ์ SSR หลังการย้ายเฟรมเวิร์ก นอกจากนี้ยังมีประโยชน์เมื่อต้องแก้ปัญหาว่าทำไม Slack, Discord, LinkedIn หรือ Facebook ถึงแสดงรูปภาพตัวอย่างที่ล้าสมัย หัวข้อหน้าโฮมเพจ หรือรูปภาพสำรองทั่วไป ในสถานการณ์เหล่านั้น ปัญหามักไม่ได้อยู่ที่แพลตฟอร์ม แต่อยู่ที่ metadata ที่ซอร์สโค้ดของหน้าเว็บแสดงออกมา

เนื่องจากระบบตอบคำถาม AI และระบบพรีวิวจำนวนมากนำ metadata ของหน้าเว็บกลับมาใช้ใหม่ การควบคุมแท็ก Open Graph ยังช่วยปรับปรุงวิธีการสรุปหรืออ้างอิงลิงก์นอกโซเชียลมีเดียแบบเดิมๆ ได้อีกด้วย แท็กเหล่านี้ไม่ใช่ปัจจัยในการจัดอันดับโดยตรง แต่เป็นส่วนหนึ่งของคุณภาพหน้าเว็บที่ส่งผลต่ออัตราการคลิกและความมั่นใจในการแชร์

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

ฉันจะทดสอบแท็ก Open Graph ก่อนโพสต์ลิงก์บนโซเชียลมีเดียได้อย่างไร?

ดึงข้อมูลจาก URL จริงหรือวางซอร์สโค้ด HTML สุดท้าย แล้วยืนยันว่ามี og:title, og:description, og:image, og:url และ og:type ในซอร์สโค้ดที่ Crawler ได้รับจริง หลังจากนั้นให้เปรียบเทียบ OG URL กับลิงก์ canonical และตรวจสอบให้แน่ใจว่าหน้าเว็บไม่ได้เปลี่ยนเส้นทางไปยังที่ที่ไม่คาดคิด

ทำไมการพรีวิวลิงก์ของฉันถึงแสดงรูปภาพหรือหัวข้อที่ไม่ถูกต้อง?

สาเหตุทั่วไปคือแท็ก Open Graph หายไป ค่าที่ซ้ำซ้อน path รูปภาพแบบ relative แคชที่ล้าสมัยบนแพลตฟอร์มโซเชียล หรือความไม่สอดคล้องกันระหว่าง URL ที่แชร์กับหน้า canonical หากซอร์สโค้ดสุดท้ายไม่มีฟิลด์ที่ชัดเจน ระบบพรีวิวอาจใช้วิธีคาดเดา

ฉันจำเป็นต้องมีแท็ก Twitter หรือไม่ถ้ามีแท็ก Open Graph อยู่แล้ว?

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

Meta Tags ที่สร้างด้วย JavaScript สามารถทำให้การพรีวิวโซเชียลเสียได้หรือไม่?

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

อ้างอิงเนื้อหา หน้าหรือเครื่องมือนี้ว่า:

"ตัวตรวจสอบ Open Graph" ที่ https://MiniWebtool.com/th/ตัวตรวจสอบ-open-graph/ จาก MiniWebtool, https://MiniWebtool.com/

โดยทีมงาน miniwebtool อัปเดตเมื่อ: 2026-03-09

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

ตั้งค่าแหล่งที่มา

ซอร์สโค้ด HTML

เกี่ยวกับ ตัวตรวจสอบ Open Graph

วิธีใช้งาน

สิ่งที่ตัวตรวจสอบประเมิน

ข้อผิดพลาดทั่วไปและเคล็ดลับการตีความ

กรณีการใช้งาน

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

ฉันจะทดสอบแท็ก Open Graph ก่อนโพสต์ลิงก์บนโซเชียลมีเดียได้อย่างไร?

ทำไมการพรีวิวลิงก์ของฉันถึงแสดงรูปภาพหรือหัวข้อที่ไม่ถูกต้อง?

ฉันจำเป็นต้องมีแท็ก Twitter หรือไม่ถ้ามีแท็ก Open Graph อยู่แล้ว?

Meta Tags ที่สร้างด้วย JavaScript สามารถทำให้การพรีวิวโซเชียลเสียได้หรือไม่?

เครื่องมือสำหรับเว็บมาสเตอร์:

เครื่องมือเด่น: