Blog
April 2, 2026

Open Graph Tags คืออะไร? คู่มือเกี่ยวกับการแสดงตัวอย่างลิงก์และการแชร์บนโซเชียลมีเดีย

เมื่อคุณแชร์ลิงก์บน Facebook, LinkedIn, Slack หรือ Twitter มักจะปรากฏการ์ดแสดงตัวอย่าง — พร้อมชื่อเรื่อง คำอธิบาย และรูปภาพ การแสดงตัวอย่างเหล่านี้ไม่ใช่เรื่องวิเศษ พวกมันถูกควบคุมโดย Open Graph (OG) tags ในหน้า HTML ของคุณ

การตั้งค่า Open Graph tags ให้ถูกต้องหมายความว่าลิงก์ที่แชร์ของคุณมีลักษณะเป็นมืออาชีพและได้รับการคลิกมากขึ้น การตั้งค่าผิดหมายความว่ามีการแสดงตัวอย่างที่ไม่น่าเห็น รูปภาพที่หายไป หรือข้อความทั่วไป

Open Graph Protocol คืออะไร?

Open Graph เป็นโปรโตคอลที่สร้างโดย Facebook ในปี 2010 ซึ่งช่วยให้เวบเพจสามารถกำหนดวิธีการปรากฏบนแพลตฟอร์มโซเชียล โดยใช้เมตาแท็กในส่วน HTML <head>:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short summary of the page" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />

เมื่อแพลตฟอร์มโซเชียลตรวจพบ URL ที่แชร์ มันจะดึงหน้าและอ่านแท็กเหล่านี้เพื่อสร้างการ์ดแสดงตัวอย่าง

Open Graph Tags ที่จำเป็น

og:title

ชื่อเรื่องที่แสดงในการ์ดแสดงตัวอย่าง เก็บไว้ต่ำกว่า 60 อักขระเพื่อการแสดงผลที่ดีที่สุดบนแพลตฟอร์มต่างๆ

<meta property="og:title" content="How to Create Branded Short Links" />

เคล็ดลับ:

  • อย่าเพียงแค่คัดลอกแท็ก <title> ของคุณ — ปรับปรุงให้เหมาะสมกับการมีส่วนร่วมบนโซเชียลมีเดีย
  • นำเสนอคำสำคัญไปข้างหน้า
  • หลีกเลี่ยง clickbait (แพลตฟอร์มอาจลงโทษ)

og:description

สรุปสั้น ๆ ที่แสดงด้านล่างชื่อเรื่อง เป้าหมายคือ 120-160 อักขระ

<meta property="og:description" content="Create custom branded short links with click tracking and analytics. Set up in 5 minutes." />

og:image

รูปภาพที่แสดงในการแสดงตัวอย่าง นี่คือแท็กที่มีผลกระทบมากที่สุด — โพสต์ที่มีรูปภาพได้รับการมีส่วนร่วมมากขึ้นอย่างมีนัยสำคัญ

<meta property="og:image" content="https://example.com/social-preview.jpg" />

ข้อกำหนดรูปภาพตามแพลตฟอร์ม:

แพลตฟอร์มขนาดที่แนะนำอัตราส่วนภาพ
Facebook1200 × 630 px1.91:1
Twitter1200 × 628 px1.91:1
LinkedIn1200 × 627 px1.91:1
Slack500 × 500 px ขั้นต่ำใด ๆ

ใช้ 1200 × 630 พิกเซลเพื่อครอบคลุมแพลตฟอร์มทั้งหมด

og:url

URL ที่ยอมรับได้สำหรับหน้า นี่บอกแพลตฟอร์มว่า URL ใดที่จะแสดงและช่วยป้องกันเนื้อหาซ้ำ

<meta property="og:url" content="https://example.com/page" />

og:type

อธิบายประเภทของเนื้อหา ค่าทั่วไป:

  • website — สำหรับหน้าแรกและหน้าทั่วไป
  • article — สำหรับโพสต์บล็อกและบทความ
  • product — สำหรับหน้าสินค้า

Twitter Card Tags

Twitter ใช้เมตาแท็กของตัวเอง (นอกเหนือจาก Open Graph) สำหรับการ์ดแสดงตัวอย่าง:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

หาก Twitter card tags ไม่มี Twitter จะกลับไปใช้ Open Graph tags ไซต์ส่วนใหญ่ตั้งค่าทั้งสองเพื่อควบคุมสูงสุด

วิธีแพลตฟอร์มโซเชียลดึงข้อมูล Open Graph

เมื่อคุณแชร์ URL:

  1. 1
    crawler ของแพลตฟอร์มเข้าชม URL
  2. 2
    มันอ่าน HTML <head> สำหรับ OG tags
  3. 3
    มันแคชข้อมูลการ์ดแสดงตัวอย่าง
  4. 4
    การแชร์ URL เดียวกันที่ตามมาจะใช้เวอร์ชันที่แคชไว้

สำคัญ: การเปลี่ยนแปลง OG tags ไม่ได้สะท้อนการเปลี่ยนแปลงทันที แพลตฟอร์มแคชอย่างก้าวร้าว ดังนั้นคุณอาจต้องล้างแคชด้วยตนเอง (ดูการแก้ปัญหาด้านล่าง)

การปรับแต่งการแสดงตัวอย่างลิงก์ด้วย Linkly

จะเกิดอะไรขึ้นหากคุณแชร์ URL ที่คุณไม่ควบคุม — หรือคุณต้องการการ์ดแสดงตัวอย่างต่างกันสำหรับบริบทต่างๆ?

ฟีเจอร์ custom social previews ของ Linkly ช่วยให้คุณแทนที่ข้อมูล Open Graph สำหรับลิงก์สั้นใด ๆ:

  • ตั้งค่าชื่อเรื่อง คำอธิบาย และรูปภาพที่กำหนดเอง
  • การแสดงตัวอย่างต่างกันสำหรับผู้ชมต่างกัน
  • ไม่จำเป็นต้องแก้ไข HTML ของหน้าปลายทาง
  • ใช้ได้กับ URL ใด ๆ แม้กระทั่งหน้าที่คุณไม่เป็นเจ้าของ

สิ่งนี้มีประโยชน์โดยเฉพาะเมื่อ:

  • แชร์เนื้อหาของบุคคลที่สามพร้อมแบรนด์ของคุณเอง
  • A/B ทดสอบการ์ดแสดงตัวอย่างต่างกันเพื่อดูว่าอันไหนได้รับการคลิกมากขึ้น
  • หน้าปลายทางมี OG tags ที่ไม่ดีหรือหายไป

การแก้ปัญหา Open Graph Tags

Facebook Sharing Debugger

เครื่องมือของ Facebook ช่วยให้คุณแสดงตัวอย่างและรีเฟรชข้อมูล OG ที่แคชไว้:

  1. 1
    ป้อน URL ของคุณ
  2. 2
    คลิก Debug
  3. 3
    ดูว่า Facebook อ่านจากหน้าของคุณเท่าไร
  4. 4
    คลิก Scrape Again เพื่อล้างแคช

Twitter Card Validator

ตัวตรวจสอบความถูกต้องของ Twitter แสดงลักษณะของการ์ดของคุณและเน้นปัญหาใด ๆ

LinkedIn Post Inspector

เครื่องมือของ LinkedIn แสดงตัวอย่างการ์ดลิงก์และรีเฟรชข้อมูลที่แคชไว้

เคล็ดลับทั่วไป

  • ตรวจสอบแหล่งที่มา: ดูแหล่งที่มาของหน้าและค้นหา og: เพื่อตรวจสอบว่ามีแท็กอยู่
  • ใช้ URL แบบสัมบูรณ์: URL รูปภาพต้องเป็นแบบสัมบูรณ์ (เริ่มต้นด้วย https://) ไม่ใช่สัมพัทธ์
  • ทดสอบหลังจากการเปลี่ยนแปลง: ล้างแคชของแพลตฟอร์มเสมอหลังจากอัปเดต OG tags
  • ตรวจสอบการเรนเดอร์ JavaScript: แพลตฟอร์มบางแพลตฟอร์มไม่สามารถเรียกใช้ JavaScript ได้ ดังนั้น OG tags จะต้องอยู่ในการตอบสนอง HTML เบื้องต้น

ข้อผิดพลาดทั่วไป

  1. 1
    ขาด og:image: โพสต์ที่ไม่มีรูปภาพได้รับการคลิกน้อยกว่า 2-3 เท่า
  2. 2
    รูปภาพเล็กเกินไป: ใช้อย่างน้อย 1200 × 630 พิกเซล
  3. 3
    อัตราส่วนภาพผิด: รูปภาพได้รับการครอบตัดอย่างไม่สวนทาง
  4. 4
    แคชที่ล้าสมัย: อัปเดต OG tags ของคุณแล้ว แต่ลืมล้างแคชของแพลตฟอร์ม
  5. 5
    แท็กซ้ำ: แท็ก OG หลายแท็กของประเภทเดียวกันทำให้เกิดพฤติกรรมที่คาดเดาไม่ได้
  6. 6
    รูปภาพ HTTP: ใช้ HTTPS สำหรับ URL รูปภาพ — แพลตฟอร์มบางแพลตฟอร์มปิดกั้นรูปภาพ HTTP
  7. 7
    URL สัมพัทธ์: ตัวเรียงข้อความของแพลตฟอร์มไม่สามารถแก้ไขเส้นทางสัมพัทธ์ได้

Open Graph สำหรับประเภทเนื้อหาต่างๆ

โพสต์บล็อก

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-02" />
<meta property="article:author" content="Your Name" />

สินค้า

<meta property="og:type" content="product" />
<meta property="product:price:amount" content="29.99" />
<meta property="product:price:currency" content="USD" />

วิดีโอ

<meta property="og:type" content="video.other" />
<meta property="og:video" content="https://example.com/video.mp4" />

สรุป

Open Graph tags เป็นการเพิ่มเล็กน้อยลงใน HTML ของคุณ แต่มีผลกระทบอย่างมากต่อลักษณะของเนื้อหาของคุณในทั้ง social web ได้ถูกต้อง — ด้วยชื่อเรื่อง คำอธิบาย และรูปภาพที่ถูกต้อง — จะเพิ่มอัตราการคลิกผ่านโดยตรงเมื่อลิงก์ของคุณแชร์

ต้องการการแสดงตัวอย่างลิงก์ที่กำหนดเองโดยไม่ต้องแก้ไข HTML? เริ่มต้นใช้งาน Linkly และปรับแต่งการ์ดแสดงตัวอย่างโซเชียลสำหรับลิงก์สั้นใด ๆ — ตั้งค่าชื่อเรื่อง คำอธิบาย และรูปภาพของคุณเอง

รับลิงก์สั้น 100 รายการและติดตามจำนวนคลิก 500 ครั้งต่อเดือนได้ฟรี

เริ่มต้นใช้งานฟรี

ไม่ต้องใช้บัตรเครดิต

ปริมาณงานมาก? ติดต่อทีมงานของเราได้เลย