ลิงก์พรีวิว WhatsApp ไม่แสดง? แก้ไขที่ og:image
การที่ลิงก์พรีวิว WhatsApp ไม่แสดงนั้นเกือบทั้งหมดมาจากสาเหตุหนึ่งในห้าข้อ: หน้าเว็บไม่มีแท็ก og:image, URL ของรูปภาพไม่สามารถเข้าถึงได้จากภายนอก, รูปภาพมีขนาดสัดส่วนไม่ถูกต้องทำให้ WhatsApp ตัดทิ้ง, การครอบตัดถูกต้องแต่พรีวิวเก่าเกินไป, หรือปลั๊กอิน SEO ของร้านค้ากำลังแสดงแท็กที่ขัดแย้งกัน คู่มือนี้ครอบคลุมแต่ละสาเหตุ เหตุใดคุณจึงไม่สามารถบังคับให้ WhatsApp รีเฟรชได้ และสิ่งที่ต้องแก้ไขบนร้านค้า WooCommerce
คำตอบสั้น ๆ
WhatsApp สร้างตัวอย่างลิงก์ (link preview) จากแท็ก Open Graph ของหน้าเว็บ หาก og:image หายไป ไม่สามารถเข้าถึงได้ หรือไม่ได้มีรูปแบบเป็นการ์ดขนาด 1200×630 ลิงก์ที่แชร์จะปรากฏเป็นลิงก์เปล่า ไทล์สีเทา หรือรูปภาพสินค้าที่ถูกครอบตัดไม่ถูกต้อง ร้านค้า WooCommerce ส่วนใหญ่ไม่เคยตั้งค่า og:image สำหรับหน้าสินค้าเลย — ปลั๊กอิน SEO จะใช้รูปภาพเด่นแบบคงที่เป็นค่าเริ่มต้น และรูปสินค้าที่เป็นสี่เหลี่ยมจัตุรัสหรือแนวตั้งจะถูกตัดด้านข้างหรือด้านบนออก
1. ไม่มีแท็ก og:image บนหน้าเพจ
นี่คือสาเหตุที่พบบ่อยที่สุดในร้านค้า WordPress และ WooCommerce ไม่ได้สร้าง og:image สำหรับหน้าสินค้า หมวดหมู่ หรือหน้าร้านค้าโดยค่าเริ่มต้น และธีมที่ไม่รองรับ Open Graph จะทำให้แท็กนี้หายไปทั้งหมด
วิธีแก้ไข: ดูซอร์สโค้ดของหน้าเพจและยืนยันว่าแท็ก og:image มีอยู่ เป็น URL แบบสัมบูรณ์ (เต็มรูปแบบ https://… ไม่ใช่พาธแบบสัมพัทธ์) และถูกเรนเดอร์จากฝั่งเซิร์ฟเวอร์ — ไม่ใช่ถูกแทรกด้วย JavaScript หลังโหลดเพจ WhatsApp ไม่ได้รัน JavaScript ของคุณ
curl -s https://your-store.com/product/example | grep -i 'og:image'
ผลลัพธ์ที่ว่างเปล่าคือคำตอบของคุณ: WhatsApp ไม่มีรูปภาพที่จะแสดง
2. URL ของรูปภาพไม่สามารถเข้าถึงได้แบบสาธารณะ
ครอว์เลอร์ของ WhatsApp ดึงรูปภาพในลักษณะเดียวกับไคลเอนต์ที่ไม่ระบุตัวตนทั่วไป URL ที่อยู่หลังระบบเข้าสู่ระบบ บน localhost บนที่อยู่ IP ดิบ หรือบนพาธที่ถูกบล็อกโดย robots.txt จะล้มเหลว
วิธีแก้ไข: ยืนยันว่า URL ส่งคืนรูปภาพโดยไม่ต้องใช้ข้อมูลประจำตัว
curl -I https://your-store.com/wp-content/uploads/product.jpg
คุณต้องการ 200 OK และ Content-Type ของ image/png หรือ image/jpeg
กับดัก robots.txt ครอว์เลอร์ของโซเชียลให้เกียรติ robots.txt ดังนั้นกฎที่บล็อกพาธซึ่งเก็บรูปภาพของคุณจะทำลายพรีวิว และมันทำลายในลักษณะที่วินิจฉัยผิดพลาดได้ง่าย ดีบักเกอร์ของ Meta จะรายงานว่า "ไม่สามารถประมวลผลเป็นรูปภาพได้ อาจเสียหายหรือมีรูปแบบไม่ถูกต้อง" ซึ่งอ่านแล้วเหมือนกับเรนเดอร์ที่เสียหายพอดี curl ไม่เคยจำลองปัญหานี้ได้ เพราะ curl ไม่สนใจ robots.txt หากรูปภาพของคุณถูกเสิร์ฟจากพาธที่ครอบคลุมโดยกฎ Disallow: พรีวิวจะล้มเหลวไม่ว่ารูปภาพจะถูกต้องเพียงใดก็ตาม เราพบปัญหานี้ด้วยตัวเองบนพาธการเรนเดอร์ของ FastOG และแก้ไขด้วยการแทนที่ Allow: แบบ longest-match
3. WhatsApp ตัดภาพสินค้าของคุณ — และการแก้ไขภาพถ่ายจะไม่ช่วยให้หาย
นี่คืออาการที่ผู้ค้าอธิบายว่า "ภาพสินค้าของฉันถูกตัดบน WhatsApp" และเป็นปัญหาที่ควรทำความเข้าใจอย่างถ่องแท้
แพลตฟอร์มจะตัดภาพที่ได้รับให้อยู่ในกรอบ 1200×630 เสมอ ภาพสินค้าที่เป็นสี่เหลี่ยมจัตุรัสหรือแนวตั้งจะถูกตัดด้านข้างหรือด้านบนออก ส่วนโลโก้จะถูกยืดให้ผิดสัดส่วน การครอปภาพต้นฉบับใน Photoshop ด้วยมือเป็นวิธีที่ไม่ได้ผล เพราะ WhatsApp ตัดภาพตามอัตราส่วนของคาร์ด (card) ไม่ใช่ตามองค์ประกอบที่คุณเลือก — และภาพสินค้าชิ้นถัดไปก็มีรูปทรงที่ต่างออกไปอีก
วิธีแก้คือเปลี่ยนภาพที่คุณส่งออกไป ไม่ใช่ภาพถ่ายที่คุณเป็นเจ้าของ ส่งคาร์ดที่ จัดองค์ประกอบไว้แล้ว ที่ขนาด 1200×630 โดยใส่ภาพสินค้าไว้ภายในคาร์ดนั้น แพลตฟอร์มก็จะไม่มีอะไรให้ตัดอีกต่อไป
4. ขนาดภาพตัวอย่างลิงก์ WhatsApp ที่ถูกต้อง
ขนาดมาตรฐานของ Open Graph image คือ 1200×630 พิกเซล — อัตราส่วน 1.91:1 — ซึ่งเป็นรูปแบบที่ทุกแพลตฟอร์มหลัก รวมถึง WhatsApp คาดหวัง หากใช้ขนาด 1200×630 ตัวอย่างจะแสดงผลตามที่ตั้งใจไว้ แต่หากใช้ภาพสี่เหลี่ยมจัตุรัสขนาด 1000×1000 WhatsApp จะครอบตัดภาพเพื่อให้เต็มกรอบ
เก็บไฟล์ให้ต่ำกว่า 5 MB การ์ดข้อความและผลิตภัณฑ์ขนาด 1200×630 โดยทั่วไปจะมีขนาดระหว่าง 200 KB ถึง 500 KB ในรูปแบบ PNG
ดู OG Image Size: 1200×630 Explained เพื่อทราบว่าทำไมอัตราส่วนดังกล่าวจึงกลายเป็นมาตรฐาน
5. ตัวอย่างพรีวิวล้าสมัย — และคุณไม่สามารถบังคับให้ WhatsApp รีเฟรชได้
หากแท็ก, URL และรูปแบบทั้งหมดถูกต้องแล้ว แต่พรีวิวยังแสดงผิดอยู่ นั่นคือปัญหาของแคช
WhatsApp จะแคชพรีวิวไว้ โดยเก็บไว้ในแอปของผู้รับ ซึ่งหมายความว่า ไม่มีเครื่องมือใดขอให้ WhatsApp รีเฟรชพรีวิวได้ — ไม่ว่าจะเป็นดีบักเกอร์, API หรือแม้แต่เรา WhatsApp ไม่มีช่องทางรีเฟรชเชิงโปรแกรมใดๆ เลย ดังนั้นจึงไม่มีปุ่มให้กด ผู้ที่อ้างว่าทำได้กำลังอธิบายพฤติกรรมของ Facebook ไม่ใช่ของ WhatsApp
สิ่งที่คุณทำได้คือทำให้แน่ใจว่ารูปภาพที่ ถูกต้อง พร้อมรอไว้สำหรับครั้งถัดไปที่ WhatsApp อ่านหน้าเว็บ นั่นคือเหตุผลที่ URL ของรูปปกของ FastOG อ้างอิงตามเนื้อหา (content-addressed): เมื่อคุณเปลี่ยนชื่อสินค้า, ราคา หรือรูปภาพ URL ก็จะเปลี่ยนตามไปด้วย ทำให้การอ่านครั้งถัดไปไม่สามารถดึงการ์ดเก่าขึ้นมาได้ ส่วนเวลาที่การอ่านนั้นจะเกิดขึ้นนั้นขึ้นอยู่กับ WhatsApp
แพลตฟอร์มที่เกี่ยวข้องอีกสองแห่งมีพฤติกรรมเหมือนกัน — LinkedIn และ X ก็ไม่มี API สำหรับการล้างแคชเช่นกัน และโดยทั่วไปจะอ่านซ้ำภายในประมาณหนึ่งสัปดาห์ เครื่องมือตรวจสอบของพวกเขาสามารถช่วยกระตุ้นให้อ่านซ้ำได้หากคุณรีบ:
| แพลตฟอร์ม | เครื่องมือ | บังคับรีเฟรชพรีวิวได้หรือไม่? |
|---|---|---|
| (ไม่มี) | ไม่ได้ — พรีวิวถูกแคชไว้ในแอปของผู้รับ | |
Sharing Debugger — developers.facebook.com/tools/debug |
ได้ — ผ่านปุ่ม "Scrape Again" และเชิงโปรแกรม | |
Post Inspector — linkedin.com/post-inspector |
กระตุ้นให้อ่านซ้ำได้ | |
| X / Twitter | Card Validator — cards-dev.twitter.com/validator |
กระตุ้นให้อ่านซ้ำได้ |
การใช้ดีบักเกอร์ของ Facebook สำหรับปัญหา WhatsApp ยังคงคุ้มค่าที่จะวาง URL ลงใน Sharing Debugger แม้ว่ามันจะรีเฟรช WhatsApp ไม่ได้ก็ตาม เพราะมันดึงข้อมูลหน้าเว็บในลักษณะเดียวกับที่ WhatsApp จะทำ และรายงานสิ่งที่พบจริง — แท็กที่หายไป, รูปภาพที่เข้าถึงไม่ได้, รูปแบบที่ไม่ถูกต้อง ให้ถือว่ามันเป็นตัวตรวจสอบความถูกต้องของแท็ก ไม่ใช่ตัวแก้ปัญหาแคชของ WhatsApp
6. การแก้ไขปัญหานี้บนร้านค้า WooCommerce
บน WooCommerce ขั้นตอนการทำงานควรระบุให้ชัดเจน เนื่องจากสาเหตุของปัญหามักมาจากปลั๊กอิน SEO ไม่ใช่ธีม:
- แท็กไม่มีอยู่โดยค่าเริ่มต้น WooCommerce ไม่มาพร้อมกับ
og:imageสำหรับproduct,product_catหรือหน้าหมวดหมู่สินค้า - ปลั๊กอิน SEO ของคุณเติมช่องว่างนั้นได้ไม่ดี Yoast, Rank Math, All in One SEO และ SEOPress จะพิมพ์
og:imageออกมา — แต่สำหรับสินค้า ปลั๊กอินเหล่านี้จะใช้ รูปภาพเด่นแบบคงที่ ซึ่งเป็นภาพสี่เหลี่ยมจัตุรัสหรือภาพแนวตั้ง ซึ่งเป็นภาพแบบเดียวกับที่ WhatsApp จะทำการครอป - ระวังแท็กที่ซ้ำกัน หากปลั๊กอินสองตัวพิมพ์
og:imageพร้อมกัน แพลตฟอร์มจะเลือกใช้เพียงอันเดียว และอาจไม่ใช่อันที่คุณคาดหวัง ตรวจสอบซอร์สโค้ดและนับจำนวนแท็กog:imageที่เพจแสดงผล
FastOG สำหรับ WooCommerce ใช้แนวทางที่แตกต่าง: มันเรนเดอร์การ์ดขนาด 1200×630 จากข้อมูลแคตตาล็อกสด (ชื่อสินค้า ราคา ป้ายลดราคา คะแนนรีวิว รูปถ่ายสินค้า) บนบริการเรนเดอร์ของตัวเอง จากนั้น ส่งต่อภาพปกนั้นให้กับปลั๊กอิน SEO ที่คุณใช้งานอยู่แล้ว แทนที่จะพิมพ์แท็กที่แข่งขันกันเอง ดังนั้นคุณจะได้ og:image เพียงอันเดียวบนเพจ และมันคือการ์ดที่ออกแบบมาสำหรับเฟรมอัตราส่วน 1.91:1 ไม่ใช่รูปสินค้าดิบ
เนื่องจากภาพปกถูกสร้างจากข้อมูลแคตตาล็อกสด ราคาบนการ์ดจึงตรงกับราคาบนเพจ และสินค้าที่มีส่วนลดจะได้รับป้ายลดราคา เมื่อคุณบันทึกสินค้า ปลั๊กอินจะขอให้ Facebook อ่านเพจใหม่ด้วย — Facebook เป็นแพลตฟอร์มเดียวที่ให้บริการรีเฟรชแบบตั้งโปรแกรมได้ ส่วน WhatsApp, LinkedIn และ X จะใช้กำหนดเวลาของตัวเอง และปลั๊กอินจะแจ้งให้ทราบอย่างตรงไปตรงมาแทนที่จะสัญญาว่าจะรีเฟรชซึ่งไม่สามารถทำได้
- ติดตั้ง: FastOG สำหรับ WooCommerce บน WordPress.org
- รายละเอียดและคำถามที่พบบ่อย: หน้าเว็บการผสานรวม WooCommerce
ตรวจสอบว่า WhatsApp จะเห็นอะไรจริง ๆ
ก่อนที่คุณจะเปลี่ยนแปลงอะไร ให้ดูหน้าก่อนในแบบที่ครอว์เลอร์มองเห็น วาง URL ของสินค้าใด ๆ ลงใน ดูลิงก์ของคุณแบบที่ผู้ซื้อเห็น — เครื่องมือนี้จะดึงข้อมูลหน้านั้น อ่านแท็ก Open Graph ปัจจุบัน และแสดงพรีวิวผลลัพธ์ตามที่ WhatsApp, X และ Messenger เรนเดอร์ ถัดจากปก FastOG ที่สร้างจากข้อมูลสินค้าชุดเดียวกัน ไม่ต้องสมัครสมาชิก
ต้องการตรวจสอบแท็กดิบหรือไม่ ใช้ ตัวสร้างแท็ก Open Graph Meta เพื่อดูมาร์กอัป หรือตรวจสอบเอกสารอ้างอิงใน og:image ไม่แสดง? วิธีแก้ไข
คำถามที่พบบ่อย
ทำไมรูปภาพสินค้าของฉันถึงถูกครอบตัดบน WhatsApp?
WhatsApp จะครอบตัดรูปภาพที่ได้รับให้อยู่ในกรอบขนาด 1200×630 เสมอ รูปสินค้าแบบสี่เหลี่ยมจัตุรัสหรือแนวตั้งจะสูญเสียด้านข้างหรือด้านบนไป การส่งการ์ดที่ประกอบเสร็จแล้วที่ขนาด 1200×630 — โดยมีรูปสินค้าถูกวางไว้ภายในกรอบการ์ด — จะทำให้แพลตฟอร์มไม่มีอะไรให้ครอบตัด
ฉันสามารถบังคับให้ WhatsApp รีเฟรชตัวอย่างลิงก์ได้หรือไม่?
ไม่ได้ WhatsApp ไม่มี API หรือเครื่องมือดีบักสำหรับการรีเฟรช และแคชของตัวอย่างลิงก์จะถูกเก็บไว้ในแอปของผู้รับ คุณทำได้เพียงทำให้แน่ใจว่ารูปภาพที่ถูกต้องพร้อมสำหรับการอ่านครั้งถัดไป Facebook เป็นข้อยกเว้นและมีบริการ re-scrape ผ่านโปรแกรม
ทำไม Facebook Sharing Debugger แสดงรูปภาพของฉัน แต่ WhatsApp ไม่แสดงอะไรเลย?
เพราะเป็นแคชคนละชุด และ debugger รายงานผลจาก แท็กของหน้าเว็บ ซึ่งทั้งสองแพลตฟอร์มอ่านข้อมูลเดียวกัน หาก debugger แสดงรูปภาพที่ถูกต้องแต่ WhatsApp ไม่แสดง แสดงว่าแท็กถูกต้องแล้ว และสิ่งที่คุณเห็นคือแคชของ WhatsApp ที่ยังไม่ถูกรีเฟรช หาก debugger ก็ไม่แสดงอะไรเช่นกัน แสดงว่าแท็กหายไปหรือรูปภาพไม่สามารถเข้าถึงได้ — ให้ตรวจสอบสาเหตุข้อ 1 และ 2
WhatsApp ใช้ og:image หรือ twitter:image?
og:image ตั้งค่าแท็ก Open Graph twitter:image ใช้สำหรับ X
ฉันต้องใช้ปลั๊กอิน หรือสามารถเพิ่มแท็กด้วยตัวเองได้?
คุณสามารถเพิ่มแท็ก og:image แบบคงที่ในธีมของคุณได้ด้วยตัวเอง — มันใช้งานได้ และดีกว่าไม่ทำอะไรเลยมาก สิ่งที่มันทำไม่ได้คือการสร้างการ์ดที่แตกต่างกันต่อสินค้าหนึ่งรายการโดยไม่ต้องสร้างรูปภาพหนึ่งใบต่อสินค้าหนึ่งรายการด้วยมือ และมันจะล้าสมัยทุกครั้งที่ราคาเปลี่ยนแปลง นั่นคือจุดที่การ์ดปกแบบไดนามิกคุ้มค่าที่จะใช้
เว็บไซต์ของฉันไม่ได้อยู่บน FastOG วิธีนี้ยังช่วยได้หรือไม่?
ได้ — ห้าสาเหตุเป็นพฤติกรรมของแพลตฟอร์ม ไม่ใช่พฤติกรรมของ FastOG ให้ตรวจสอบตามลำดับด้วย curl, ซอร์สโค้ดของหน้า และ debugger
เกี่ยวข้อง
ลองใช้ฟรี — ไม่ต้องสมัครสมาชิก
ดูตัวอย่างและทดสอบภาพ OG แบบไดนามิกได้ในไม่กี่วินาที
เปิดตัวทดสอบภาพ OG ฟรี