Drupal with Open Graph Meta Tags

ความเดิมจากตอนก่อน [How to Create Google+ Snippet](http://isriya.com/node/3600/how-to-create-google-snippet) ทุกวันนี้การแชร์โพสต์ลงใน social network กลายเป็นเรื่องธรรมดาสามัญไปแล้ว เว็บไซต์ที่เดิมที่ต้อง optimized for search engine ก็ต้องปรับตัวให้เพิ่มการ optimized for social network ด้วย ซึ่งจุดนี้ CMS เองยังก้าวตามไม่ทัน และต้องลงปลั๊กอินช่วยอยู่บ้าง จุดสำคัญของการ optimized for social network (ในที่นี้คือ Facebook/Google+) คือต้องแสดง "ภาพ" เป็นตัวอย่างว่าลิงก์ปลายทางจะมีอะไรบ้าง เพื่อเรียกลูกค้าให้เข้าไปชมดู (แน่นอนอยู่แล้วว่า "มีภาพ" มันชวนกดกว่า "ไม่มีภาพ") ปัญหาก็คือหลายครั้งหลายตอน (ซึ่งเป็นส่วนใหญ่ด้วย) ผมเขียนบล็อกที่ไม่มีภาพประกอบ เหตุผลก็เพราะง่าย และเนื้อหาของบล็อกนั้นอาจไม่จำเป็นต้องมีภาพประกอบอยู่แล้ว แต่มันก็เป็นอุปสรรคต่อการแชร์เนื้อหาลงใน Facebook/Google+ ทำให้ไม่ชวนกดเข้ามาอ่านอยู่บ้าง ทางแก้ก็คือเซ็ต default image thumbnail สำหรับการแชร์ลงใน social network โดยเฉพาะขึ้นมา ภาพนี้จะไม่แสดงในหน้าเว็บ แต่จะปรากฏอยู่ในแท็ก og:image ใน head ของเว็บ ซึ่งเป็นแท็กที่ Facebook จะมองหาเมื่อมีการแชร์โพสต์ในระบบ (รายละเอียดดูใน Open Graph Protocol) ส่วนวิธีการก็ไม่ยากสำหรับคนใช้ Drupal เพราะมีคนทำโมดูล Open Graph meta tags ไว้ให้แล้ว ติดตั้งเสร็จก็ใช้งานได้ทันที วิธีการตั้งค่าอยู่ใน Configuration โดยเลือกชนิดของเนื้อหาที่ต้องการใส่ Open Graph meta tags, ตั้งชื่อเว็บ, เลือกชนิดของข้อมูล (กรณีของเราเลือกเป็น blog แต่ถ้ามีข้อมูลชนิดอื่นก็เลือกให้เหมาะสม) ส่วนรูปภาพก็อัพโหลดขึ้นไปแล้วใส่ URL ในช่อง fallback image ลองทดสอบดู ผลก็คือรูปขึ้นตามที่คาด ทั้งบน Facebook และ Google+ วิธีการหารูปของทั้ง Facebook/Google+ คือมันจะ crawl เพื่อดูว่าในบล็อกแต่ละอันของเรามี "ภาพขนาดใหญ่" ที่น่าจะเป็นภาพประกอบเนื้อหาหรือไม่ ถ้ามีก็ใช้ภาพนั้นเป็น thumbnail ใน snippet แต่ถ้าไม่มีก็จะเรียกภาพจาก og:image ซึ่งเป็นภาพที่เราตั้งค่าไว้นั่นเอง หมายเหตุ: โมดูลตัวนี้ยังอนุญาตให้เรา override ค่ามาตรฐานที่เซ็ตไว้ในหน้า Configuations โดยจะเพิ่มตัวเลือกหมวด Open Graph meta tags ให้ใส่ข้อมูลลงไปเองตอน Create/Edit Post ครับ