แชร์เว็บไซต์ให้น่าสนใจบน Social Network ด้วย Open Graph Protocol และ Twitter Card

แชร์เว็บไซต์ให้น่าสนใจบน 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 ต่างๆ รอติดตามได้กันในบล็อกถัดไปกันได้เลยครับ อีกไม่นานเกินรอ

หวังว่าทุกคนจะได้ความรู้ดีๆกลับไปศึกษา ลองปรับใช้กันต่อนะครับ

สวัสดีครับ…

อ้างอิง:

Open Graph protocol The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on…ogp.me

About Twitter Cards With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to…developer.twitter.com

Summary Card The Summary Card can be used for many kinds of web content, from blog posts and news articles, to products and…developer.twitter.com