Services

อัพเดทภาพ preview เมื่อแชร์ลิงก์ใน Line Facebook และ twitter ยังไง

วันที่: 12 ก.พ. 2566 21:59 น.

เคยเจอปัญหาการแชร์ลิงก์ในไลน์ facebook หรือ twitter แล้วภาพไม่แสดงหรือแสดงไม่ตรงกับที่ต้องการไหมครับ หรือบางทีเคยแสดงไปเรียบร้อยแล้ว แต่ดันอยากเปลี่ยนภาพ แล้วในไลน์ไม่อัพเดทให้ ในบทความนี้จะพาทำการอัพเดทภาพให้ตรงใจมากที่สุดครับ

เลือกรูปภาพที่ต้องการให้แสดงเมื่อแชร์ได้อย่างไร

ภาพที่แสดงเมื่อเราแชร์ไปยังโซเชียลมีเดียต่าง ๆ นั้น ส่วนใหญ่แล้วมักมาจาก tag ที่ผู้พัฒนาใส่เข้าไปในโค้ด ซึ่งมันคือ Open Graph Tags (Open Graph Protocol) หรือผมมักเรียกว่า og tag นั่นเองครับ ซึ่ง tag ที่สำคัญๆ นั้นมีอะไรบ้าง มาดูกัน

og:title คือ หัวข้อ/เรื่องของโพสนั้น ๆ
og:description คือ คำอธิบายแบบสั้น ๆ ของโพส
og:image คือ ลิงก์ของรูปภาพที่ต้องการให้แสดง
- og:image:secure_url คือ ลิงก์ภาพที่เป็น https ซึ่งทุกวันนี้ก็เป็นแบบนี้กันหมดแล้วแหละ
- og:image:type คือ ชนิดของภาพ เช่น image/jpeg หรือ image/png เป็นต้น
- og:image:width คือ ขนาดความกว้างของรูปภาพ เช่น 600 หรือ 1200 เป็นต้น
- og:image:height คือ ขนาดความสูงของรูปภาพ เช่น 315 หรือ 600 เป็นต้น
- og:image:alt คือ คำอธิบายรูปภาพแบบสั้น ๆ
og:url คือ ลิงก์ของบทความ
og:type คือ ประเภทเนื้อหาของโพส เช่น article

โค้ดตัวอย่าง

<meta property="og:image" content="https://puwanai.com/images/og_20220614231501_86365.png" />
<meta property="og:title" content="พัฒนา Line bot ด้วยภาษา PHP อย่างง่าย ด้วยโค้ดไม่กี่บรรทัด (ep.2)" />
<meta property="og:description" content="เมื่อไม่นานมานี้ ได้พาเริ่มเขียน Line Bot ด้วยภาษา PHP ไปแล้ว ใครยังไม่ได้อ่านให้อ่านก่อนครับ ไปเริ่มจากพัฒ" />
<meta property="og:url" content="https://puwanai.com/line-bot-php-ep-2.html" />
<meta property="og:site_name" content="puwanai.com" />
<meta property="og:type" content="article" />

นอกจากนี้ยังมี tag อื่น ๆ อีกมากมาย ซึ่งถูกกำหนดขึ้นแต่ละ platform อีก โดยสามารถเข้าไปศึกษาเพิ่มเติมได้ที่ https://ogp.me/

ทำไมต้องแสดงภาพเวลาแชร์ด้วยล่ะ?

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