คุณปล่อยหน้าเว็บออกไป แชร์ลิงก์ — แล้วตัวอย่างลิงก์กลับแสดงรูปผิด หรือไม่แสดงอะไรเลย ปัญหา OG image เกือบทั้งหมดมาจากสามสาเหตุ: แท็กหายไป URL รูปเสีย หรือแคชค้างเก่า คู่มือนี้จะพาคุณดูวิธีพรีวิว OG image ก่อนแชร์ และวิธีแก้แต่ละปัญหาเมื่อมันเกิดขึ้น
เช็กแท็กก่อนเป็นอันดับแรก
ก่อนหยิบเครื่องมือใด ๆ ให้เปิดดูซอร์สของหน้าเว็บ (Ctrl+U / Cmd+U) แล้วยืนยันว่ามีแท็กเหล่านี้อยู่ใน <head>:
<meta property="og:title" content="Launch day: v2.0" />
<meta property="og:description" content="Everything new in this release." />
<meta property="og:image" content="https://example.com/og/launch.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />กฎสองข้อนี้จับบั๊กส่วนใหญ่ได้ทันที:
og:imageต้องเป็น URL แบบ absolute ที่เป็น HTTPS path แบบ relative (/og/launch.png) ใช้ไม่ได้กับ crawler ส่วนใหญ่- URL ของรูปต้องเข้าถึงได้แบบสาธารณะ — ลองเปิดในหน้าต่างไม่ระบุตัวตน ถ้าต้องล็อกอิน มีการ redirect หรือขึ้น 404 ก็ไม่มีแพลตฟอร์มไหนดึงรูปได้
ถ้ายังไม่แน่ใจด้วยซ้ำว่ารูปของคุณมีขนาดถูกต้องไหม เริ่มจากคู่มือขนาด OG image ของเราก่อน — ขนาดคืออีกครึ่งหนึ่งของตัวอย่างลิงก์ที่ทำงานได้
เครื่องมือพรีวิวแยกตามแพลตฟอร์ม
แพลตฟอร์มหลักแต่ละเจ้ามี debugger อย่างเป็นทางการที่แสดงสิ่งที่ crawler ของตัวเองเห็นแบบเป๊ะ ๆ:
| แพลตฟอร์ม | เครื่องมือ | ทำอะไร |
|---|---|---|
| Sharing Debugger | แสดงการ์ดที่ scrape มา แจ้งรายการคำเตือน และมีปุ่ม "Scrape Again" | |
| Post Inspector | เรนเดอร์ตัวอย่างลิงก์ และรีเฟรชแคชของ LinkedIn ทุกครั้งที่ตรวจสอบ | |
| X (Twitter) | เขียนโพสต์แบบร่าง | X เลิกให้บริการพรีวิวของ Card Validator แบบแยกแล้ว — วางลิงก์ในโพสต์ร่าง (หรือ DM หาตัวเอง) เพื่อดูการ์ดจริง |
| Slack | ส่งข้อความหาตัวเอง | Slack แสดงตัวอย่างลิงก์แบบเรียลไทม์ การ DM หาตัวเองคือวิธีพรีวิว OG ที่เร็วที่สุด |
| Discord | วางลิงก์ในช่องไหนก็ได้ | Embed เรนเดอร์ทันทีจาก Open Graph tag ของคุณ |
| WhatsApp / Telegram | ส่งเข้า "Saved messages" / หาตัวเอง | ทั้งคู่อ่าน og:image ส่วน Telegram แคชหนักมาก (ดูด้านล่าง) |
เวิร์กโฟลว์ที่ใช้ได้จริง: แก้แท็ก → รัน Facebook Sharing Debugger (มีคำเตือนละเอียดที่สุด) → แล้วเช็กเฉพาะแพลตฟอร์มที่คุณสนใจจริง ๆ
การบังคับรีเฟรชแคช
แพลตฟอร์มแคชตัวอย่างลิงก์ไว้นานมาก — บางครั้งเป็นสัปดาห์ ถ้าคุณอัปเดต OG image แล้วแต่ยังเห็นรูปเก่าอยู่:
- Facebook: เปิด Sharing Debugger แล้วคลิก Scrape Again
- LinkedIn: เอา URL ไปรันใน Post Inspector — ตัวการตรวจสอบเองนั่นแหละที่ล้างแคชให้
- X: ไม่มีวิธีรีเฟรชด้วยตัวเอง แคชมักหมดอายุเองภายในราวหนึ่งสัปดาห์
- Telegram: ส่ง URL ของคุณให้
@WebpageBotเพื่อบังคับให้ crawl ใหม่ - ทางออกที่ใช้ได้กับทุกที่: เปลี่ยน URL ของรูป การต่อท้ายด้วย query บอกเวอร์ชัน (
/og/launch.png?v=2) — หรือดีกว่านั้นคือใช้ชื่อไฟล์แบบ content hash — จะทำให้ทุกแพลตฟอร์มมองว่าเป็นรูปใหม่เอี่ยมทันที
ถ้า OG image ของคุณถูกสร้างโดยไปป์ไลน์ ให้ฝังเวอร์ชันหรือแฮชไว้ในชื่อไฟล์ตั้งแต่วันแรก แล้วปัญหาแคชค้างจะหมดไปโดยสิ้นเชิง
ทำไม OG image ถึงยังไม่แสดงอยู่ดี
รัน debugger หมดแล้ว รูปก็ยังหาย? ไล่เช็กตามรายการนี้:
- รูปใหญ่เกินไปหรือโหลดช้าเกินไป crawler จะหมดเวลารอกับไฟล์ขนาดหลายเมกะไบต์ รักษาให้ต่ำกว่า 1 MB (และต่ำกว่า 300 KB มากสำหรับ WhatsApp)
- ขนาดรูปต่ำกว่าเกณฑ์การ์ดใหญ่ ถ้าเล็กกว่า 600×315 Facebook จะถอยไปใช้ภาพขนาดย่อเล็ก ๆ ให้ส่งออกที่ 1200×630 — คู่มือขนาด มีรายละเอียดครบ
- หน้าเว็บของคุณบล็อก crawler ตรวจว่า
robots.txtไฟร์วอลล์ หรือชั้นป้องกันบอตไม่ได้ตอบ 403 ให้facebookexternalhit,TwitterbotหรือLinkedInBot - แท็กถูกใส่จากฝั่ง client crawler โซเชียลส่วนใหญ่ไม่รัน JavaScript แท็ก OG ต้องอยู่ใน HTML ที่เรนเดอร์จากเซิร์ฟเวอร์
- แท็ก
og:imageหลายอันขัดกันเอง แพลตฟอร์มมักใช้อันแรก — ลบแท็กตกค้างจากเทมเพลตหรือปลั๊กอินออก
พรีวิวก่อนเผยแพร่ ไม่ใช่หลังเผยแพร่
debugger ข้างบนบอกคุณว่าอะไรพังก็ต่อเมื่อมันพังไปแล้ว นิสัยที่ประหยัดกว่าคือทำรูปให้ถูกตั้งแต่ก่อนปล่อยของ เครื่องมือสร้าง OG image ฟรี ของเราแสดงพรีวิวสดที่ขนาด 1200×630 เป๊ะ ๆ ระหว่างที่คุณแก้ไข — สิ่งที่เห็นในตัวแก้ไขคือหน้าตาการ์ดจริงแบบพิกเซลต่อพิกเซล — และส่งออก PNG ที่ปรับให้เหมาะสมซึ่งผ่านทุกข้อตรวจสอบในบทความนี้ ไม่ต้องสมัครสมาชิก ไม่มีลายน้ำ
คำถามที่พบบ่อย
จะพรีวิว OG image โดยไม่ต้องโพสต์ได้อย่างไร?
ใช้ Facebook Sharing Debugger หรือ LinkedIn Post Inspector เพื่อดูการเรนเดอร์อย่างเป็นทางการ หรือส่งลิงก์หาตัวเองใน Slack, Discord หรือ WhatsApp — ข้อความที่ส่งหาตัวเองแสดงตัวอย่างลิงก์เหมือนการแชร์สาธารณะทุกประการ
แคชของ OG image อยู่นานแค่ไหน?
แล้วแต่แพลตฟอร์ม: Facebook แคชจนกว่าคุณจะบังคับ scrape ใหม่ LinkedIn รีเฟรชผ่าน Post Inspector ส่วน X หมดอายุเองภายในราวหนึ่งสัปดาห์ การเปลี่ยน URL ของรูป (?v=2 หรือตั้งชื่อไฟล์ใหม่) ข้ามได้ทุกแคชในครั้งเดียว
ทำไม OG image ขึ้นบน Facebook แต่ไม่ขึ้นบน WhatsApp?
เกือบทั้งหมดเป็นเรื่องขนาดไฟล์ WhatsApp จะยอมแพ้กับรูปที่หนักเกินไป — บีบอัด PNG ของคุณหรือเสิร์ฟรูปเวอร์ชันที่เล็กกว่า และรักษาให้ต่ำกว่า 300 KB มาก ๆ
แท็ก OG ทำงานบนหน้าที่เรนเดอร์ด้วย JavaScript ไหม?
ทำงานเฉพาะเมื่อแท็กอยู่ในการตอบกลับแรกจากเซิร์ฟเวอร์เท่านั้น โดยทั่วไป crawler โซเชียลไม่รัน JavaScript ดังนั้น meta tag ที่ถูกใส่จากฝั่ง client จึงล่องหนสำหรับพวกมัน
