เตรียมเว็บให้โลดแล่นบนโลก Social อย่างสง่างามด้วย Facebook OG/Twitter Cards
เชื่อว่าหลายๆคนเวลาไถๆ Facebook แล้วเห็นไอ้ม่วงๆแบบนี้ แล้วจะต้องหยุดกึกทันทีว่าจะมีมาม่าอะไรแซ่บๆให้อ่านเล่นบ้าง
ซึ่งอันนี้มันไม่ได้มาเองนะ แต่เราต้องตั้งค่าเว็บเราให้ Facebook มันรู้ด้วย! ดังนั้นถ้าเราทำเว็บอะไรของตัวเองเช่นเว็บ official ของเกมหรือของสินค้าตัวเอง ยุคนี้ห้ามลืมเตรียมอะไรแบบนี้ไว้ก่อนเผื่อคนแชร์ไปเยอะขึ้นมาจะได้จี๊ดๆหน่อย… ดังนั้นเราจะมาเรียนรู้กัน
Open Graph protocol
โลโก้นี่ไม่มีหน้ายิ้มเพราะนั่นเติมเข้าไปเอง Facebook เจ้าแห่ง social ทั้งทีก็เลยร่างมาตรฐานขึ้นมาเองซะเลยหวังว่าเว็บทั่วโลกจะเอาไปใช้กันให้หมด แต่หลักๆก็คือไว้สำหรับ Facebook เองนั่นแหละ แนวคิดคือเขาอยากให้ดูแค่ <meta> ที่อยู่ใน <head> ก็สามารถรู้ข้อมูลของเว็บคร่าวๆได้พอจะแสดงบน social network ได้ครับ
ปกติ <meta> ก็ได้ใช้บ้างอยู่แล้ว แต่ทีนี้ Facebook ก็เลยคิดของตัวเองขึ้นมาใหม่เป็น <meta property=”og:____”> ขึ้นมา มีอะไรบ้างเชิญ http://ogp.me
แต่ที่สำคัญๆก็นี่ครับ
og:title
ชื่อของหน้าๆนี้ จะเห็นเป็นตัวหนาบน Facebook
<meta property=”og:title” content=”Mel Cadence — Public music submission” />og:type
ประเภทของ object ซึ่ง Facebook เขาหวังว่าไม่ใช่แค่เว็บ แต่วิดิโอหรือเพลงที่มีหน้าเว็บก็เอาไปแปะได้ ตอนนี้ของผมเป็นเว็บก็เลยเขียนว่า website ไปก่อน มีอะไรให้ใส่บ้างลองไปดูใน http://ogp.me น่ะ (ถ้าผิดจะเป็นไงไม่รู้ไม่เคยลอง)
<meta property=”og:type” content=”website” />og:image
อันนี้ตัวสำคัญเลยเพราะจะเป็นภาพอหล่างฉ่างที่จะขึ้นบน Facebook ซึ่งผมจะพูดเรื่องนี้อีกที ตอนนี้เอาเป็นว่า ภาพที่ว่าต้องทำไว้โดยเฉพาะแล้วอัพโหลดไว้ที่ไหนซักแห่งด้วย ถ้าปล่อยให้มันควานหาจากหน้าเว็บเลยส่วนมากผลลัพธ์จะไม่น่าดูเท่าไหร่
<meta property=”og:image” content=”http://exceed7.com/mel-cadence/images/og.png" />og:url
เป็น URL ของหน้านี้ ถามว่าแค่นี้ FB รู้เองเลยไม่ได้เหรอ คือบางทีหลายๆ URL ก็ได้ของชิ้นเดียวกัน ดังนั้นเขาเลยขอให้บอก URL หลัก (“Canonical URL”) ให้รู้แบบ explicit ด้วยครับ (https://support.google.com/webmasters/answer/139066?hl=en) ความสำคัญคือ Facebook จะนับ Share/Like โดยอิงจาก URL นี้เป็นหลักครับ เพราะงั้นเราสามารถทำ og object ที่รวบจำนวน Share/Like รวมเป็นหนึ่งเดียวได้ ซึ่งจำนวนที่ว่าจะเอาไปโชว์ในปุ่ม Share/Like ได้ด้วย
<meta property=”og:url” content=”http://exceed7.com/mel-cadence/submission/en.html" />og:site_name
อันนี้ชื่อ website หลัก เขาบอกว่า ทุกหน้าของเว็บ ถ้าเป็นของเว็บเดียวกันล่ะก็ควรจะมีค่านี้เหมือนกัน
<meta property=”og:site_name” content=”Mel Cadence” />og:description
อันนี้ก็สำคัญเพราะจะเป็นตัวเล็กๆข้างใต้ og:title ครับ
<meta property=”og:description” content=”Public music submission for the first launch version, now open!” />รวมแล้วสมมติว่าพิมพ์แบบนี้ไว้
เวลาแชร์มันจะออกมาเป็นแบบนี้
จะเห็นว่า <title> ไม่มีผลกับของที่แชร์บน Facebook เลยครับ เพราะ Facebook เอา og:title ไว้ก่อน แปลว่าเราสามารถเปลี่ยนสิ่งที่อยากให้คนเห็นบน Facebook ให้ต่างกับหัวเว็บในเว็บจริงๆได้ครับ
The Art of og:image
ทีนี้ประเด็นเรื่องไอ้ภาพ og:image ก็คือ จะแนะนำว่าให้ออกแบบเป็นจตุรัส ที่โดน crop เหลือแนวนอนตรงกลางแล้วยังดูดีอยู่ เพราะว่าใน Facebook บน timeline จะเป็นแนวนอน แต่ยังมีที่ๆจะเป็นจตุรัสด้วยก็คือใน chat box ครับ!
ดังนั้นเรามาออกแบบให้แยบยลกันเถอะ เช่นประมาณนี้
จะเห็นว่าไอ้ตัวละคร 2 ตัวนั้นก็ยังดูเหมือนงอกออกมาจากขอบภาพได้ทั้ง 2 การแสดงผล
ภาพในตัวอย่างแรก อันที่จริงก็ออกแบบเป็นจตุรัสไว้ครับ ถ้าตามลิงค์ใน og:image ไปก็จะเห็นว่าเป็นภาพนี้ (เล็งไว้อย่างดีให้โดน crop แล้วตาของตัวละครไม่หาย)
หรือใครจะออกแบบเป็นแนวนอนก็ได้นะครับ ซึ่งตอนพิมพ์ใน chat box จะโดน crop ข้างๆออกจนเป็นจตุรัสเอง ตัวอย่างก็คือ pantip.com นั่นเองครับ
<meta property="og:image" content="//ptcdn.info/pantip/pantip_logo_02.png">ลิงค์ไปดูภาพที่ว่าคือ
https://ptcdn.info/pantip/pantip_logo_02.png
ซึ่งถ้าใน timeline ก็คงจะอย่างที่เราเห็นกันบ่อยๆ แต่ถ้าใน chat box จะเป็นแบบนี้
ซึ่งถ้าไม่น่าเกลียดอะไรก็ ok ครับ
วิธี Debug
ทีนี้ Facebook มันมีปัญหานึงคือ ถ้าเจอ Open graph object ใหม่ที่มันไม่เคยเจอมาก่อน มันจะไปอ่าน og tag มา (“Scrapping”) cache ไว้ในระบบ ถ้าใครกำลังทำเว็บอยู่แล้วเผลอแชร์ลิ้งค์เล่นๆ (อาจจะเพื่อเทส) แล้วมันจะติดอยู่แบบนั้นไปอีกนานแม้ว่าเราจะอัพเดทแล้วก็ตาม
แต่เราสามารถสั่งให้ Facebook อ่านข้อมูลใหม่ได้ที่ Facebook Open Graph Debugger นี่ครับ!
https://developers.facebook.com/tools/debug/
จะเห็นปุ่มที่เขียนว่า Scrape Again ที่กดให้มันอ่านมาใหม่ได้ครับ จากภาพจะเห็นว่าหน้านี้เป็นข้อมูลของเมื่อ 1 ชม. ที่แล้ว
คำเตือน! คือเราไม่สามารถอัพเดทอันที่คนแชร์ไปแล้ว โพสต์ไปแล้วได้ครับ! เพราะงั้นเอาให้ชัวร์ก่อนดีกว่าก่อนเปิดเผยเว็บไซต์ จริงๆอันที่แชร์ไปแล้วก็เหมือนจะมีเวลาที่มันจะอัพเดทให้อยู่ แต่รู้สึกว่าจะนานเป็นสัปดาห์เลย
แล้วก็อีกคำเตือนนึงคือ URL ที่ใส่ในหน้านี้ ถ้าเป็นหน้าที่กะจะ resolve ไป index.html ต้องมี / ตามหลังด้วยนะครับ ถ้าไม่มี / มันจะพยายาม redirect อย่างที่เห็นในภาพ อันนี้ ไม่แน่ใจว่าถ้าไม่มี URL ที่ถูกต้องใน og:url มันจะได้มั้ย
พูดถึงเรื่อง og:url ที่เคยบอกไปว่ามันนับจำนวน Share/Like ไว้ด้วย ตัวอย่างเช่น ผมมีเว็บ 2 ภาษา คืออันที่มี th กับไม่มี (ทดลองแบบไม่ใส่ / ปิดท้ายเพื่อทดสอบ redirect ให้ดู)
ตรงนี้ผมพลาดที่ og:url ไม่เหมือนกัน ทำให้เป็นคนละ Open Graph object กัน จำนวน Like จากทั่วโลก Facebook ก็เลยเก็บแยกกันไปครับ
แล้ว Twitter ล่ะ!
ทาง Twitter ก็มีสิ่งที่เรียกว่า “Cards” เหมือนกันครับ ซึ่งเวลาแชร์ลิงค์ที่มีอำนาจวิเศษแล้วมันจะขึ้นมาเป็นแบบนี้
จะเห็นว่ามันเป็นจตุรัสครับ! ดังนั้น เห็นความสำคัญของการออกแบบ og:image เป็นจตุรัสเพิ่มขึ้นอีกจุดหนึ่งแล้วนะครับ
ซึ่งทำไงจะวิเศษได้ โชคดีที่ Twitter ก็ยอมร่วมใจใช้มาตรฐาน Open Graph protocol ของ Facebook ด้วยเป็นบางส่วน ใครที่ทำให้เวิคบน FB แล้วก็เลยได้ของ Twitter ไปด้วยถ้าขี้เกียจจะทำต่อ
แต่ Twitter ก็เหมือนจะมีของตัวเองเยอะเหมือนกัน อะไรทำไม่ได้จาก og บ้าง ไปดูตารางหน้านี้เลย https://dev.twitter.com/cards/markup จะเห็นว่า Twitter ก็พยายามจะสร้าง name=”twitter:___” ของตัวเองขึ้นมา (ไม่ใช่ property= เหมือนกันอีกต่างหาก!) ซึ่งบางอันใช้ og แทนได้ เบื่อจริงๆแต่ละคนคิดจะสร้างมาตรฐานของเจ้าตัวขึ้นมา เฮ่ออ 555
มาดูอีกตัวอย่างนึง ซึ่งเป็น Cards ของหน้านี้ที่อ่านอยู่นี่แหละ ซึ่งโชคดีที่เว็บ Medium ที่ผมใช้อยู่นี้มันสร้าง meta tag ให้เอง ถ้าลองแชร์แล้วปรากฏว่าเป็นแบบนี้
โอ๊ะ! ทำไมมันใหญ่ได้ แล้วก็เป็นแนวนอนด้วยไม่ใช่จตุรัส นั่นเป็นเพรา tag นี้ครับ
<meta name="twitter:card" content="summary_large_image">ซึ่งอันนี้ คนที่ทำแต่ของฝั่ง Facebook ไว้จะได้ content="summary"ไป (ไม่ large_image) มันเลยแสดงผลแบบจตุรัสเล็กแทน ถ้าใครอยากได้ใหญ่ๆก็คงต้องใส่ tag ของ Twitter ไปด้วยครับ มี Cards แบบไหนอีกบ้าง ไปดูที่นี่ได้ https://dev.twitter.com/cards/types
แล้วก็แปลว่าเราสามารถแยกใช้ของ Twitter ให้ไม่เหมือน Facebook ได้ครับ จะเห็นว่าที่ Pantip ทำ เขาใช้ภาพของ Twitter ไม่เหมือนกันกับ og:image
ดังนั้นเวลาแชร์ใน Twitter จะเห็นเป็นภาพ https://ptcdn.info/pantip/pantip_logo.png
ซึ่งเป็นจตุรัสครับ (แล้วก็ เขาเลือกแบบ “summary” เฉยๆ ก็จะเห็นเป็นจตุรัสเล็กถูกต้อง)
แล้วก็ มีหน้า Debug เหมือนกันครับ ไปที่ Card Validator นี่เลย
https://cards-dev.twitter.com/validator
จะเห็นว่าไม่เหมือนภาพแรกที่ให้ดู เพราะว่าอันนั้นแชร์ไปก่อนตั้งนานแล้วก่อนจะมาเปลี่ยน og: ต่างๆทีหลัง
ซึ่งหลักการก็เหมือนกันคือ อันที่แชร์ไปแล้วมันจะไม่สามารถแก้ได้ ต้องรอ Twitter อัพเดทให้ประมาณทุกๆสัปดาห์
เรื่อง meta tag ยังมีอื่นๆอีกมาก เช่นพวกที่ผูกกับ App Store/Google Play ให้รู้ว่าหน้านี้ มีแอพให้โหลดด้วยนะ อะไรงี้ แนะนำให้ไปศึกษาไว้ครับ แต่บทความนี้อยากเน้น og เป็นหลัก