เมื่อวานเพิ่งค้นพบว่ามันมีสิ่งที่เรียกว่าโปรโตคอล Open Graph อยู่ด้วย (เชยโคตรๆ 😅)

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

ทีแรกเข้าใจว่า LINE มันเอารูปแรกที่เจอในเว็บมาเป็น preview เลยพยายามเอารูปที่จะใช้ไปใส่ไว้บนๆ ของหน้าเว็บ แล้วตั้ง display: none; ไว้… แน่นอนว่าไม่เวิร์ก 😆 เลยลองวิธีต่อมา คือเอารูปไปใส่ไว้ตรง branding ของ navigation bar ด้านบนสุดเลย กะว่าถ้ามันอ่านมา ยังไงเจอรูปนี้ก่อนแน่นอน แต่ก็ยังไม่ได้ผลอยู่ดี

Google ไปๆ มาๆ ก็เจอเรื่อง การทำยังไงให้เวลาคนแชร์เว็บใน Facebook แล้วมันขึ้นรูปกับข้อความที่เราต้องการ ก็เลยได้รู้จักกับ Open Graph ที่เป็นการเพิ่ม tag <meta> เข้าไปในส่วน <head> ของเว็บเพจ เพื่อระบุชื่อ title, description, และ image ที่ต้องการให้โชว์เวลา Facebook ไปอ่านลิงก์มาแสดง preview 😐

จังหวะนั้นคิด(เอาเอง)ว่ามันน่าจะใช้กับ LINE ได้ด้วย แต่ด้วยความที่ดึกแล้ว เลยยังไม่ได้ลอง แต่ไปโพสต์ถามไว้ในกลุ่ม LINE TECHEXCHANGE ซึ่งก็ได้คำตอบว่า LINE มันก็รองรับการใช้ Open Graph tags ตามที่คิดไว้จริงๆ 🎉

วันนี้มาทดลองดู ตอนแรกๆ ก็งงๆ ว่าทำไมรูปไม่ขึ้น 🤨 เลย Google หาข้อมูล และไปเจอ tool สำหรับทดสอบ Open Graph ของ Facebook ซึ่งดีงามมาก แค่ใส่ URL ลงไป มันก็จะวิเคราะห์ออกมาให้เลยว่า OG tags ที่เราใส่ไปยังขาดอะไรอยู่ และมี preview ให้ดูด้วยว่าถ้าแชร์ลิงก์ใน Facebook แล้วจะหน้าตาออกมาเป็นยังไง

สรุปว่าได้ความรู้ใหม่คือ เราสามารถใช้ Open Graph tags เพื่อบอกให้ LINE ไปดึงรูปที่เราต้องการมาแสดงเป็นภาพ preview เวลามีคนแปะลิงก์ได้นั่นเอง 😙