เครื่องมือสำหรับนักพัฒนา

ตัวสร้างแท็ก Meta

กรอกช่อง แล้วคัดลอกแท็กไปใส่ใน head ของหน้า

ตัวสร้างแท็ก Meta ทำงานบนอุปกรณ์ของคุณ
  • ทำงานในเบราว์เซอร์ของคุณ — ข้อความของคุณไม่ถูกส่งไปที่ใด
  • ไม่ต้องสมัครสมาชิก ไม่มีโควตา ใช้ฟรีกี่ครั้งก็ได้

ทำงานอย่างไร

มีแท็กสามชุดที่ซ้อนทับกันและทำหน้าที่เกือบเหมือนกัน คือชุด SEO แบบดั้งเดิม Open Graph สำหรับ Facebook, LinkedIn, WhatsApp และ Slack และ Twitter Card การเขียนด้วยมือหมายถึงต้องทำซ้ำสามครั้งและลืมบางอย่างไป

Open Graph ทำงานส่วนใหญ่

ไม่ได้มีแค่ Facebook LinkedIn, WhatsApp, Slack, Discord, iMessage และบริการอื่นส่วนใหญ่ที่แสดงตัวอย่างลิงก์ก็อ่านแท็ก Open Graph การทำให้ถูกต้องช่วยแก้ตัวอย่างได้เกือบทุกที่พร้อมกัน Twitter Card เป็นชุดเสริมเล็ก ๆ สำหรับ X ซึ่งจะใช้ Open Graph แทนเมื่อไม่มี

ตรวจความยาวขณะที่คุณพิมพ์

ประมาณ 60 ตัวอักษรสำหรับชื่อเรื่องและ 160 สำหรับคำอธิบายก่อนที่ผลการค้นหาจะตัด ตัวเลขเหล่านี้เป็นแนวทาง ไม่ใช่ขีดจำกัดตายตัว เครื่องมือค้นหาวัดชื่อเรื่องตามความกว้างเป็นพิกเซล ชื่อเรื่องที่เต็มไปด้วยตัวพิมพ์ใหญ่และตัว M จึงถูกตัดเร็วกว่าชื่อที่เต็มไปด้วยตัว l พิมพ์เล็ก คำเตือนจะบอกเมื่อคุณอยู่ในช่วงเสี่ยง

รูปภาพคือส่วนที่คนมักลืม

ลิงก์ที่ไม่มี og:image จะแสดงตัวอย่างเป็นกล่องสีเทาเปล่า ๆ ซึ่งลดการคลิกอย่างวัดผลได้ URL ต้องเป็นแบบสมบูรณ์ ขึ้นต้นด้วย https เพราะเว็บไซต์ที่ดึงข้อมูลไม่รู้ว่า URL ฐานของหน้าคุณคืออะไร ขนาดประมาณ 1200 คูณ 630 พิกเซลเหมาะกับการ์ดแบบรูปใหญ่

Canonical URL

การใส่แท็กลิงก์ canonical บอกเครื่องมือค้นหาว่าที่อยู่ใดคือที่อยู่จริง เมื่อเข้าถึงหน้าเดียวกันได้หลายทาง ทั้งมีและไม่มีเครื่องหมายทับท้าย มีพารามิเตอร์ติดตาม และบน http และ https เป็นการแก้ด้วยบรรทัดเดียวสำหรับปัญหาเนื้อหาซ้ำทั้งกลุ่ม

ทุกอย่างถูกเอสเคป

เครื่องหมายคำพูดและวงเล็บเหลี่ยมแหลมในข้อความของคุณถูกเอสเคปอย่างเหมาะสม คำอธิบายที่มีอะพอสทรอฟีหรือเครื่องหมายคำพูดจึงไม่ทำให้แท็กที่มันอยู่ในนั้นเสีย

คำถามที่พบบ่อย

ตัวสร้างแท็ก Meta — คำถามที่พบบ่อย

ฉันต้องใช้แท็ก Twitter Card ควบคู่กับ Open Graph หรือไม่

ไม่จำเป็นเคร่งครัด X จะใช้ Open Graph แทนเมื่อไม่มี แท็กเพิ่มเติมช่วยให้ควบคุมได้ว่าจะใช้การ์ดรูปแบบใด

ชื่อเรื่องควรยาวเท่าไร

ประมาณ 60 ตัวอักษร เครื่องมือค้นหาตัดตามความกว้างเป็นพิกเซล ดังนั้นให้ถือเป็นแนวทางมากกว่ากฎ

ทำไมตัวอย่างลิงก์ของฉันไม่มีรูปภาพ

อาจเพราะไม่มี og:image หรือ URL เป็นแบบสัมพัทธ์ ต้องเป็น URL แบบสมบูรณ์ ขึ้นต้นด้วย https

แท็กเหล่านี้ใส่ไว้ที่ไหน

ภายใน <head> ของหน้าเว็บของคุณ

ทำไมตัวอย่างของฉันไม่อัปเดต

แพลตฟอร์มโซเชียลแคชอย่างหนัก ส่วนใหญ่มีดีบักเกอร์ที่บังคับให้ดึงข้อมูลใหม่