แชร์เว็บไซต์ให้น่าสนใจบน Social Network ด้วย Open Graph Protocol และ Twitter Card
รู้จักกับ Open Graph Tags ที่เกี่ยวข้องกับการทำให้ Social Network แสดงเนื้อหาของเราได้สวยงาม เวลานำเอาลิงก์ไปแชร์ยัง Twitter, Facebook
นอกเหนือจากการทำ Meta Tag SEO ให้ผู้คนค้นหาเว็บไซต์ของเราเจอบน Search Engine ต่างๆ อย่าง Google, Bing, … แล้ว ยังมีวิธีการทำให้เนื้อหาเราแสดงได้สวยขึ้นเมื่อมีคนนำเนื้อหาของเราไปแชร์ผ่าน social platform ใหญ่ ๆ อย่าง Facebook และ Twitter ด้วย Open Graph Protocol และ Twitter cards กัน
บทความนี้จะพามารู้จักกับ Open Graph protocol และ Twitter cards กัน
Open Graph protocol
Open Graph protocol (OG) หรือที่เรียกกันว่า og tag ในการเขียนเว็บไซต์เป็นเกณฑ์วิธีที่ถูกออกแบบและสร้างโดย Facebook
โดย Open Graph protocol พัฒนามาสำหรับนำไปใช้ประโยชน์ในการประชาสัมพันธ์หน้าเว็บไซต์ของเราให้เป็นที่รู้จักในเครือข่ายสังคม อย่างใน Facebook เองมากขึ้น เช่น การแชร์ลิงค์ลงในเว็บเพจของ Facebook, การแชร์ลิงค์เว็บไซต์ผ่านแชท Messenger, การโปรโมทเว็บผ่านการยิงโฆษณาให้ผู้คนเห็นผ่าน Facebook เป็นต้น
แน่นอนว่าปัจจุบันไปไหนก็เจอแต่คนมี Facebook account ใช้งานท่อง social จนกลายเป็นกิจวัตรประจําวันไปแล้ว ฉะนั้นการตั้งค่า og tag ให้เว็บของเราก็จะเพิ่มโอกาสในการกดเข้าชมเว็บไซต์เพิ่มขึ้นได้อีกทาง
แล้วเจ้า og tag ที่เราจะตั้งค่าให้กับเว็บเรามีอะไรบ้างล่ะ
og tag หลัก ๆ เลยที่เราควรจะใส่ลงในเว็บเราเพื่อการประชาสัมพันธ์เว็บเราผ่านการแสดงผลใน Graph UI ต่างๆภายใน Facebook เช่นโพสต์, ลิงค์ในแชท คือ
1. og:title → หัวเรื่องที่ต้องการให้ปรากฎ
2. og:description → คำอธิบายที่ต้องการให้ปรากฎ
3. og:image → รูปที่ต้องการให้ปรากฎ
3.1 og:image:secure_url → url ของเว็บแบบ https (สำหรับเว็บที่ทำแบบ secure)
3.2 og:image:type → ระบุชนิดของรูป เช่น image/jpeg
3.3 og:image:width → ความกว้างของรูป
3.4 og:image:height → ความยาวของรูป
3.5 og:image:alt → คำอธิบายรูปว่าคือรูปอะไร เพื่อการค้นหารูปภาพผ่านตัวอักษร
4. og:video → วีดีโอที่ต้องการให้ปรากฎ
5. og:url → url หรือลิงค์เว็บของเราที่จะใช้อ้างอิงให้ Search Engine รู้จัก
สำหรับสาย developer ถ้าอยากติดตามรายละเอียดการเขียนโค๊ดตั้งค่า og tag ต่างๆ รอติดตามได้กันในบล็อกถัดไปนะครับ
เรามาต่อกันกับ Twitter cards กันเลย…
Twitter cards
Twitter ได้พัฒนาสิ่งที่เรียกว่า Twitter cards เพื่อขับเคลื่อนการประชาสัมพันธ์เว็บไซต์ต่างๆ ไม่ว่าจะด้วยในรูปแบบของภาพ วีดีโอ และสื่ออื่นๆในการ Tweet
การ Tweet ลิงค์เว็บไซต์นั้นจะถูกแสดงผลในรูปแบบของ “การ์ด” หรือ Card UI
twitter card tag หลักๆเลยที่เราควรจะใส่ลงในเว็บเราเพื่อการประชาสัมพันธ์เว็บเราผ่านการแสดงผลใน Card UI ต่างๆภายใน Twitter เช่น ทวิตโพสต์ คือ
twitter:title → หัวเรื่องที่ต้องการให้ปรากฎบนการ์ด
twitter:description → คำอธิบายที่ต้องการให้ปรากฎบนการ์ด
twitter:image → รูปที่ต้องการให้ปรากฎบนการ์ด
twitter:player → สื่อเช่น วีดีโอ และเสียงที่ต้องการให้ปรากฎบนการ์ด
twitter:url → url หรือลิงค์เว็บของเราที่จะใช้อ้างอิงให้ Search Engine รู้จัก
เพียงเท่านี้เว็บไซต์ของเราก็มีโอกาสที่มากขึ้นเยอะในการปรากฎ เพื่อโปรโมตบนแพลตฟอร์มโซเชียลมีเดียยักษ์ใหญ่ อย่าง Facebook และ Twitter ให้ชาวโลกได้เห็นกันมากขึ้นแล้วครับ
สำหรับสาย developer ถ้าอยากติดตามรายละเอียดการเขียนโค๊ดตั้งค่า twitter card ต่างๆ รอติดตามได้กันในบล็อกถัดไปกันได้เลยครับ อีกไม่นานเกินรอ
หวังว่าทุกคนจะได้ความรู้ดีๆกลับไปศึกษา ลองปรับใช้กันต่อนะครับ
สวัสดีครับ…
อ้างอิง:
