ทำไมตัวอย่างลิงก์ของคุณถึงผิดเพี้ยน และจะแก้ด้วย Open Graph อย่างไร

คุณแชร์ลิงก์ไปยังหน้า landing page ใหม่ แต่ตัวอย่างที่ขึ้นมากลับไม่มีรูป เป็นชื่อของหน้าแรก หรือเป็นแบนเนอร์จากแคมเปญเมื่อสองแคมเปญก่อน ตัวหน้าเว็บเองปกติดี ตัวอย่างนั้นถูกสร้างจากสิ่งอื่น คือโค้ดไม่กี่บรรทัดในส่วน head ของหน้า ซึ่งคนส่วนใหญ่ไม่เคยเห็น

บทความนี้อธิบายสาเหตุทั้งหกที่ทำให้ตัวอย่างลิงก์เสียในส่วนใหญ่ เรียงตามลำดับที่ควรตรวจ หากอยากให้ระบบเขียนแท็กให้ ลองใช้เครื่องมือสร้าง Open Graphฟรีได้ เครื่องมือจะสร้างแท็กให้ จัดรูปแบบอักขระพิเศษให้ถูกต้อง และตรวจตามขีดจำกัดด้านล่าง

ตัวอย่างลิงก์ถูกสร้างขึ้นอย่างไร

เมื่อมีการวางลิงก์ลงในโพสต์หรือข้อความ แอปจะส่งตัวเก็บข้อมูล (crawler) ไปยังหน้านั้น crawler อ่านแท็ก <meta> ใน <head> แล้วนำมาสร้างการ์ดตัวอย่าง แท็กเหล่านี้มาจากโปรโตคอล Open Graph ซึ่งกำหนดให้มีสี่แท็กที่จำเป็น:

• og:title: ชื่อหน้าเว็บในรูปแบบที่ควรแสดงบนการ์ด
• og:type: ประเภทของหน้า โดยปกติคือ website หรือ article
• og:image: รูปภาพ
• og:url: URL หลักของหน้า ซึ่งโปรโตคอลเรียกว่ารหัสถาวรของหน้า

เพิ่ม og:description เข้าไปก็ได้การ์ดที่สมบูรณ์ ชุดแท็กขั้นต่ำที่ครบถ้วนหน้าตาแบบนี้:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

สาเหตุที่ 1: ไม่มีแท็กเลย

หากไม่มีแท็ก og: แอปแต่ละตัวต้องหาข้อมูลจากสิ่งอื่นในหน้า เช่น <title> หรือรูปแรก และแต่ละแอปจะเลือกต่างกัน นี่คือเหตุผลที่ลิงก์เดียวอาจดูปกติในที่หนึ่งแต่เสียในอีกที่หนึ่ง วิธีแก้คือใส่แท็กที่จำเป็นทั้งสี่พร้อมคำอธิบายในทุกหน้าที่คาดว่าคนจะแชร์ ไม่ใช่แค่หน้าแรก หน้าสินค้าที่ใช้แท็กของหน้าแรกจะแสดงการ์ดของหน้าแรก

สาเหตุที่ 2: URL ของรูปเป็นแบบ relative

จุดนี้มักถูกมองข้าม เพราะหน้าเว็บดูปกติในเบราว์เซอร์ของคุณเอง content="/images/og.jpg" ใช้ได้กับเบราว์เซอร์ที่เปิดอยู่บนเว็บของคุณแล้ว แต่ crawler อยู่นอกเว็บนั้น ให้เขียนที่อยู่เต็ม ขึ้นต้นด้วย https:// และโดเมนของคุณ og:url ก็ต้องทำเช่นเดียวกัน

สาเหตุที่ 3: รูปมีขนาดหรือสัดส่วนไม่ถูกต้อง

แต่ละแพลตฟอร์มระบุความต้องการของตัวเอง และโดยบังเอิญทั้งหมดเห็นตรงกันว่าควรใช้รูปแนวกว้าง:

• LinkedIn ระบุในคู่มือทำให้เว็บไซต์แชร์ได้ว่ารูปควรมีขนาดอย่างน้อย 1200 × 627 พิกเซล อัตราส่วนที่แนะนำคือ 1.91:1 และต้องไม่เกิน 5 MB
• Meta’s แนวปฏิบัติที่ดีในการแชร์แนะนำให้ใช้รูปที่กว้างอย่างน้อย 1080 พิกเซลสำหรับหน้าจอความละเอียดสูง และกว้างอย่างน้อย 600 พิกเซลสำหรับโฆษณาลิงก์รูปภาพ
• การ์ดรูปขนาดใหญ่ของ X รองรับอัตราส่วน 2:1 ตั้งแต่ 300 × 157 ถึง 4096 × 4096 พิกเซล ขนาดไม่เกิน 5MB เป็นไฟล์ JPG, PNG, WEBP หรือ GIF และไม่รองรับ SVG ตามเอกสารสำหรับนักพัฒนาของ X (หน้าเดิมถูกเปลี่ยนเส้นทางแล้ว ลิงก์นี้จึงไปผ่าน Internet Archive)

ขนาดเดียวที่ใช้ได้กับทั้งสามแพลตฟอร์มคือ 1200 × 630 ขนาดนี้ผ่านขั้นต่ำ 1200 × 627 ของ LinkedIn กว้างกว่า 1080 ของ Meta และอัตราส่วนคือ 1200 ÷ 630 = 1.905 ซึ่งอยู่ในช่วง 5% ของ 2:1 ของ X รูปสี่เหลี่ยมจัตุรัสหรือแนวตั้งจะถูกครอบให้เป็นการ์ดแนวกว้าง ดังนั้นให้วางส่วนสำคัญไว้ตรงกลาง เครื่องคำนวณอัตราส่วนภาพจะแสดงให้เห็นว่าการครอบกลางจะเหลือพื้นที่แบบใด

ให้ระบุขนาดรูปในแท็กด้วย Meta ขอให้ใส่ og:image:width และ og:image:height เพื่อให้ crawler แสดงรูปได้ทันที ไม่ต้องดาวน์โหลดและประมวลผลก่อน คู่มือสำหรับผู้ดูแลเว็บของ Meta สรุปไว้ง่ายๆ ว่า ให้ระบุความสูงและความกว้าง เพื่อให้รูปโหลดได้ถูกต้องตั้งแต่ครั้งแรกที่มีการแชร์หน้า

สาเหตุที่ 4: แท็กถูกเพิ่มด้วย JavaScript

เว็บไซต์บางตัวและแอป single-page จะเพิ่มแท็ก meta หลังจากหน้าโหลดเสร็จแล้วในเบราว์เซอร์ crawler ที่อ่าน HTML ที่เซิร์ฟเวอร์ส่งมาอาจไม่ได้รันโค้ดนั้น จึงไม่เห็นแท็กเหล่านั้นเลย ให้ตรวจ source ของหน้า (ดูด้วย View Source ไม่ใช่ inspector เพราะ inspector แสดงหน้าหลังสคริปต์ทำงานแล้ว) หากไม่มีแท็กใน source crawler ก็น่าจะมองไม่เห็นเช่นกัน วิธีแก้ต้องทำในการตั้งค่าเว็บไซต์หรือเทมเพลตฝั่งเซิร์ฟเวอร์

สาเหตุที่ 5: อักขระพิเศษทำให้แท็กเสียหาย

ชื่อที่มีเครื่องหมายคำพูดคู่อยู่ข้างใน เช่น The "only" linen you need จะปิด attribute content="..." ก่อนเวลา ทำให้ส่วนที่เหลือของชื่อหายไป อักขระที่มีความหมายภายใน attribute ต้องถูก escape คือ " กลายเป็น " & กลายเป็น & และ < กลายเป็น < เบราว์เซอร์และ crawler จะแปลงกลับเป็นอักขระเดิมเมื่ออ่านแท็ก เครื่องมือสร้างจะจัดการให้โดยอัตโนมัติ ซึ่งเป็นเหตุผลครึ่งหนึ่งที่ควรใช้เครื่องมือนี้

สาเหตุที่ 6: แอปจำเวอร์ชันเก่าไว้

คุณแก้แท็กแล้ว แชร์ใหม่ แต่การ์ดเก่ายังอยู่ นั่นคือแคช แอปจัดเก็บข้อมูลที่ดึงมาแล้วนำกลับมาใช้ซ้ำ และเครือข่ายใหญ่ทั้งสองมีเครื่องมือให้ขอดึงข้อมูลใหม่:

• Facebook: วาง URL ลงใน Sharing Debugger ของ Meta คู่มือสำหรับผู้ดูแลเว็บของ Meta ระบุว่าเครื่องมือนี้แสดงแท็กที่ crawler ดึงมาได้ พร้อมข้อผิดพลาดหรือคำเตือน และสั่งให้ดึงข้อมูลใหม่ แนวปฏิบัติที่ดีของ Meta เพิ่มเติมว่า หากไม่ทำอะไร เนื้อหาที่ดึงมาแล้วจะอัปเดตตามรอบมาตรฐานทุก 24 ชั่วโมง
• LinkedIn: ตรวจ URL ผ่าน Post Inspector หน้าช่วยเหลือของ LinkedIn ระบุข้อจำกัดไว้ชัดเจนว่า การรีเฟรชจะเปลี่ยนตัวอย่างเฉพาะโพสต์ใหม่เท่านั้น โพสต์ที่มี URL นั้นอยู่แล้วจะยังคงใช้ตัวอย่างเดิม

ข้อควรจำของ LinkedIn นี้สำคัญที่สุดก่อนเปิดตัว ให้ตรวจตัวอย่าง ก่อน โพสต์แรกจะถูกส่งออกไป เพราะการแก้หน้าเว็บจะไม่ช่วยแก้โพสต์เก่าได้

แท็ก twitter:card: หนึ่งบรรทัด ไม่ใช่สี่บรรทัด

X ก็อ่าน Open Graph ได้เช่นกัน เอกสารอ้างอิงมาร์กอัปการ์ดของ X ระบุค่าสำรองของแต่ละแท็ก twitter:title จะใช้ og:title twitter:description จะใช้ og:description twitter:image จะใช้ og:image และ twitter:image:alt จะใช้ og:image:alt ดังนั้นไม่จำเป็นต้องใส่ซ้ำทุกอย่าง แท็กเดียวที่ต้องเพิ่มคือ twitter:card โดยใช้ summary_large_image สำหรับรูปเต็มความกว้าง หรือ summary สำหรับรูปสี่เหลี่ยมเล็ก หากไม่ใส่ เอกสารเดียวกันระบุว่า X อาจแสดงการ์ดสรุปขนาดเล็กแทน ซึ่งเป็นเหตุผลที่รูปขนาดใหญ่บางครั้งกลายเป็นภาพขนาดย่อ เอกสารเดียวกันกำหนดความยาวสูงสุดของชื่อไว้ 70 อักขระ คำอธิบาย 200 อักขระ และข้อความ alt 420 อักขระ

การตรวจก่อนเปิดตัวในห้านาที

1. ดู page source แล้วหาแท็ก og: ให้ครบทั้งสี่แท็กที่จำเป็น พร้อมคำอธิบาย
2. ตรวจว่า og:image และ og:url ขึ้นต้นด้วย https://
3. เปิด URL ของรูปในเบราว์เซอร์โดยตรง รูปควรโหลดได้ และมีขนาด 1200 × 630 หรือใกล้เคียง
4. วาง URL ลงใน Sharing Debugger และ Post Inspector แล้วอ่านการ์ดที่แสดง
5. จากนั้นจึงค่อยแชร์

Hermoso อยู่ตรงไหน

Hermoso คือเอเจนต์การตลาดด้วย AI ที่ค้นหาโฆษณาที่ได้ผลอยู่แล้วในตลาดของคุณ สร้างโฆษณารูปภาพและวิดีโอที่สอดคล้องกับแบรนด์ ตั้งเวลาโพสต์ไปยังบัญชีของคุณเอง และเปิดแคมเปญโฆษณาแบบจ่ายเงินบนบัญชีโฆษณาของคุณเอง ตัวอย่างลิงก์ที่ดีคือสิ่งที่ทำให้โพสต์เหล่านั้นน่าคลิก Hermoso ใช้งานได้ในเว็บแอป หรือภายใน Claude, ChatGPT และ Cursor ผ่านเซิร์ฟเวอร์ MCP ของ Hermoso

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

ทำไมลิงก์ของฉันไม่แสดงรูปบน Facebook หรือ LinkedIn

มักเป็นเพราะไม่มีแท็ก og:image ใช้เส้นทางแบบ relative แทนที่อยู่ https:// เต็ม หรือชี้ไปยังรูปที่เล็กเกินไป LinkedIn ขอให้มีขนาดอย่างน้อย 1200 × 627 พิกเซล หลังแก้ไขแล้ว ให้นำ URL ไปตรวจใน Sharing Debugger ของ Meta หรือ Post Inspector ของ LinkedIn เพื่อให้แพลตฟอร์มดึงข้อมูลใหม่

รูป Open Graph ควรมีขนาดเท่าใด

1200 × 630 พิกเซลใช้ได้ดีกับเครือข่ายใหญ่ ผ่านขั้นต่ำ 1200 × 627 ของ LinkedIn ที่อัตราส่วนประมาณ 1.91:1 กว้างกว่า 1080 พิกเซลที่ Meta แนะนำ และใกล้เคียงกับอัตราส่วน 2:1 ที่ X รองรับสำหรับการ์ดรูปขนาดใหญ่

ฉันจะอัปเดตตัวอย่างลิงก์ของ LinkedIn ได้อย่างไร

แก้แท็กในหน้าเว็บก่อน แล้วใส่ URL ลงใน Post Inspector ของ LinkedIn ตัวอย่างที่รีเฟรชแล้วจะใช้กับโพสต์ใหม่เท่านั้น โพสต์ที่มี URL อยู่แล้วจะยังคงใช้ตัวอย่างเดิม

ถ้ามีแท็ก og: แล้ว ยังต้องมีแท็ก twitter: อีกหรือไม่

มีแค่ twitter:card เท่านั้น X จะใช้ og:title, og:description, og:image และ og:image:alt แทน เมื่อไม่มีแท็ก twitter: ตัวที่เกี่ยวข้อง