เครื่องมือดีบัก OG Tags
หากตัวอย่างลิงก์ของคุณว่างเปล่าหรือผิดพลาด สิ่งแรกที่ควรดีบักคือ og tags ในซอร์สโค้ดของหน้า วาง HTML แล้วเครื่องมือจะแสดงให้เห็นชัดเจนว่าอ่านแท็กใดได้บ้างและค่าของแต่ละแท็กเป็นอย่างไร ทำให้แท็กที่หายไปหรือว่างเปล่าเด่นชัดทันที
วิธีดีบัก og tags
-
1
ใช้ view-source
เปิดซอร์สโค้ดของหน้า ไม่ใช่เครื่องมือตรวจสอบของเบราว์เซอร์ แล้วคัดลอกส่วน head เพราะตัวรวบรวมข้อมูลอ่านการตอบกลับดิบ
-
2
วางและเรียกใช้
วางลงในช่อง HTML ของส่วน head ของหน้า คลิก ถัดไป แล้วคลิก ผลลัพธ์
-
3
หาเครื่องหมายสีแดง
แต่ละรายการสีแดงในการตรวจทั้งหกคือแท็กที่เครื่องมือไม่สามารถอ่านจากมาร์กอัปของคุณได้
-
4
จับคู่กับสาเหตุ
เปรียบเทียบค่าที่แสดงกับรายการด้านล่าง แก้ส่วน head แล้ววางใหม่อีกครั้ง
สาเหตุทั่วไปที่แท็กไม่ถูกอ่าน
เมื่อแท็กที่คุณเห็นใน head ถูกรายงานว่าหายไป สาเหตุแทบทุกครั้งคือสิ่งใดสิ่งหนึ่งต่อไปนี้
| อาการ | สาเหตุที่เป็นไปได้ | วิธีแก้ |
|---|---|---|
| og:title เป็นสีแดง | แท็กใช้ name="og:title" |
เปลี่ยน name เป็น property |
| แท็กหายไป แต่ค่าดูถูกต้อง | ค่าไม่มีเครื่องหมายคำพูด | ใส่เครื่องหมายคำพูดรอบค่า content |
| เป็นสีแดงเฉพาะในเครื่องมือตรวจสอบ | แท็กถูกเพิ่มโดย JavaScript | ให้พิมพ์แท็กใน HTML ฝั่งเซิร์ฟเวอร์ |
| แท็กเป็นสีเขียว แต่ข้อความที่พิมพ์ว่างเปล่า | แอตทริบิวต์ content ว่างเปล่า | ใส่ค่า |
| แท็กถูกตัดหรือหายไป | ค่า content มีเครื่องหมาย > ดิบ |
เขียนเป็น > |
ภาพแสดงเป็นพาธเช่น /img/a.jpg |
ที่อยู่แบบสัมพัทธ์ | ใช้ที่อยู่เต็มที่ขึ้นต้นด้วย https:// |
สิ่งที่อาจทำให้เข้าใจผิด
- แท็กที่ถูกคอมเมนต์ไว้ก็ยังถูกอ่าน เครื่องมือสแกนข้อความที่คุณวางตามที่เป็น ดังนั้นแท็กที่อยู่ในคอมเมนต์ HTML อาจขึ้นเป็นสีเขียว แม้เบราว์เซอร์หรือตัวรวบรวมข้อมูลจะไม่สนใจ ลบโค้ดที่คอมเมนต์ไว้เก่า ๆ ก่อนทดสอบ
- แท็กซ้ำ หากแท็กเดียวกันปรากฏสองครั้ง รายการจะแสดงค่าเดียว คือค่าสุดท้ายที่พบ ให้ค้นหาแท็กซ้ำใน head มักเกิดจากธีมและปลั๊กอินที่เพิ่มแท็กเดียวกัน
- ค่าว่าง มีเพียง og:title และ og:description ที่ล้มเหลวเมื่อว่าง แท็กอื่นนับว่ามีอยู่ทันทีที่แท็กปรากฏ ดังนั้นให้อ่านค่าที่พิมพ์ออกมาเพื่อดูว่ามีช่องว่างหรือไม่
ขั้นตอนดีบักแบบสั้น
- วาง head และจดรายการสีแดง
- แก้มาร์กอัปในเทมเพลต ไม่ใช่สำเนาที่วางไว้
- รีโหลดหน้า คัดลอกซอร์สโค้ดอีกครั้ง และวางเวอร์ชันใหม่
- ทำซ้ำจนการตรวจทั้งหกเป็นสีเขียวและค่าที่พิมพ์ออกมาถูกต้อง
เนื่องจากเครื่องมือนี้อ่านข้อความและไม่ได้อ่านหน้าแบบสด มันจึงไม่บอกคุณว่าที่อยู่ของภาพส่งข้อผิดพลาดหรือหน้าเว็บมีการเปลี่ยนเส้นทางหรือไม่ เปิดที่อยู่ og:image ในเบราว์เซอร์เพื่อยืนยันว่าโหลดได้
เมื่อการตรวจทั้งหกเป็นสีเขียวแต่ตัวอย่างยังผิด
มาร์กอัปอาจถูกต้องแต่สิ่งอื่นยังล้มเหลวอยู่ ตรวจว่าที่อยู่ของภาพเปิดในเบราว์เซอร์ได้โดยไม่ต้องล็อกอิน หน้าไม่ได้เปลี่ยนเส้นทางไปยังที่อยู่อื่นที่มีแท็กต่างกัน และแพลตฟอร์มไม่ได้แสดงสำเนาแคชจากการดึงข้อมูลครั้งก่อน สาเหตุเหล่านี้อยู่นอกมาร์กอัป เครื่องมือจึงมองไม่เห็น แต่การได้ผลลัพธ์ที่สะอาดตรงนี้จะช่วยให้การค้นหาแคบลงไปที่สาเหตุเหล่านี้
คำถามที่พบบ่อย
เครื่องมือสแกนข้อความดิบที่คุณวาง รวมถึงคอมเมนต์ HTML ลบแท็กที่ถูกคอมเมนต์ไว้ก่อนทดสอบ
ผลลัพธ์แสดงค่าเดียวต่อชื่อแท็ก คือค่าสุดท้ายที่พบ ลบรายการซ้ำเพื่อไม่ให้เกิดความสับสน
เครื่องมือตรวจสอบแสดงหน้าหลังจากสคริปต์ทำงานแล้ว ตัวรวบรวมข้อมูลมักอ่านการตอบกลับ HTML ดิบ จึงควรดีบักด้วย view-source
ไม่ได้ เครื่องมืออ่านเฉพาะมาร์กอัปที่วางเท่านั้น มันมองไม่เห็นการเปลี่ยนเส้นทาง คำขอที่ถูกบล็อก หรือภาพที่โหลดไม่สำเร็จ
เครื่องมือที่เกี่ยวข้อง
ตัวสร้างลิงก์ UTM
สร้าง URL ติดตามแคมเปญด้วยพารามิเตอร์ UTM source, medium, campaign, term และ content ลิงก์สะอาดที่เข้ารหัส URL แล้ว พร้อมใช้สำหรับโฆษณาและจดหมายข่าว
ตัววิเคราะห์ UTM
วาง URL แคมเปญแล้วอ่านแท็ก UTM มาตรฐานทั้งห้าตัว (source, medium, campaign, term และ content) พร้อมค่าที่ถอดรหัสแล้วในแต่ละตัว วิธีที่รวดเร็วในการตรวจสอบลิงก์ติดตามก่อนส่ง
ตัวอย่าง SERP
ดูตัวอย่างผลการค้นหาของ Google ก่อนเผยแพร่ ตัวนับอักขระแบบเรียลไทม์จะเตือนเมื่อชื่อเรื่องและคำอธิบายเมตายาวเกินไป และตัวอย่างสไตล์ Google แสดงให้เห็นว่าผลลัพธ์ของคุณดูเป็นอย่างไร
เครื่องมือวิเคราะห์ส่วนหัวความปลอดภัย
วางส่วนหัวการตอบกลับ HTTP ของคุณ แล้วรับคำแนะนำแบบจัดลำดับความสำคัญเกี่ยวกับส่วนหัวความปลอดภัยที่สำคัญ: Content-Security-Policy, Strict-Transport-Security, X-Frame-Options, Referrer-Policy และอื่น ๆ
ตัวอย่างส่วนย่อ SERP จาก URL
วาง URL แล้วดูว่าชื่อเรื่อง คำอธิบายเมตา และ URL มาตรฐานของหน้านั้นแสดงเป็นส่วนย่อ Google อย่างไรแบบสด ดึงตรงจากหน้าเว็บ ไม่ต้องคัดลอกเอง
เครื่องสร้าง Sitemap
วางรายการ URL ของคุณแล้วสร้าง XML sitemap ที่ถูกต้องพร้อม changefreq, priority และ lastmod ตามต้องการ พร้อมบันทึกและส่งไปยัง Search Console
เครื่องมือนี้มีให้บริการในภาษาอื่น
- Debugger tagów OG [PL]
- Công cụ gỡ lỗi thẻ OG [VI]
- Debugger Tag OG [ID]
- أداة تصحيح وسوم OG [AR]
- OG-Tags-Debugger [DE]
- OGタグデバッガー [JA]
- Depurador de tags OG [PT]
- Depurador de etiquetas OG [ES]
- OG 태그 디버거 [KO]
- Felsökning av OG-taggar [SV]
- Débogueur de balises OG [FR]
- OG-tags debugger [NL]
- OG Tags Debugger [EN]
- Debugger dei tag OG [IT]
- Отладчик OG-тегов [RU]
- OG Etiketleri Hata Ayıklayıcısı [TR]
- OG 标签调试工具 [ZH]