How to Create Google+ Snippet

นั่งงมอยู่ครึ่งบ่าย ตอนนี้หายงงแล้วมาเขียนไว้หน่อย กันลืม ในโลกยุค 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](https://developers.google.com/+/plugins/+1button/#plus-snippet) (อ่านข่าวนี้ประกอบด้วย [กูเกิลเริ่มเชื่อม +Snippets ระหว่าง Google+ กับบริการอื่นๆ ของตัวเอง](http://www.blognone.com/news/26389/%E0%B8%81%E0%B8%B9%E0%B9%80%E0%B8%81%E0%B8%B4%E0%B8%A5%E0%B9%80%E0%B8%A3%E0%B8%B4%E0%B9%88%E0%B8%A1%E0%B9%80%E0%B8%8A%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%A1-snippets-%E0%B8%A3%E0%B8%B0%E0%B8%AB%E0%B8%A7%E0%B9%88%E0%B8%B2%E0%B8%87-google-%E0%B8%81%E0%B8%B1%E0%B8%9A%E0%B8%9A%E0%B8%A3%E0%B8%B4%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AD%E0%B8%B7%E0%B9%88%E0%B8%99%E0%B9%86-%E0%B8%82%E0%B8%AD%E0%B8%87%E0%B8%95%E0%B8%B1%E0%B8%A7%E0%B9%80%E0%B8%AD%E0%B8%87)) คอนเซปต์ก็ตรงไปตรงมาครับ เราต้องบอก G+ ว่าส่วนไหนของเพจเป็น metadata โดยระบุ "แท็ก" เพิ่มเติมลงไปเล็กน้อย (ใครที่คุ้นกับ [Microformat](http://www.isriya.com/tags/microformat) คงเข้าใจว่ามันเหมือนๆ กัน) อย่างไรก็ตาม ภาษาที่ใช้กำหนด metadata ให้กับ G+ เรียกว่า Microdata ซึ่งเป็นข้อตกลงร่วมกันระหว่างกูเกิล ยาฮู ไมโครซอฟท์ ([อ่านข่าว](http://www.blognone.com/news/24099/%E0%B8%81%E0%B8%B9%E0%B9%80%E0%B8%81%E0%B8%B4%E0%B8%A5-%E0%B9%84%E0%B8%A1%E0%B9%82%E0%B8%84%E0%B8%A3%E0%B8%8B%E0%B8%AD%E0%B8%9F%E0%B8%97%E0%B9%8C-%E0%B8%A2%E0%B8%B2%E0%B8%AE%E0%B8%B9-%E0%B8%88%E0%B8%B1%E0%B8%9A%E0%B8%A1%E0%B8%B7%E0%B8%AD%E0%B9%80%E0%B8%9B%E0%B8%B4%E0%B8%94%E0%B8%95%E0%B8%B1%E0%B8%A7-schemaorg-%E0%B8%81%E0%B8%B3%E0%B8%AB%E0%B8%99%E0%B8%94%E0%B8%9F%E0%B8%AD%E0%B8%A3%E0%B9%8C%E0%B9%81%E0%B8%A1%E0%B8%95%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%9A%E0%B8%99%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A)) และมีสเปกอยู่บนเว็บ [schema.org](http://schema.org/docs/schemas.html) ให้เลือกใช้ตามต้องการ (เช่น แท็กสำหรับหนัง แท็กสำหรับหนังสือ แท็กสำหรับสินค้า) กรณีของ 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](http://schema.org/BlogPosting)) - __itemprop__ มีสามอัน เลือกใส่เองตามความเหมาะสม (วิธีการใส่ก็ขึ้นกับ CMS แต่ละตัวว่ายากง่ายแค่ไหน) ผลลัพธ์ดีขึ้นทันตา __หมายเหตุ:__ แท็กต่างๆ ตามมาตรฐานของ schema.org เป็นข้อตกลงระหว่างเว็บค้นหา 3 รายใหญ่ แต่ไม่รวม Facebook ที่ใช้แท็กของตัวเองที่เรียกว่า [Open Graph Protocol](http://ogp.me/) หลักการทำงานของ 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 ให้ถูกต้องนั่นเอง