ถ้าคุณเคยแชร์ลิงก์เว็บตัวเองใน LINE หรือ Facebook แล้วมันขึ้นเป็นแค่ URL เปล่าๆ ไม่มีรูป ไม่มีคำอธิบาย ปัญหามักไม่ได้อยู่ที่เว็บพัง
ส่วนใหญ่แปลว่าเว็บยังไม่ได้บอกแพลตฟอร์มพวกนี้ว่า เวลามีคนแชร์ลิงก์ ควรแสดงอะไร
Open Graph คือข้อมูลที่บอกแพลตฟอร์มว่า “ช่วยโชว์ลิงก์ฉันแบบนี้นะ”
เวลาคุณแชร์ลิงก์ แพลตฟอร์มอย่าง Facebook, LINE, Discord หรือบางแอปแชต จะพยายามดึงข้อมูลจากหน้าเว็บไปทำ preview
ถ้าเว็บคุณมีข้อมูลพวกนี้ชัด มันจะขึ้นสวย
- ชื่อเรื่อง
- คำอธิบาย
- รูปภาพ
ถ้าไม่มี มันก็จะเดาเอง และผลลัพธ์มักออกมาไม่ค่อยดี
นี่คือสิ่งที่คนมักเรียกรวมๆ ว่า Open Graph หรือ social preview
ทำไมเรื่องนี้สำคัญกว่าที่คิด
คนส่วนใหญ่ไม่ได้เปิดเว็บจากการพิมพ์ URL ตรงๆ
เขาเห็นลิงก์จากที่ไหนสักที่ก่อน แล้วตัดสินใจว่าจะกดหรือไม่จาก preview นั่นแหละ
ถ้า preview ของคุณดูโล่ง ไม่มีรูป หรือชื่ออ่านไม่รู้เรื่อง มันเหมือนส่งนามบัตรเปล่าให้คน
แต่ถ้า preview ขึ้นรูปสวย หัวข้อชัด คำอธิบายตรง คนจะเข้าใจทันทีว่าลิงก์นี้เกี่ยวกับอะไร
บางครั้งเว็บคุณไม่ได้มีปัญหาอะไรเลย แค่ยังไม่มี social preview ที่ดี ทำให้คนไม่รู้สึกอยากกด
3 อย่างที่ควรมีอย่างน้อย
ถ้าจะเอาแบบพื้นฐานที่สุด เว็บคุณควรมีอย่างน้อย 3 อย่างนี้
1. og:title
นี่คือชื่อที่อยากให้โชว์ตอนแชร์ลิงก์
มันไม่จำเป็นต้องเหมือนชื่อในแท็บ browser ทุกครั้ง แต่ควรชัดว่าหน้านี้คืออะไร
2. og:description
นี่คือคำอธิบายสั้นๆ ประมาณ 1-2 ประโยค
หน้าที่ของมันไม่ใช่ขายของยาวๆ แต่คือทำให้คนอ่านแล้วเข้าใจว่า ถ้ากดเข้าไปจะเจออะไร
3. og:image
นี่คือรูป preview ซึ่งมักเป็นส่วนที่ทำให้ลิงก์ดูดีหรือดูแห้งที่สุด
ถ้าคุณมีครบสามอย่างนี้ social preview จะดีขึ้นทันทีแบบเห็นผลชัด
รูปควรใช้ขนาดประมาณไหน
ถ้าจะเอาแบบที่ปลอดภัยกับหลายแพลตฟอร์ม ใช้รูปประมาณ 1200 x 630 พิกเซลจะพลาดยากที่สุด
มันเป็นสัดส่วนที่พอแชร์แล้วไม่โดนครอปแปลกง่าย และดูดีทั้งบน desktop กับมือถือ
รูปไม่ต้องซับซ้อนมากก็ได้
เอาแค่มี
- ชื่อเว็บหรือชื่อหน้า
- สีหรือภาพที่สื่ออารมณ์ของเว็บ
- ความคมชัดพอ
ถ้าคุณใช้ Lovable หรือ AI builder
วิธีง่ายที่สุดคือไม่ต้องไปไล่แก้ meta tag เองทีละตัว แต่สั่ง AI ตรงๆ เลย
ลองใช้ prompt แบบนี้
เพิ่ม Open Graph และ social preview ให้ทุกหน้าของเว็บ
- กำหนด og:title ให้ชัดตามชื่อหน้า
- กำหนด og:description เป็นคำอธิบายสั้นๆ ที่อ่านแล้วรู้ว่าเว็บนี้เกี่ยวกับอะไร
- กำหนด og:image สำหรับหน้าแชร์ลิงก์ โดยใช้รูปขนาดเหมาะกับ social preview
- ทำให้แต่ละหน้ามี preview ที่ดูดีเวลาแชร์ใน LINE และ Facebook
ไม่เปลี่ยน design หรือฟังก์ชันที่มีอยู่แล้วถ้าคุณไม่ได้ใช้ AI builder หลักคิดก็เหมือนกัน คือเพิ่มข้อมูล preview พวกนี้ใน <head> ของหน้าเว็บ
ทดสอบยังไงว่ามันทำงานแล้ว
วิธีที่ง่ายที่สุดคือแชร์ลิงก์จริง
แต่ถ้าอยากเช็กก่อนแบบเร็วๆ คุณใช้เครื่องมือพวกนี้ได้
- Facebook Sharing Debugger
- LINE URL Checker
เครื่องมือพวกนี้ช่วยให้คุณเห็นว่าแพลตฟอร์มอ่านข้อมูลจากเว็บคุณออกมาเป็นอะไร และบางครั้งช่วย refresh cache ให้ด้วย
งานนี้เห็นผลเร็วมาก ถ้าแก้ถูก คุณจะเห็นความต่างทันทีตอนแชร์ลิงก์
3 เรื่องที่คนมักพลาด
1. ใช้รูปเล็กเกินไป
พอแชร์แล้วรูปแตก หรือโดนครอปจนดูไม่ตั้งใจ
2. หน้าเว็บทุกหน้าดันใช้ preview เหมือนกันหมด
อันนี้ไม่ผิดเสมอไป แต่ถ้าทุกหน้ามีบทบาทต่างกันมาก คุณควรแยก title และ description ให้เข้ากับหน้านั้น
3. แก้แล้ว แต่แชร์แล้วยังเห็นของเก่า
นี่เกิดบ่อยมาก โดยเฉพาะกับ LINE
แพลตฟอร์มพวกนี้มี cache ถ้าแก้แล้วไม่เปลี่ยนทันที อย่าเพิ่งสรุปว่าคุณแก้ไม่สำเร็จ ลองใช้ debugger หรือรอสักพักก่อน
ถ้าแก้ social preview แล้ว LINE ยังไม่ยอมเปลี่ยนทันที ปัญหาอาจเป็น cache ไม่ใช่เพราะเว็บคุณพัง
ปิดท้ายแบบสั้นที่สุด
ถ้าลิงก์คุณแชร์แล้วไม่น่ากด ปัญหาอาจไม่ใช่เนื้อหา แต่คือ preview ยังไม่ได้ตั้ง
เริ่มจาก og:title, og:description, และ og:image ให้ครบก่อน แล้วค่อยไปไล่ละเอียดเพิ่มทีหลัง