ตัวอย่าง OG Tag - ตรวจสอบ Open Graph Meta Tag
ป้อนค่า Open Graph และ Twitter Card ของคุณเพื่อดูตัวอย่างบนโซเชียลมีเดียแบบเรียลไทม์ สร้างโค้ด meta tag ที่พร้อมใช้งานได้ทันที
Open Graph Meta Tag คืออะไร?
Open Graph (OG) meta tag คือ HTML meta element ที่ควบคุมลักษณะการแสดงผลของหน้าเว็บของคุณเมื่อแชร์บนแพลตฟอร์มโซเชียลมีเดีย เช่น Facebook, Twitter, LinkedIn และ Discord โดยจะกำหนดชื่อเรื่อง คำอธิบาย รูปภาพ และ URL ที่ปรากฏในการ์ดตัวอย่างบนโซเชียลมีเดีย การตั้งค่า OG tag อย่างถูกต้องสามารถปรับปรุงอัตราการคลิกผ่านจากการแชร์บนโซเชียลได้อย่างมาก
วิธีใช้เครื่องมือแสดงตัวอย่าง OG Tag นี้
- ป้อนค่า OG — กรอก og:title, og:description, URL ของ og:image, og:url, og:type และ og:site_name
- เพิ่ม Twitter Card Tag — หรือเลือกที่จะแก้ไขชื่อเรื่อง คำอธิบาย และรูปภาพสำหรับ Twitter/X card
- ตรวจสอบตัวอย่างแสดงผลแบบเรียลไทม์ — ดูว่าหน้าเว็บของคุณจะแสดงผลอย่างไรบน Facebook, Twitter, LinkedIn และ Discord
- คัดลอกโค้ดที่สร้างขึ้น — คลิก คัดลอกโค้ด เพื่อรับ HTML meta tag ที่พร้อมนำไปวางในหน้าเว็บของคุณ
ทำไมต้องใช้เครื่องมือแสดงตัวอย่าง OG Tag นี้?
- แสดงตัวอย่าง 4 แพลตฟอร์ม — ดูตัวอย่าง Facebook, Twitter/X, LinkedIn และ Discord พร้อมกัน
- อัปเดตแบบเรียลไทม์ — ตัวอย่างอัปเดตทันทีที่คุณพิมพ์ ไม่ต้องโหลดหน้าเว็บใหม่
- สร้างโค้ด — สร้างโค้ด HTML meta tag ที่จัดรูปแบบอย่างถูกต้องโดยอัตโนมัติ
- รองรับ Twitter Card — มีช่องแยกสำหรับการแก้ไขเฉพาะสำหรับ Twitter (twitter:title, twitter:image, ฯลฯ)
- ไม่ต้องใช้เซิร์ฟเวอร์ — ทุกอย่างทำงานในเบราว์เซอร์ของคุณ ไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ
- คำแนะนำขนาด — คำแนะนำในตัวสำหรับขนาดรูปภาพที่เหมาะสม (1200x630px)
FreeToolbox เทียบกับเครื่องมือแสดงตัวอย่าง OG อื่นๆ
| คุณสมบัติ | FreeToolbox | OpenGraph.xyz | MetaTags.io |
|---|---|---|---|
| แพลตฟอร์ม | 4 (FB, TW, LI, DC) | 3 (FB, TW, LI) | 3 (Google, FB, TW) |
| แสดงตัวอย่างแบบเรียลไทม์ | ใช่ | ใช่ | ใช่ |
| สร้างโค้ด | ใช่ | ใช่ | ใช่ |
| แสดงตัวอย่าง Discord | ใช่ | ไม่ใช่ | ไม่ใช่ |
| ไม่ต้องมีบัญชี | ใช่ | ใช่ | ฟรีมีข้อจำกัด |
| โฆษณา | น้อยที่สุด | ปานกลาง | มาก |
คำถามที่พบบ่อย
ขนาด og:image ที่แนะนำคือเท่าไหร่?
ขนาดที่แนะนำคือ 1200 x 630 พิกเซล (อัตราส่วน 1.91:1) ซึ่งใช้ได้ดีกับ Facebook, Twitter, LinkedIn และ Discord ใช้รูปแบบ PNG หรือ JPG และขนาดไฟล์ไม่เกิน 8MB
ทำไมเครื่องมือนี้ไม่สามารถดึง OG tag จาก URL ได้?
ความปลอดภัยของเบราว์เซอร์ (นโยบาย CORS) ป้องกันไม่ให้ JavaScript ดึงเนื้อหาจากโดเมนอื่น เครื่องมือนี้ใช้การป้อนข้อมูลด้วยตนเองแทน ซึ่งจริงๆ แล้วดีกว่าสำหรับการแสดงตัวอย่าง tag ก่อนที่คุณจะเผยแพร่
ฉันต้องมีทั้ง OG tag และ Twitter Card tag หรือไม่?
Twitter/X จะใช้ OG tag หากไม่มี Twitter-specific tag อย่างไรก็ตาม ขอแนะนำให้เพิ่ม twitter:card เพื่อควบคุมประเภทของการ์ด ใช้ Twitter-specific tag เฉพาะเมื่อคุณต้องการเนื้อหาที่แตกต่างกันบน Twitter เมื่อเทียบกับแพลตฟอร์มอื่นๆ
ฉันควรใช้ og:type อะไร?
ใช้ 'website' สำหรับหน้าแรกและหน้าทั่วไป, 'article' สำหรับโพสต์บล็อกและข่าว, 'product' สำหรับหน้าผลิตภัณฑ์ ค่าเริ่มต้น 'website' ใช้ได้กับกรณีส่วนใหญ่
ฉันจะทดสอบ OG tag จริงที่ใช้งานอยู่ได้อย่างไร?
หลังจากเพิ่ม meta tag ลงในหน้าเว็บของคุณแล้ว ให้ใช้ Sharing Debugger ของ Facebook (developers.facebook.com/tools/debug), Twitter Card Validator และ LinkedIn Post Inspector เพื่อตรวจสอบว่า tag ทำงานอย่างถูกต้อง