Go Toolstack

ตัวอย่างแท็ก Meta & Open Graph

ดูตัวอย่างการแชร์บนโซเชียลมีเดียแบบเรียลไทม์สำหรับ Google, Facebook, Twitter/X และ LinkedIn

ตัวอย่างแท็ก Meta & Open Graph

ดูตัวอย่างการแชร์บนโซเชียลมีเดียแบบเรียลไทม์สำหรับ Google, Facebook, Twitter/X และ LinkedIn

วิธีการทำงาน

1
Enter Query Details
Specify the parameters, location, or query data you want to look up.
2
Fetch or Validate Data
Retrieve or validate information securely within your session.
3
Inspect Detailed Results
Review schedules, reference figures, or comprehensive data tables.

Discover more client side utilities in this category

ศูนย์เครื่องมือนักพัฒนา • เวิร์กโฟลว์และคู่มือเปรียบเทียบ

สำรวจเครื่องมือเครื่องมือนักพัฒนาทั้งหมด ขีดจำกัดของเบราว์เซอร์ และคู่มือการเลือกเครื่องมือ

สำรวจศูนย์ →
จัดรูปแบบ ตรวจสอบ และทำความสะอาด JSON

จัดรูปแบบ บีบอัด และตรวจสอบข้อมูล JSON ด้วยความแม่นยำ 64-bit และกฎ JSON Schema (Draft-07 / 2020-12)
เข้ารหัสและถอดรหัส Base64

แปลงข้อความและข้อมูลระหว่างข้อความธรรมดากับ Base64 รองรับ UTF-8 ภาษาไทย และรูปแบบ URL-Safe
จัดรูปแบบ SQL

จัดรูปแบบแบบสอบถาม SQL ปรับเยื้องและจัดระเบียบคำสั่ง รองรับหลายไดอะเลกต์

คู่มือบล็อกที่เกี่ยวข้อง

คู่มือทางเทคนิค การแก้ไขปัญหา และขั้นตอนการปฏิบัติที่ดีที่สุด

เครื่องมือนักพัฒนา • ~4 นาทีในการอ่าน

ข้อผิดพลาดไวยากรณ์ JSON ที่พบบ่อย: การตรวจสอบโครงสร้าง คอมมาเกิน และตัวเลข 64-bit | GoToolstack

ทำความเข้าใจข้อผิดพลาดไวยากรณ์ JSON ตามมาตรฐาน RFC 8259 วิธีแก้ไขคอมมาตัวสุดท้าย (Trailing Comma) การใช้เครื่องหมายคำพูดเดี่ยว และการจัดการตัวเลขความแม่นยำสูง 64-bit BigInt

อ่านคู่มือ →
เครื่องมือนักพัฒนา • ~4 นาทีในการอ่าน

ทำไมไฟล์ CSV เปิดใน Excel แล้วสระภาษาไทยเพี้ยนและเลข 0 หาย? วิธีแก้ปัญหา BOM และตัวคั่น | GoToolstack

เจาะลึกสาเหตุที่ไฟล์ CSV แสดงภาษาไทยเพี้ยนใน Microsoft Excel ปัญหาการขาด UTF-8 BOM ตัวคั่นจุลภาคเทียบกับเซมิโคลอน และวิธีป้องกันไม่ให้เลข 0 นำหน้าในรหัสสินค้าหรือเบอร์โทรศัพท์สูญหาย

อ่านคู่มือ →
ศูนย์ความรู้และแนวคิด

เครื่องมือสร้าง Meta Tags สำหรับ SEO รวบรวมแท็ก Open Graph และ Twitter Card

การที่เว็บไซต์จะแสดงผลได้อย่างสวยงามบนผลการค้นหาของ Google และบนโซเชียลมีเดีย เช่น Facebook, LINE, X (Twitter), และ LinkedIn จำเป็นต้องติดตั้ง Meta Tags พื้นฐานและโปรโตคอล Open Graph ไว้อย่างถูกต้องในส่วนหัว <head> ของหน้าเว็บ

เครื่องมือนี้ช่วยให้คุณกรอกข้อมูลชื่อหน้าเว็บ (Title), คำอธิบาย (Description), ภาพตัวอย่างพรีวิว (OG Image), และ URL เพื่อสร้างชุดโค้ดแท็ก HTML พร้อมพรีวิวตัวอย่างการแสดงผลเสมือนจริงบนโซเชียลมีเดีย คัดลอกไปวางในโปรเจกต์เว็บได้ทันที ประมวลผลในเบราว์เซอร์ 100%

สูตรและหลักการทางเทคนิค

การรวบรวม Head Tags = <title> + <meta description> + <link canonical> + <meta property="og:*"> + <meta name="twitter:*">

รวมแท็ก HTML SEO หลักเข้ากับสคีมาของโปรโตคอล Open Graph และ Twitter Card พร้อมจัดการอักขระหลีกสำหรับเครื่องหมายคำพูดอย่างปลอดภัย

ข้อแนะนำและวิธีปฏิบัติที่ถูกต้อง

  • จำกัดความยาวของ Title Tag ให้อยู่ระหว่าง 50-60 ตัวอักษร: ความยาวที่เหมาะสมช่วยป้องกันไม่ให้ชื่อหัวข้อถูกตัดทอน (Truncate) บนหน้าแสดงผลการค้นหาของ Google
  • เขียน Meta Description ให้กระชับในความยาว 120-155 ตัวอักษร: คำอธิบายที่มีเนื้อหาชัดเจนและมี Call-to-Action จะช่วยดึงดูดผู้ใช้ให้คลิกเข้าชมเว็บไซต์มากขึ้น (เพิ่ม CTR)
  • ใช้ขนาดภาพ Open Graph Image อัตราส่วน 1.91:1 (1200×630 px): ขนาด 1200×630 พิกเซลเป็นมาตรฐานสากลที่ทำให้ภาพพรีวิวคมชัดและไม่ถูกตัดขอบทั้งบน Facebook, LinkedIn, และ X
  • ระบุ Canonical URL เป็น Absolute URL เสมอ: ใส่ลิงก์แบบเต็มพร้อม https:// เพื่อป้องกันปัญหาเนื้อหาซ้ำซ้อน (Duplicate Content) จากการเข้าชมผ่านโดเมนย่อยหรือพารามิเตอร์ URL

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

Open Graph (og:*) มีความสำคัญอย่างไรต่อเว็บไซต์?
Open Graph เป็นโปรโตคอลที่พัฒนาโดย Facebook เพื่อให้แพลตฟอร์มโซเชียลมีเดียและแอปแชต (เช่น LINE หรือ Messenger) สามารถดึงชื่อ รูปภาพ และคำอธิบายไปแสดงเป็นการ์ดพรีวิวที่สวยงามเมื่อมีคนแชร์ลิงก์
เหตุใดภาพพรีวิวบน Facebook หรือ LINE จึงไม่อัปเดตเมื่อเปลี่ยนแท็กแล้ว?
เพราะแพลตฟอร์มโซเชียลมีการแคชข้อมูลพรีวิวไว้ สามารถใช้เครื่องมือ Facebook Sharing Debugger เพื่อสั่งล้างแคชและดึงข้อมูลใหม่ได้
Twitter Card และ Open Graph สามารถใช้ร่วมกันได้หรือไม่?
สามารถใช้ร่วมกันได้ และควรติดตั้งทั้งสองมาตรฐาน โดย X (Twitter) จะดึงข้อมูลจากแท็ก twitter:* เป็นอันดับแรก และจะใช้ค่าจาก og:* เป็นค่าสำรองหากไม่มีการระบุไว้
ข้อมูลหรือรูปภาพที่ใส่ในเครื่องมือจะถูกเก็บไว้ที่ใดหรือไม่?
ไม่มีการจัดเก็บ โค้ด HTML ทั้งหมดถูกสร้างขึ้นในหน่วยความจำของเบราว์เซอร์บนเครื่องของคุณเท่านั้น