最近做一個project, 網站需要利用social media 作sharing, 基於de-facto standard, 故須要於網頁中加入Open Graph Protocal.
OpenGraph 是Facebook 發明的一套準則, 可讓不同的search engine 更有效地收集到網頁中的資訊. 現在除了Facebook, WhatsApp 都有應用到. 當將URL 放到message box 上, 它便會讀取網頁上的OG tag, 從而讀取 data render UI.
於<HTML> tag 內, 須加入prefix 作識別:
<html prefix="og: http://ogp.me/ns#">
所以有關OpenGraph 的<Meta> tag, 稱為OG tag, 放於<Head> tag 內:
<head> <meta property="og:title" content="The Rock (1996)" /> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /> <meta property="og:site_name" content="IMDb"/> <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" /> <meta property="og:description" content="Directed by Michael Bay. With Sean Connery, Nicolas Cage, Ed Harris, John Spencer. A mild-mannered chemist and an ex-con must lead the counterstrike when a rogue group of military men, led by a renegade general, threaten a nerve gas attack from Alcatraz against San Francisco." /> </head>
用Facebook 做例子, 它render 到的Share Card 如下:
其實還有好多進階的應用. 可以參考reference.
而Facebook 本身亦有提供Debugger, 可用作檢查shared outcome.
Reference
The Open Graph protocol, 2014 ,http://ogp.me/
打造方便分享的網頁 open-graph-protocol篇, 2010, http://epromotor.pixnet.net/blog/post/30997291-%E6%89%93%E9%80%A0%E6%96%B9%E4%BE%BF%E5%88%86%E4%BA%AB%E7%9A%84%E7%B6%B2%E9%A0%81%7Copen-graph-protocol%E7%AF%87
Facebook Sharing Debugger, https://developers.facebook.com/tools/debug/
Leave a Reply