Open Graph 資料視覺化
tags: Web Design
Common 目的
- 當有人分享我們的網站時，可以按照我們地要求，預設要顯示給觀眾的縮圖、標題、網址…等等。
- 這樣說可能還是有人不懂，以下實際舉個分享網站的例子
- 如果網站沒有寫 Open Graph 資料視覺化 的相關程式碼，基本上是不會顯示任何資料視覺化的效果，除非分享的網站(e.g. Facebook)有自動擷取縮圖、標題的功能，才會有資料視覺化的效果
- 正因為 Open Graph 是Facebook 定義的協定，所以才會有自動擷取縮圖、標題的功能
- 這些年來也陸續有許多網路平台支援了，因此Open Graph Protocol 也就變成對網頁很重要的東西
- 網路平台有哪些：Social Media Image Size Cheat Sheet
Code 程式碼
- 通常 Open Graph 的程式碼位於
<head>標籤之下的<meta>標籤，以下為範例：
<meta name="mobile-web-app-capable" content="yes">
meta 屬性
- 常用屬性：
og:title：文件標題og:type：文件類型，e.g. website, video, movieog:image：文件縮圖og:url：文件網址
- 選用屬性：
og:audio：隨著文件的音樂網址og:video：隨著文件的影片網址og:description：文件的詳細內容敘述og:site_name：網站名稱
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
LBS服務 的 meta 屬性
- LBS服務：通過行動業者的無線電通訊網路或外部定位方式取得行動終端用戶的位置訊息
- 地區屬性 (LBS服務)：
og:latitude：緯度og:longitude經度country-name：國家名稱og:postal-code：郵遞區號og:locality：所在城市
- 聯絡資訊屬性 (LBS服務)：
og:email：emailog:phone_number：電話號碼
測試網站是否有使用 Open Graph
-
使用 Facebook 提供的 debug：https://developers.facebook.com/tools/debug/
-
測試結果
Reference 參考資料
- 官方文件：http://ogp.me/
- Open Graph？跟資料視覺化有什麼關係？
http://blog.infographics.tw/2015/03/open-graph-and-data-visualization/ - 打造方便分享的網頁|Open Graph Protocol篇：http://epromotor.pixnet.net/blog/post/30997291-打造方便分享的網頁|open-graph-protocol篇
- LBS服務：https://zh.wikipedia.org/zh-tw/基于位置的服务
沒有留言:
張貼留言