How to Create Google+ Snippet

Submitted by mk on 8 November, 2011 - 16:49

นั่งงมอยู่ครึ่งบ่าย ตอนนี้หายงงแล้วมาเขียนไว้หน่อย กันลืม

ในโลกยุค social network ทุกวันนี้ การแชร์ลิงก์ผ่าน social network กลายเป็นเรื่องปกติธรรมดา ในกรณีของ Twitter คงไม่มีอะไรพิสดารเพราะถือเป็นข้อความธรรมดา (ที่ดันเป็น URL) แต่กรณีของ Facebook/Google+ เวลาเราแปะลิงก์ (หรือกด Like/+1) มันจะขึ้นพรีวิวขึ้นมาให้เห็น

พรีวิวอันนี้ (หรือที่กูเกิลเรียกว่า snippet) จะช่วยให้ลิงก์ของเราน่าอ่านมากขึ้น เพราะมันจะแสดงข้อมูล (metadata) สามอย่างให้คนอ่านเห็น ได้แก่

  • ชื่อลิงก์ (title)
  • ภาพประกอบ (thumbnail)
  • คำโปรย (description) คำถามต่อมาในเชิงเทคนิคคือ Facebook/Google+ นำข้อมูล 3 ประการนี้มาแสดงได้อย่างไร?

คำตอบคือ มี 2 วิธี ได้แก่

  • Facebook/Google+ อ่านเพจนั้นๆ แล้วแกะ (extract) ข้อมูลมาเอง โดยใช้วิธีการ "เดา" (แบบเป็นเรื่องเป็นราวสักหน่อย) ว่าอะไรควรจะเป็น metadata ของเพจนั้นๆ
  • คนทำเว็บเป็นฝ่ายบอก Facebook/Google+ ว่า metadata เหล่านี้คืออะไรบ้าง

ในกรณีทั่วไปแล้ว Facebook/Google+ จะแกะข้อมูลได้ค่อนข้างเก่ง ซึ่งเว็บมาสเตอร์ก็ไม่ต้องทำอะไรเป็นพิเศษ ลิงก์ของเราก็สามารถแชร์ผ่าน Facebook/Google+ แล้วขึ้นพรีวิวสวยงาม

กรณีของ Blognone สามารถแชร์ลิงก์บน Facebook ได้สวยงาม แต่บน Google+ กลับมีปัญหา ดังภาพ

เหตุผลก็เพราะ Google+ ไม่รู้ว่าตรงไหนของเพจที่เป็นเนื้อหาข่าว และใช้วิธีดูดก้อนที่ชื่อ content มาทั้งยวง ทำให้ติดข้อมูลจำพวกวัน เวลา ชื่อคนเขียน แท็ก ฯลฯ มาด้วย จนเบียดบังพื้นที่แสดง "คำโปรย" ที่แท้จริงไป (สรุปง่ายๆ ว่าตัวดูดเพจของ G+ ยังไม่เก่งเท่ากับ Facebook)

ทางแก้ก็คือ "บอก" กับ Google+ ว่าอะไรเป็น snippet ของเพจนั้นๆ

กูเกิลเตรียมวิธีการไว้ให้แล้ว โดยอยู่ในส่วนที่เรียกว่า +Snippet (อ่านข่าวนี้ประกอบด้วย กูเกิลเริ่มเชื่อม +Snippets ระหว่าง Google+ กับบริการอื่นๆ ของตัวเอง)

คอนเซปต์ก็ตรงไปตรงมาครับ เราต้องบอก G+ ว่าส่วนไหนของเพจเป็น metadata โดยระบุ "แท็ก" เพิ่มเติมลงไปเล็กน้อย (ใครที่คุ้นกับ Microformat คงเข้าใจว่ามันเหมือนๆ กัน)

อย่างไรก็ตาม ภาษาที่ใช้กำหนด metadata ให้กับ G+ เรียกว่า Microdata ซึ่งเป็นข้อตกลงร่วมกันระหว่างกูเกิล ยาฮู ไมโครซอฟท์ (อ่านข่าว) และมีสเปกอยู่บนเว็บ schema.org ให้เลือกใช้ตามต้องการ (เช่น แท็กสำหรับหนัง แท็กสำหรับหนังสือ แท็กสำหรับสินค้า)

กรณีของ G+ นั้น เราสามารถใช้ฟอร์แมตอะไรก็ได้จาก schema.org เพราะว่า G+ จะดึงข้อมูลพื้นฐานแค่ 3 อย่างเท่านั้น คือ

  • title
  • image
  • description

วิธีการก็ทำตามตัวอย่างในเอกสารของ G+ นั่นล่ะครับ

<body itemscope itemtype="http://schema.org/Product">
  <h1 itemprop="name">Shiny Trinket</h1>
  <img itemprop="image" src="image-url"></img>
  <p itemprop="description">Shiny trinkets are shiny.</p>
</body>

ส่วนที่เพิ่มเข้ามาคือ

  • itemscope เพื่อกำหนดขอบเขตว่า ตรงไหนบ้างที่เป็น microdata (อันนี้ต้องใส่นะครับ ตอนแรกผมไม่ใส่ ปรากฏว่า G+ ไม่สนใจเลย)
  • itemtype บอกชนิดของข้อมูล ใส่เป็นอะไรก็ได้ (กรณีนี้ผมใส่เป็น BlogPosting)
  • itemprop มีสามอัน เลือกใส่เองตามความเหมาะสม (วิธีการใส่ก็ขึ้นกับ CMS แต่ละตัวว่ายากง่ายแค่ไหน)

ผลลัพธ์ดีขึ้นทันตา

หมายเหตุ:

แท็กต่างๆ ตามมาตรฐานของ schema.org เป็นข้อตกลงระหว่างเว็บค้นหา 3 รายใหญ่ แต่ไม่รวม Facebook ที่ใช้แท็กของตัวเองที่เรียกว่า Open Graph Protocol

หลักการทำงานของ Open Graph Protocol คล้ายกับ Microdata แต่วิธีใส่แตกต่างกัน โดย Open Graph จะใส่แท็ก <meta property="og:title"> ที่ส่วน head ของเว็บเพจแทนการกำหนด attribute แบบ Microdata

Google+ สามารถอ่านค่าจาก Open Graph ได้เช่นกัน (เพราะเว็บจำนวนมาก โดยเฉพาะสาย WordPress ทำมารองรับ Open Graph อยู่แล้ว) แต่จะมองหาข้อมูลจาก Open Graph เป็นอันดับสอง รองจาก Microdata ครับ

ดังนั้นคนที่ทำเว็บ และรองรับ Open Graph อยู่แล้ว ก็ควรจะใช้ได้ทั้ง Facebook/Google+ แต่กรณีของ Blognone ที่ไม่มี Open Graph (แต่ดันใช้ได้กับ Facebook) ก็ต้องทำข้อมูลเพิ่ม เพื่อจะให้ Google+ อ่านค่า metadata ให้ถูกต้องนั่นเอง

Keyword:

Comments

pittaya

9 November, 2011 - 11:29

Facebook มันยังดูดรูปของ blognone ไม่ค่อยถูกนะ ส่วนใหญ่มันชอบไปเอา badge มาโชว์อะ

mk

10 November, 2011 - 09:35

@pittaya Drupal มันเรนเดอร์ node แยกจาก page ดังนั้นจะเอา og:image ไปฝังบน head มันยากเหมือนกันครับ

Add new comment