Softonic

เครื่องมือสร้างแท็ก Open Graph

ขั้นตอน 1 / 2
ถัดไป

กรอกชื่อเรื่อง คำอธิบาย URL แบบ canonical รูปภาพตัวอย่าง และ og:type แล้วเครื่องมือนี้จะเขียนแท็ก <meta> ของ Open Graph ที่ตรงกัน พร้อมวางลงในส่วน <head> ของหน้าเว็บคุณ ช่องที่คุณเว้นว่างจะถูกตัดออกไป และเครื่องหมายคำพูดกับเครื่องหมาย & ในข้อความของคุณจะถูก escape เพื่อให้มาร์กอัปยังคงถูกต้อง เครื่องมือนี้เขียนเฉพาะพรอเพอร์ตี og: หลักห้าตัวเท่านั้น ไม่ใช่แท็ก Twitter Card หรือแท็กบทความ

วิธีสร้างแท็ก OG ของคุณ

  1. 1

    เลือก og:type

    ใช้ website สำหรับหน้าหลัก, article สำหรับโพสต์, product สำหรับหน้าร้านค้า, video.other สำหรับการฝัง ช่องนี้เป็นข้อความอิสระ ดังนั้นค่า og:type ที่ถูกต้องใด ๆ ก็ใช้ได้

  2. 2

    กรอกช่องหลัก

    ชื่อเรื่อง คำอธิบาย URL แบบ canonical และ URL รูปภาพแบบสัมบูรณ์ ช่องใดที่คุณเว้นว่างจะถูกตัดออกจากผลลัพธ์

  3. 3

    สร้างแท็ก

    เครื่องหมายคำพูดและ & จะถูก escape ให้คุณ และคุณจะได้บรรทัด meta หนึ่งบรรทัดต่อหนึ่งช่องที่คุณกรอก

  4. 4

    คัดลอกบล็อกไปยังส่วน head

    วางลงในส่วน `<head>` ของเทมเพลตหน้าเว็บคุณ เหนือแท็กโซเชียลใด ๆ ที่คุณมีอยู่แล้ว

แท็กที่เครื่องมือนี้สร้างขึ้น

<meta property="og:type" content="article">
<meta property="og:title" content="Your page title">
<meta property="og:description" content="A one-line description.">
<meta property="og:url" content="https://example.com/post/123">
<meta property="og:image" content="https://example.com/og-image.jpg">

นั่นคือผลลัพธ์ทั้งหมด og:type จะถูกเขียนเสมอ ส่วน og:title, og:description, og:url และ og:image จะถูกเพิ่มเฉพาะเมื่อคุณกรอกเท่านั้น พรอเพอร์ตีทั้งห้านี้เป็นสิ่งแรกที่ Facebook, LinkedIn, Slack, Discord, WhatsApp และ X อ่าน จึงครอบคลุมกรณีทั่วไป

เครื่องมือนี้ไม่เขียนแท็กการ์ด twitter:, og:image:width / og:image:height, og:site_name, og:locale หรือแท็ก article: หากคุณต้องการ ให้เพิ่มด้วยตนเองข้างบล็อกที่สร้างขึ้น

ค่า og:type ที่สำคัญ

ประเภท เมื่อใดควรใช้
website หน้าหลัก หน้า landing เนื้อหาแบบคงที่
article โพสต์บล็อก ข่าว หน้าบรรณาธิการ
product หน้ารายละเอียดสินค้าอีคอมเมิร์ซ
video.other เนื้อหาวิดีโอและการฝัง
profile หน้าโปรไฟล์ผู้เขียนหรือผู้ใช้
music.song หน้าเพลงแต่ละเพลง

แท็กที่ควรเพิ่มด้วยตนเอง

แท็ก หน้าที่ ค่าตัวอย่าง
og:site_name ชื่อของเว็บไซต์โดยรวม Example
og:locale ภาษาและภูมิภาคของหน้า en_US
og:image:width ช่วยให้ scraper จัดวางการ์ดได้เร็วขึ้น 1200
og:image:height ช่วยให้ scraper จัดวางการ์ดได้เร็วขึ้น 630
twitter:card รูปแบบการ์ดบน X summary_large_image

X จะกลับไปใช้แท็ก og: เมื่อไม่มีแท็ก twitter: ดังนั้นหน้าที่มีเพียงพรอเพอร์ตีที่สร้างขึ้นทั้งห้าตัวก็ยังแสดงตัวอย่างได้ถูกต้องที่นั่นเช่นกัน เพิ่มแท็ก twitter: เฉพาะเมื่อคุณต้องการชื่อเรื่อง คำอธิบาย หรือรูปภาพที่แตกต่างบน X โดยเฉพาะ

ข้อผิดพลาดทั่วไปที่เครื่องมือนี้ช่วยให้คุณหลีกเลี่ยง

  • name แทนที่จะเป็น property พรอเพอร์ตีของ Open Graph อยู่ใน property="og:..." เครื่องมือนี้เขียนแอตทริบิวต์ที่ถูกต้องเสมอ
  • เครื่องหมายคำพูดและ & ที่ไม่ได้ escape อักขระ " หรือ & ดิบในชื่อเรื่องของคุณจะทำให้แท็กเสีย เครื่องมือนี้ escape ให้คุณ
  • URL รูปภาพแบบสัมพัทธ์ โซเชียล scraper รับเฉพาะ URL แบบสัมบูรณ์ ให้วางที่อยู่ https:// แบบเต็มของรูปภาพ เพราะเครื่องมือนี้ไม่ได้เติมโดเมนของคุณให้
  • ขนาดรูปภาพที่ผิด 1200 × 630 พิกเซล คือขนาดที่ปลอดภัยสากล หากต่ำกว่า 200 × 200 พิกเซล รูปภาพมักถูกปฏิเสธ

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

ในส่วน <head> ของ HTML คุณ ไว้ด้านบนสุด ควรอยู่ใกล้ <title> scraper จะอ่านส่วน head และมักหยุดก่อนกำหนด ดังนั้นการวางแท็ก OG ไว้ใกล้ด้านบนจึงช่วยไม่ให้มันถูกมองข้ามบนหน้าที่ใหญ่มาก

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

1200 × 630 พิกเซล แบบ JPG หรือ PNG คือขนาดที่ปลอดภัยสากล ใช้ได้บน Facebook, LinkedIn, การ์ดขนาดใหญ่ของ X, Slack, Discord และ iMessage สิ่งใดที่เล็กกว่า 200 × 200 พิกเซล เสี่ยงที่จะถูกปฏิเสธโดยสิ้นเชิง

ให้แต่ละเวอร์ชันภาษามีหน้าของตัวเองพร้อมแท็ก og: ของตัวเอง และเพิ่ม og:locale (เช่น en_US) พร้อมกับ og:locale:alternate สำหรับเวอร์ชันอื่น ๆ ด้วยตนเอง เครื่องมือนี้ไม่ได้เขียนแท็ก locale ให้คุณ

เครื่องมือที่เกี่ยวข้อง

เครื่องดึงลิงก์ภายนอก

วางโค้ด HTML ดิบ และระบุ URL ฐานได้ตามต้องการ จากนั้นรับรายการลิงก์ภายนอก http/https ทั้งหมดในโค้ดแบบไม่มีรายการซ้ำ เพื่อใช้ตรวจสอบลิงก์และประเมินผล SEO

เครื่องมือตรวจสอบความยาวของคำอธิบายเมตา

วัดคำอธิบายเมตาเป็นจำนวนอักขระและพิกเซลโดยประมาณ เปรียบเทียบแนวทางการเรียบเรียง และดูตัวอย่างการจัดวางบนเดสก์ท็อปกับมือถือ

เครื่องมือสร้างสเกมาสำหรับคำถามบ่อย (FAQ Schema Generator)

สร้างมาร์กอัป JSON-LD แบบ FAQPage จากคู่คำถามและคำตอบ เพื่อให้หน้าเว็บของคุณเข้าเกณฑ์ผลการค้นหาแบบสมบูรณ์ (rich results) และกล่องคำตอบของ Google

เครื่องมือตรวจสอบเฮดเดอร์ความปลอดภัย HTTP

วาง HTTP response headers แล้วตรวจ HSTS, CSP, clickjacking, MIME, referrer และนโยบาย cross-origin ภายในเบราว์เซอร์

ตัวจำลองผลการค้นหา Google

ดูตัวอย่างผลค้นหาแบบ Google โดยประมาณด้วยขีดจำกัดจำนวนอักขระสำหรับมือถือและเดสก์ท็อป ร่างของคุณอยู่ในเซสชันเบราว์เซอร์นี้เท่านั้น

ตัวตรวจสอบ URL ตามรูปแบบบัญญัติ

วาง HTML ของหน้าเว็บและตรวจสอบแท็ก rel=canonical: มีหรือไม่, เป็น URL แบบสัมบูรณ์ที่ถูกต้องหรือไม่, ตรงกับ URL ของหน้าหรือไม่

เครื่องมือนี้มีให้บริการในภาษาอื่น