ตัวตรวจสอบ Open Graph
ดูตัวอย่างและตรวจสอบความถูกต้องของ meta tag Open Graph สำหรับการแชร์บนโซเชียลโดยการตรวจสอบจาก URL จริงหรือวาง HTML ตรวจสอบ og:title, og:description, og:image, ลิงก์ canonical, Twitter fallbacks, แท็กที่ซ้ำกัน, พฤติกรรมการเปลี่ยนเส้นทาง และปัญหาการแสดงตัวอย่างการแชร์ทั่วไปที่ส่งผลต่อ Facebook, LinkedIn, Slack, Discord และแอปส่งข้อความ
ตัวบล็อกโฆษณาของคุณทำให้เราไม่สามารถแสดงโฆษณาได้
MiniWebtool ให้ใช้งานฟรีเพราะมีโฆษณา หากเครื่องมือนี้ช่วยคุณได้ โปรดสนับสนุนเราด้วย Premium (ไม่มีโฆษณา + เร็วขึ้น) หรืออนุญาต MiniWebtool.com แล้วรีโหลดหน้าเว็บ
- หรืออัปเกรดเป็น Premium (ไม่มีโฆษณา)
- อนุญาตโฆษณาสำหรับ MiniWebtool.com แล้วรีโหลด
เกี่ยวกับ ตัวตรวจสอบ 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// จาก MiniWebtool, https://MiniWebtool.com/
โดยทีมงาน miniwebtool อัปเดตเมื่อ: 2026-03-09