ตั้งค่า Open Graph ให้ลิงก์ที่แชร์แสดงผลสวยงาม

เมื่อมีคนแชร์ลิงก์ของเว็บคุณ แพลตฟอร์มจะดึงรูปและข้อความมาแสดงเป็นการ์ดตัวอย่าง หากไม่ได้ตั้งค่าไว้ ระบบจะเดาเอาเองและมักได้รูปโลโก้เล็ก ๆ หรือรูปแรกในหน้าซึ่งอาจเป็นแบนเนอร์โฆษณา

การ์ดที่ดูดีมีผลโดยตรงต่ออัตราการคลิก คู่มือนี้ตั้งค่าให้ครบทั้ง Facebook LINE และ X พร้อมวิธีตรวจสอบและล้างแคชซึ่งเป็นปัญหาที่พบบ่อยที่สุด

สิ่งที่ต้องเตรียม

• สิทธิ์แก้ไขส่วน head ของเว็บ หรือปลั๊กอิน SEO
• รูปสำหรับการ์ดขนาด 1200 x 630 พิกเซล

ขั้นตอนที่ 1: แท็กพื้นฐานที่ต้องมี

<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/article/" />
<meta property="og:title" content="หัวข้อที่จะแสดงบนการ์ด" />
<meta property="og:description" content="คำอธิบายสั้น ๆ ที่ทำให้คนอยากคลิก ประมาณ 100-150 ตัวอักษร" />
<meta property="og:image" content="https://example.com/og/article.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="คำอธิบายรูปสำหรับผู้ใช้โปรแกรมอ่านหน้าจอ" />
<meta property="og:site_name" content="ชื่อเว็บไซต์" />
<meta property="og:locale" content="th_TH" />

ข้อกำหนดที่ต้องทำตาม

• og:url ต้องเป็น URL แบบเต็มและควรตรงกับ canonical
• og:image ต้องเป็น URL แบบเต็ม ไม่ใช่พาธสัมพัทธ์ และต้องเข้าถึงได้โดยไม่ต้องล็อกอิน
• ระบุ og:image:width และ og:image:height เสมอ ช่วยให้แพลตฟอร์มแสดงการ์ดได้ทันทีโดยไม่ต้องรอโหลดรูป

ขั้นตอนที่ 2: แท็กสำหรับ X

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="หัวข้อ" />
<meta name="twitter:description" content="คำอธิบาย" />
<meta name="twitter:image" content="https://example.com/og/article.jpg" />

ค่า summary_large_image คือแบบที่แสดงรูปใหญ่เต็มความกว้าง ซึ่งเหมาะกับเนื้อหาส่วนใหญ่ หากใช้ summary จะได้รูปเล็กด้านข้าง

หากไม่ใส่แท็กชุดนี้ X จะใช้ค่าจาก Open Graph แทน แต่ต้องใส่ twitter:card อย่างน้อยหนึ่งบรรทัดจึงจะได้รูปใหญ่

ขั้นตอนที่ 3: ขนาดและรูปแบบของรูป

• ขนาดที่แนะนำ 1200 x 630 พิกเซล ซึ่งเป็นอัตราส่วน 1.91:1 ใช้ได้ดีกับทุกแพลตฟอร์ม
• ขนาดไฟล์ ไม่ควรเกิน 1 MB ยิ่งเล็กยิ่งดีเพราะบางแพลตฟอร์มมีขีดจำกัด
• รูปแบบ ใช้ JPEG หรือ PNG หลีกเลี่ยง WebP เพราะบางแพลตฟอร์มยังไม่รองรับในการ์ด
• ข้อความบนรูป วางไว้กลางภาพ เพราะบางแพลตฟอร์มครอบตัดขอบเมื่อแสดงในบางมุมมอง

สร้างรูปด้วยคำสั่งสำหรับหน้าที่ไม่มีรูปประกอบ

convert -size 1200x630 xc:'#0e1130' \
  -fill white -pointsize 64 -gravity center \
  -annotate +0-40 'หัวข้อบทความ' \
  -fill '#9359f7' -pointsize 32 \
  -annotate +0+60 'ชื่อเว็บไซต์' \
  /var/www/example.com/og/article.jpg

ขั้นตอนที่ 4: ตั้งใน WordPress

ปลั๊กอิน SEO จัดการให้อยู่แล้ว ตรวจว่าไม่มีสองปลั๊กอินใส่ซ้ำ

curl -sL https://example.com/blog/article/ | grep -c 'og:title'

ผลควรเป็น 1 หากได้มากกว่านั้น Facebook จะเลือกอันแรกซึ่งอาจไม่ใช่อันที่คุณต้องการ

กำหนดรูปสำรองเมื่อบทความไม่มีรูปประจำเรื่อง

add_filter('wpseo_opengraph_image', function ($image) {
    if (!$image) return 'https://example.com/og/default.jpg';
    return $image;
});

ขั้นตอนที่ 5: ตรวจสอบด้วยเครื่องมือของแต่ละแพลตฟอร์ม

ตรวจจากฝั่งเซิร์ฟเวอร์ก่อน

curl -sL https://example.com/blog/article/ | grep -oP '<meta (property|name)="(og|twitter):[^>]+>'

ตรวจว่ารูปเข้าถึงได้จริง

curl -sI https://example.com/og/article.jpg | grep -E '^HTTP|content-type|content-length'

จากนั้นใช้เครื่องมือตรวจสอบของแต่ละแพลตฟอร์ม

• Facebook ใช้ Sharing Debugger ที่ developers.facebook.com/tools/debug
• X ใช้ Card Validator
• LINE ใช้การส่งลิงก์ให้ตัวเองในแชทเพื่อดูผลจริง

ขั้นตอนที่ 6: ล้างแคชเมื่อแก้แล้วยังแสดงของเก่า

นี่คือปัญหาที่พบบ่อยที่สุด ทุกแพลตฟอร์มเก็บข้อมูลไว้นานหลายวันถึงหลายสัปดาห์

Facebook เข้า Sharing Debugger ใส่ URL แล้วกด Scrape Again ระบบจะดึงข้อมูลใหม่ทันที

LINE ไม่มีเครื่องมือล้างแคชสาธารณะ วิธีที่ใช้ได้คือเพิ่มพารามิเตอร์ต่อท้าย URL เช่น ?v=2 ซึ่งทำให้ LINE มองว่าเป็น URL ใหม่

X ใช้ Card Validator ซึ่งจะดึงข้อมูลใหม่ให้เมื่อทดสอบ

เคล็ดลับ หากต้องเปลี่ยนรูปบ่อย ให้ใส่เลขเวอร์ชันในชื่อไฟล์ เช่น article-v2.jpg แทนการเขียนทับไฟล์เดิม ซึ่งเลี่ยงปัญหาแคชทั้งหมด

ขั้นตอนที่ 7: ตรวจว่าบอตเข้าถึงได้

บอตของแพลตฟอร์มต่างจากเบราว์เซอร์ หากเว็บมีระบบป้องกันบอตอาจถูกบล็อกโดยไม่รู้ตัว

# จำลองบอตของ Facebook
curl -sA 'facebookexternalhit/1.1' https://example.com/blog/article/ | grep og:title

# จำลองบอตของ LINE
curl -sA 'LINE-BOT' https://example.com/blog/article/ | grep og:image

ตรวจว่า robots.txt ไม่ได้บล็อกบอตเหล่านี้

curl -s https://example.com/robots.txt | grep -iE 'facebook|twitter|line'

หากเว็บอยู่หลัง Cloudflare ตรวจว่ากฎป้องกันบอตไม่ได้บล็อกบอตของแพลตฟอร์มโซเชียล

ขั้นตอนที่ 8: กรณีเฉพาะที่ควรตั้งเพิ่ม

บทความ

<meta property="article:published_time" content="2026-09-25T09:00:00+07:00" />
<meta property="article:modified_time" content="2026-09-25T14:30:00+07:00" />
<meta property="article:author" content="https://example.com/author/somchai/" />
<meta property="article:section" content="เทคโนโลยี" />

สินค้า

<meta property="og:type" content="product" />
<meta property="product:price:amount" content="1290" />
<meta property="product:price:currency" content="THB" />
<meta property="product:availability" content="in stock" />

วิดีโอ

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

ปัญหาที่พบบ่อย

รูปไม่แสดงเลย

ไล่ตรวจตามลำดับ URL ของรูปเป็นแบบเต็ม รูปเข้าถึงได้โดยไม่ต้องล็อกอิน ขนาดไฟล์ไม่เกินขีดจำกัด และรูปแบบไฟล์เป็น JPEG หรือ PNG

แสดงรูปผิดอันที่ไม่ได้ตั้งไว้

มี og:image หลายบรรทัด ตรวจด้วยคำสั่งในขั้นตอนที่ 4 แพลตฟอร์มจะเลือกอันแรกที่พบ

ข้อความภาษาไทยเป็นอักขระแปลก

ตรวจว่าหน้าเว็บประกาศ <meta charset="UTF-8"> ไว้ก่อนแท็ก Open Graph และเซิร์ฟเวอร์ส่ง header ที่ถูกต้อง

curl -sI https://example.com | grep -i content-type

การ์ดแสดงข้อมูลของหน้าแรกแทนหน้าที่แชร์

og:url ชี้ไปหน้าแรก ตรวจการตั้งค่าของปลั๊กอินหรือธีมว่าไม่ได้ตั้งค่าตายตัวไว้

ต้องการให้ทีมงานช่วยตรวจสอบการแสดงผลของเว็บบนโซเชียล ติดต่อ THAI DATA CLOUD ได้ที่ https://thaidata.cloud/contact/