ตัวสร้าง Open Graph
เมื่อมีการแชร์ลิงก์ Facebook, LinkedIn, WhatsApp, Slack และ X จะสร้างการ์ดตัวอย่างจากแท็ก Open Graph ของหน้า กรอกชื่อ คำอธิบาย และรูปภาพ ดูการ์ดตามที่จะแสดงจริง แล้วคัดลอกแท็ก เครื่องมือจะเตือนเมื่อไม่มีรูปภาพหรือรูปเล็กเกินไป
นำเข้าจาก HTML ที่มีอยู่
ตัวเลือกเพิ่มเติม: ผู้เขียน สีธีม robots
Facebook · LinkedIn · WhatsApp
X (Twitter)
HTML สำหรับ <head>
วิธีใช้
- ป้อนชื่อ คำอธิบาย และที่อยู่แบบเต็มของหน้า
- วางที่อยู่ของรูปภาพสำหรับแชร์ (ขนาดที่เหมาะคือ 1200 × 630 พิกเซล) และตรวจสอบตัวอย่างบน Facebook และ X
- คัดลอกแท็กไปใส่ใน <head> ของหน้า หลังเผยแพร่แล้ว ให้ใช้เครื่องมือดีบักการแชร์ของแต่ละเครือข่ายเพื่อรีเฟรชแคช
คำถามที่พบบ่อย
og:image ควรมีขนาดเท่าไร
ใช้ 1200 × 630 พิกเซล (อัตราส่วน 1.91:1) ซึ่ง Facebook และ LinkedIn แนะนำสำหรับการ์ดขนาดใหญ่ ส่วน X จะครอปการ์ดใหญ่เป็น 2:1 อย่าวางข้อความสำคัญชิดขอบ และใช้ที่อยู่ https:// แบบเต็ม
ต้องมีแท็ก Twitter (X) แยกต่างหากหรือไม่
ต้องมีเพียง twitter:card เมื่อไม่มีแท็กของตัวเอง X จะอ่าน og:title, og:description และ og:image เครื่องมือจึงเพิ่มเฉพาะประเภทการ์ด และ @username ของคุณหากต้องการ
ฉันแก้แท็กแล้วแต่ตัวอย่างเก่ายังแสดงอยู่ เพราะอะไร
เครือข่ายสังคมออนไลน์เก็บแคชของการ์ดไว้หลายวัน ให้เปิด Facebook Sharing Debugger หรือ LinkedIn Post Inspector วางที่อยู่ แล้วสั่งให้ดึงหน้าใหม่อีกครั้ง
🏷️ ตัวสร้าง Meta Tag
🔗 ตัวสร้างลิงก์ UTM
🌈 ตัวสร้างไล่เฉดสี CSS
🔲 ตัวสร้าง CSS Box Shadow