大部分人應該都會有注意到，Facebook 上在分享網誌的時候，會顯示出該網頁的文章摘要以及圖片的縮圖，一般的情形，這是 Facebook 的機器人去分析網頁後，抓出來的資訊，不過對於網站主人來說，其實是可以主動提供這些資訊的，也就是說你可以提供不一樣的網頁標題，摘要內容和要顯示的縮圖給 Facebook 的讀者，Facebook 在 2011 年的 F8 中發表了一個新的 Open Graph Protocol，藉由預先定義好的 meta 標籤來提供這些可以給 Facebook 機器人接收的資訊，使用上很簡單，就是插入一組 meta 標籤在 head 裡面，看起來如下：
<meta property="og:title" content="Device Pixel Ratio" />
<meta property="og:url" content="http://blog.othree.net/log/2012/10/28/device-pixel-ratio/" />
<meta property="og:type" content="article" />
<meta property="og:description" content=" 這兩天又對 blog 做了一些加強..." />
<meta property="og:image" content="http://farm9.staticflickr.com/8463/8128174518_387a27b3dd.jpg" />這組標籤放在你的 head 裡面，如果有人在分享的 facebook 上分享的話，看起來就如下圖：
Open Graph Protocol 定義的標籤很好理解，也沒有複雜的結構，所以對於開發人員是非常友善，不過其實我是不太樂觀其成的，主要原因是我覺得它是個被 Facebook 控制的封閉標準，網路標準的發展最不希望發生的就是某個標準受至於特定的人或公司，不過其實一年過後的今天，我對 Open Graph Protocol 有改觀不少，也讓我願意在自己的網站上加入這樣的標籤，會讓我改觀的原因有兩個，一是雖然 Facebook 沒有明說過，不過 Open Graph Protocol 的網站上其實是一點 Facebook 的色彩都沒有的，如果不知道前因後果的話，其實不容易發現這套格式是由他們家提出，這讓我覺得他們有希望把這個格式推出去，而不是只限於 Facebook 使用，當然這一切可能都是商業陰謀，所以直到 Twitter 推出了 Twitter Cards 之前，我都還是不敢貿然進場。
今年 Twitter 推出一項新的 API 規格，叫做 Twitter Cards，可以把他想成是 Open Graph Protocol 的 Twitter 版，meta 標籤的部分看起來就像：
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Device Pixel Ratio" />
<meta name="twitter:url" content="http://blog.othree.net/log/2012/10/28/device-pixel-ratio/" />
<meta name="twitter:description" content=" 這兩天又對 blog 做了一些加強..." />
<meta name="twitter:image" content="http://farm9.staticflickr.com/8463/8128174518_387a27b3dd.jpg" />這張 Twitter Card 結果會在 Twitter 呈現成如下圖的樣子：
Twitter Cards 基本上也和 Open Graph Ptotocol 一樣定義了整套相近的標籤屬性，像是 title, desciption, url, image 等就是兩種規格都有的屬性，而最讓我意外的一件事情是，Twitter Card 相容於 Open Graph Protocol，大部分兩種規格都有的屬性，Twitter Cards 都可以支援 Open Graph Protocol 已經寫好的 meta 標籤，所以我如果要同時支援 Twitter 和 Open Graph 不用兩套重複的內容都寫出來，只要先寫 Open Graph Protocol，然後再把 Twitter 不足的部分補上去就可以了：
<meta name="twitter:card" content="summary" />
<meta property="og:title" content="Device Pixel Ratio" />
<meta property="og:url" content="http://blog.othree.net/log/2012/10/28/device-pixel-ratio/" />
<meta property="og:type" content="article" />
<meta property="og:description" content=" 這兩天又對 blog 做了一些加強..." />
<meta property="og:image" content="http://farm9.staticflickr.com/8463/8128174518_387a27b3dd.jpg" />其實這樣的相容是可以用語意網的觀念來解釋的，在語意網的世界中，描述事物的框架和事物本身的說明與資訊兩者是分開的，前者基本上是 RDF 標準，在這篇文章的例子就只是簡單的 meta 標籤，而後者也稱為知識本體（ontology），兩者基本上是完全獨立，而知識本體包括了語彙以及語彙之間的關係，在 Open Graph Protocol 中，像是 og:title, og:type, og:decrition 等都是屬於知識本體的語彙，分別有著標題、類別和敘述的意義，而 Twitter Cards 則是瞭解兩者間語彙的關係，建立了像是og:title = twitter:title,og:description = twitter:description這樣的關係，因此兩種屬性就是等價的存在。
語意網的部分就先到這部分暫停，下一篇繼續介紹些新東西，回到 Open Graph Protocol，其實我對他有些不滿意的地方，就是 title, description 和 url 這三個屬性，其實在 HTML 裡已經早就有定義好的地方會記錄了，title 當然就是 title 標籤， description 就是 meta description，url 則是 canonical url，不瞭解是什麼原因才讓他們捨棄使用既有的資訊，結果是雖然 Twitter Cards 相容 Open Graph Protocol，但是網頁的 meta data 還是會有重複的資料，實在很可惜，當然我想到一個可能性，就是語意網的支援。
另外一個要提的就是兩個規範都有開發用的預覽工具，分別是 Facebook Object Debugger 和 Twitter Cards Preview Tool，Facebook 對 Open Graph Protocol 的支援是完全開放的，不過 Twitter Cards 目前是白名單機制，似乎是有計畫要完全開放，不過沒有時程，目前是要先申請，台灣我目前只知道 @Toomore 的 影像紀錄區 申請有過，所以如果有人分享影像紀錄區的作品的話，在 Twitter 上就可以直接預覽到照片了！