วิธีใช้งาน ตัวดูตัวอย่าง Open Graph และเมตาแท็ก
- 1
วางลิงก์
ป้อนที่อยู่ของหน้าสาธารณะ แล้วคลิก ดูตัวอย่างลิงก์ เพื่ออ่านชื่อ คำอธิบาย แท็ก Open Graph และแท็กการ์ด X
- 2
ตรวจสอบการ์ด
เปรียบเทียบผลลัพธ์บน Google กับการ์ดของ Facebook, X, LinkedIn, Slack, Discord และสไตล์ iMessage พร้อมดูรายการแท็กที่ขาดหรือยังไม่ดีพอ
- 3
แก้ไขแท็ก
คลิก แก้ไขแท็กเหล่านี้ หรือเปิด เขียนแท็ก เพื่อเปลี่ยนชื่อ คำอธิบาย และรูปภาพ แล้วดูตัวอย่างทุกแบบอัปเดตทันทีที่พิมพ์
- 4
คัดลอกไปใส่ในหน้าเว็บ
คัดลอกเมตาแท็กที่สร้างขึ้นไปวางใน head ของหน้าเว็บ เผยแพร่ แล้วตรวจสอบ URL จริงอีกครั้ง
ข้อจำกัดและ Pro
ฟรี: ดูตัวอย่าง URL ได้ 20 ครั้งต่อนาที หน้าเว็บ HTML ได้ถึง 3 MB หมดเวลา 12 วินาที ดูตัวอย่าง 7 แพลตฟอร์มต่อลิงก์ และแก้ไขแท็กได้ไม่จำกัด
เกี่ยวกับ ตัวดูตัวอย่าง Open Graph และเมตาแท็ก
ตัวดูตัวอย่างเมตาแท็กแสดงให้เห็นว่าลิงก์จะหน้าตาเป็นอย่างไรก่อนที่คุณจะแชร์ โดยอ่านแท็กที่ใช้สร้างตัวอย่างลิงก์ ได้แก่ title ของ HTML และ meta description แท็ก Open Graph เช่น og:title, og:description, og:image และ og:site_name แท็กการ์ด X เช่น twitter:card รวมถึงสีธีมที่ Discord ใช้เป็นแถบสีของ embed จากนั้นจะแสดงตัวอย่าง 7 แบบ ได้แก่ ผลการค้นหาของ Google โพสต์ลิงก์บน Facebook และ LinkedIn การ์ด X แบบรูปภาพขนาดใหญ่หรือแบบสรุป การแสดงลิงก์ของ Slack embed ของ Discord และกล่องข้อความสไตล์ iMessage
เมื่อช่องใดขาดหายไป ตัวอย่างจะใช้ค่าสำรองเหมือนที่แพลตฟอร์มส่วนใหญ่ทำ เช่น ใช้ชื่อหน้าแทน og:title และจะระบุแหล่งที่มาไว้ในคำเตือน รูปภาพก็ถูกตรวจสอบด้วย โดยอ่านขนาดพิกเซลและประเภทไฟล์จากส่วนหัวของไฟล์ ทำให้รู้ว่ารูปเล็กกว่าขั้นต่ำ 200 × 200 ของ Facebook ใหญ่เกินขีดจำกัด 5 MB ของ X เป็น SVG ที่ไม่รองรับ หรือสัดส่วนไม่เหมาะกับการ์ดใหญ่ 2:1
แท็บ เขียนแท็ก ทำงานได้โดยไม่ต้องดึงข้อมูลใด ๆ และให้บล็อกเมตาแท็กที่พร้อมใช้ ตัวอย่างเป็นเพียงค่าประมาณ เพราะแพลตฟอร์มเปลี่ยนดีไซน์ เก็บแคชการ์ดไว้หลายวัน และบางแห่งแสดงข้อความต่างกันสำหรับผู้ใช้ที่ลงชื่อเข้าใช้ หากต้องการรีเฟรชการ์ดที่แชร์ไปแล้ว ให้ใช้เครื่องมือดีบักของแพลตฟอร์มนั้นหลังเผยแพร่
ความเป็นส่วนตัว
ใน ตรวจสอบ URL ที่อยู่จะถูกส่งไปยังเซิร์ฟเวอร์ของเรา ซึ่งจะดาวน์โหลดหน้านั้นหนึ่งครั้งและไบต์แรก ๆ ของ og:image เพื่ออ่านแท็กและขนาดรูปภาพ โดยไม่มีการจัดเก็บหรือบันทึกล็อก จากนั้นรูปภาพตัวอย่างจะโหลดในเบราว์เซอร์ของคุณโดยตรงจากเว็บไซต์ที่โฮสต์ไว้ ส่วน เขียนแท็ก ทำงานในเบราว์เซอร์ของคุณเท่านั้น
คุณสมบัติ
ตัวอย่าง 7 แบบ
การ์ดของ Google, Facebook, X, LinkedIn, Slack, Discord และสไตล์ iMessage เรียงเทียบกันในหน้าเดียว
ตรวจสอบ og:image
อ่านขนาดพิกเซล ประเภทไฟล์ และขนาดไฟล์จากตัวรูปภาพ พร้อมเทียบกับขั้นต่ำของแต่ละแพลตฟอร์ม
ตัวสร้างแท็ก
พิมพ์ชื่อ คำอธิบาย และรูปภาพ แล้วคัดลอกบล็อก Open Graph และการ์ด X ที่ครบถ้วน