HTML5擴充之微資料與豐富網頁摘要

標籤：標籤   規範   lan   簡單例子   cin   連結   bank   odata   gif   

一、微資料是？

一個頁面的內容，例如人物、事件或評論不僅要給使用者看，還要讓機器可識別。而目前機器智能程度有限，要讓其知會特定內容含義，我們需要使用規定的標籤、屬性名稱以及特定用法等。舉個簡單例子，我們使用<h1>標籤包裹頁面標題資訊就是為了讓機器識別（搜尋引擎 – SEO）。

而微資料是什麼呢？在我看來，微資料也是為了方便機器識別而產生的東西。其有特定的規範，有特定的格式。可以豐富搜尋引擎的網頁摘要。

先來看看比較官方的解釋：HTML5 微資料規範是一種標記內容以描述特定類型的資訊，例如評論、人物資訊或事件。每種資訊都描述特定類型的項，例如人物、事件或評論。例如，事件可以包含 venue、starting time、name 和 category 屬性。

微資料使用 HTML 標籤（常為 <span> 或 <div>）中的簡單屬性為項和屬性指定簡要的描述性名稱。

上面的釋義過於學術化，我們可以將其擱置一邊，先看個簡單的關於微資料的例子。平時，我們要在頁面上顯示對一個人的描述，HTML代碼可能如下：

<div>  我的名字是王富強，但大家叫我小強。我的個人首頁是：  <a href="http://www.example.com">www.example.com</a>  我住在上海市富貴新村。我是工程師，目前在財富科技公司上班。</div>

而如果使用針對人物的微資料標記，則HTML會如下：

<div itemscope itemtype="http://data-vocabulary.org/Person">  我的名字是<span itemprop="name">王富強</span>，  但大家叫我<span itemprop="nickname">小強</span>。  我的個人首頁是：  <a href="http://www.example.com" itemprop="url">www.example.com</a>  我住在上海市富貴新村。我是<span itemprop="title">工程師</span>，  目前在<span itemprop="affiliation">財富科技公司</span>上班。</div>

您會發現，HTML代碼量多了不少，還出現了很多自訂的屬性，如itemscope, itemtype, itemprop等。這些屬性就是方面機器識別的特定的標記。其含義等依次如下：
itemscope
定義一組名值對，稱為項。

itemprop=”屬性名稱”
添加一個資料項目屬性。這個屬性名稱可以是個單詞或是個URL，與元素包含的文本值相關：

• 對於大部分元素，屬性名稱值就是元素標籤裡面的文本值（不是所有標籤）。
• 對於有URL屬性的元素，該值就是URL（如<img src="">, <a href="">, <object data="">等）。
• 對於<time>元素，該值就是datetime=""屬性。
• 對於<meta itemprop="" content="">， 該值就是content=""屬性。

itemref=””
允許微資料項目通過指向特定ID（含有需要屬性的元素）包含非後代屬性。

itemtype=””
微資料定義的類型。其值為URL，扮演詞彙表名稱的作用。

itemid=””
允許詞彙表給微資料項目定義一個全域識別碼，例如書的ISBN數值，在同樣元素上使用itemid作為資料項目的itemscope和itemtype屬性。

二、微資料文法

itemscope和itemprop
先來個小例子：

<p itemscope>下周我要去<span itemprop="name">韓紅剛</span>家拔蘿蔔</p>

<p>元素上的itemscope使其成為了一個微資料項目，其子項目上itemprop屬性的值name為詞彙表中的一個關鍵屬性。一個微資料項目至少有一個驗證的itemprop.

itemprop後面的名稱可以是單詞，也可以是URL，使用URL讓這個名稱全域唯一。如果使用單詞的話，最好使用詞彙表，這個單詞在該詞彙表中有定義，同樣可以讓名稱唯一。

itemprop值
對於一些元素，itemprop值來自元素的屬性，像是datetime屬性或是content屬性。還是拔蘿蔔的例子：

<p itemscope><time itemprop="date" datetime="2011-12-05">下周</time>我要去 <a itemprop="url" href="http://weibo.com/u/2499612703">韓紅剛</a>家拔蘿蔔</p>

定義了兩個itemprop下的屬性值url和date，所包含的值就是一個url地址（不是元素內的文本值韓紅剛）和一個特定格式的時間。

在微資料中，下面的元素以它們的URLs為值：

• <a href="">
• <area href="">
• <audio src="">
• <embed src="">
• <iframe src="">
• <img src="">
• <link href="">
• <object data="">
• <source src="">
• <video src="">

相反，以下HTML5元素URL包含屬性不作為屬性值使用：

• <base href="">
• <script src="">
• <input src="">

上面兩個例子，我們可以來個簡單的整合，如下：

<p itemscope><time itemprop="date" datetime="2011-12-05">下周</time>我要去 <a itemprop="url" href="http://weibo.com/u/2499612703"><span itemprop="name">韓紅剛</span></a>家拔蘿蔔</p>

將itemprop="name"嵌入在連結之中了。

嵌套項
我們可以給包含itemprop的元素添加itemscope插入嵌套項。

<p itemscope><span itemprop="name">五月天</span>主唱是<span itemprop="members"  itemscope><span itemprop="name">阿信</span>。</span></p>

定義了一個項，有兩個關鍵字屬性：name和members。該name是五月天，members則是嵌套項，包含了一個值為阿信的屬性name。注意到members並無文本值。

像上面p標籤這種父輩元素沒有任何一個微資料項目的微資料項目稱為“頂級微資料項目”。微資料API返回的是頂級資料項目及其對應的屬性，以及其中嵌套的子資料項目。

多屬性
先看例子：

<span itemprop="members" itemscope>前S˙H˙E 的成員是  <span itemprop="name">任家萱</span>，  <span itemprop="name">田馥甄</span>和  <span itemprop="name">陳嘉樺</span>.</span>

項目可以包含不同值的多個屬性。例如上例name屬性定義了3個值：任家萱、田馥甄和陳嘉樺。

同一個元素同樣也可以有多個屬性關鍵名稱（用空格分隔），例如下面這個例子：

<p itemscope><span itemprop="name call">志玲姐</span> 是個美女。</p>

“志玲姐”即是名字，又是稱謂。

通過itemref頁面內引用
還是先看個例子吧：

<p itemscope itemref="band-members">後天我要去看<span itemprop="name">S˙H˙E</span>的演唱會，好興奮哈！</p>……<span id="band-members" itemprop="members" itemscope>S˙H˙E 的成員是  <span itemprop="name">任家萱</span>，  <span itemprop="name">田馥甄</span>和  <span itemprop="name">陳嘉樺</span>.</span>

上面的定義通過引用ID band-members包含了members項的三個成員名稱屬性，每個都是不一樣的值。

使用meta新增內容
如果你想添加的文本並不是頁面內容的一部分，你可以在<meta>元素上使用content屬性：<meta itemprop=""content="">

舉個小例子：

<p itemscope><span itemprop="name" itemscope>   鐘欣桐<meta itemprop="likes" content="twins成員">  </span>攝影愛好者陳老師的粉絲。</p>

不會，有些遺憾的是，某些瀏覽器會自動把<meta>元素移動到head標籤中。比較靠譜的做法是使用itemref做頁面內引用，這樣即使瀏覽器移除了，一些工具啥的還是能夠識別出微資料。具體做法如下：

<p itemscope><span itemprop="name" itemscope itemref="meta-likes">   鐘欣桐<meta id="meta-likes" itemprop="likes" content="twins成員">  </span>攝影愛好者陳老師的粉絲。</p>

項類型(itemtype)及全域唯一名字
通過itemtype，我們可以給微資料項目指定一種類型，這個屬性需要使用在含itemscope的元素上。itemtype的值是個URL地址，代表了微資料使用的詞彙。請注意，這個地址只能是文本字串，用來唯一標示詞彙表，同時，該地址不一定非要指向真是的網頁地址（當然，指向最好了）。這樣我們就可以使用詞彙表中的name名稱作為itemprop名稱做些定義了。

例如，下面這個例子。

<p itemscope itemtype="http://schema.org/MusicGroup">後天我要去看<span itemprop="name">S˙H˙E</span>的演唱會，好興奮哈！</p>

http://schema.org/MusicGroup詞彙表中有個名為"name"的關鍵名稱，如下： 用itemid全域標識有時，某些項需要唯一的標識進行標識。例如書的ISBN數值，我們可以藉助itemid屬性，如下例子：

<p itemscope itemtype="http://vocab.example.com/book"  itemid="urn:isbn:0321687299">  <!-- 書資訊… --></p>

三、微資料的力量

說了這麼多，你可能會有疑問或不耐煩了：微資料這玩意，貌似蠻複雜，頭疼的，看上去鳥用都沒有，唉，還是按ctrl+w去微博轉轉吧~~

為了打消這種疑慮，有必要中間插播介紹了微資料的真正體。我們可能都知道，給元素添加額外的語義東西，可以使用自訂data屬性(data-*). 但是，自訂data屬性只是純粹的屬性，而微資料有特定的規範，有特定屬性名稱的詞彙表，且更多是服務於現實世界，在這方面是很強大的。

說得太空太虛了吧？確實，過於學術化的說法往往不易讓人理解。通俗講，微資料就是在保證頁面內容顯示良好的情況下清晰而準確地勾勒出了資料的骨架與精髓，可以通過工具、API等進行方便強大的資料互動。

我們都知道，現在流行的資料交換格式是什嗎？沒錯，就是JSON。從某種意義上來講，微資料的本質就是JSON，哦？沒看出來，不急，舉個例子就會知道了。

如下HTML下的微資料代碼：

<section>  <h3><a href="http://atnd.org/events/5181" title="WDE-ex Vol11『iPad  のウェブデザイン：私たちがみつけたこと 』 : ATND">WDE-ex Vol.11 — Designing  for iPad: Our experience so far</a></h3>  <p>On <time datetime="2010-07-21T19:00:00+09:00">July 21st 19:00  </time>-<time datetime="2010-07-21T20:00:00+09:00">20:00</time> at  <span itemscope itemtype="http://schema.org/Organization">  <a itemprop="url" href="http://www.apple.com/jp/retail/ginza/map/">  <span itemprop="name">Apple Ginza</span></a></span>,  <span itemscope itemtype="http://schema.org/Person">  <a itemprop="url" href="http://informationarchitects.jp/" title="iA">  <span itemprop="name">Oliver Reichenstein</span>, CEO of iA</a>  </span>, will share the lessons they‘ve learned while creating three  iPad apps and one iPad website.</p></section>

日本，英文不懂沒關係，機器也不懂，但是它懂微資料，你也一樣。上面微資料的資料本質是什嗎？很亂，不是嗎？但是，如果我們只關注微資料的部分：itemscope, itemprop等，你會發現什嗎？

我們使用Live Microdata對上面的HTML代碼跑一下，會得到下面的JSON資料：

{  "items": [    {      "type": [        "http://schema.org/Organization"      ],      "properties": {        "url": [          "http://www.apple.com/jp/retail/ginza/map/"        ],        "name": [          "Apple Ginza"        ]      }    },    {      "type": [        "http://schema.org/Person"      ],      "properties": {        "url": [          "http://informationarchitects.jp/"        ],        "name": [          "Oliver Reichenstein"        ]      }    }  ]}

我想，您應該大致明白機器為何可以識別微資料了。由於微資料的這種資料本質特性，在web應用中，我們做一些資料互動的時候，事情就會變得奇妙而輕鬆。例如，你訪問一個你中意的女孩子的個人首頁的時候，如果使用微資料，就可以自動把她的一些資訊啊連絡方式啊什麼的放到你的通訊錄中，是不是很贊！或是在你的日曆表中添加一些需要完成的事件等等。很多真實世界的應用與web應用有了更為輕鬆強大的結合。

四、一些詞彙表介紹

這裡提及的微資料詞彙表有三：schema.org詞彙表，Google豐富摘要詞彙表(www.data-vocabulary.org)，WHATWG/microformats.org詞彙表。

我大致看了這幾個詞彙表，不由得心裡一咯噔：媽呀，這麼多，都介紹的話我這周末只能抱電腦了。因此，這裡只大致提點部分提綱性質內容。

事件(Events)

• schema.org/Event vocabulary — http://schema.org/Event
• http://www.google.com/support/webmasters/bin/answer.py?answer=164506 — http://www.data-vocabulary.org/Event/
• vEvent — http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#vevent

人物(Person)

• schema.org Person — http://schema.org/Person
• vCard — http://microformats.org/profile/hcard
• Rich Snippets Person — http://data-vocabulary.org/Person

組織或業務(Organisation or business)

• schema.org Organization — http://schema.org/Organization
• vCard (using fn org) — http://microformats.org/profile/hcard
• Rich Snippets Organization — http://data-vocabulary.org/Organization

日曆(Calendar)

• schema.org Event — http://schema.org/Event
• vEvent — http://microformats.org/profile/hcalendar#vevent
• Rich Snippets Event — http://data-vocabulary.org/Event

預覽(Review)

• schema.org Review — http://schema.org/Review
• schema.org AggregateRating — http://www.schema.org/AggregateRating (跟豐富摘要itemtype不同)
• hReview — http://microformats.org/wiki/hreview
• Rich Snippets Review — http://data-vocabulary.org/Review
• Rich Snippets Review-aggregate — http://www.data-vocabulary.org/Review-aggregate

許可證(License)

• Licensing works — http://n.whatwg.org/work

產品和服務(Products and services)

• schema.org Product — http://schema.org/Product
  • This can be extended with productontology.org descriptions (example)
• hProduct — http://microformats.org/wiki/hproduct
• GoodRelations Product — http://purl.org/goodrelations/ (例如<aitemprop="http://purl.org/goodrelations/v1#availableDeliveryMethods"      href="hhttp://purl.org/goodrelations/v1#UPS">via UPS</a>)
• Rich Snippets Product — http://data-vocabulary.org/Product

Atom提要(Atom feed)

• hAtom — http://microformats.org/wiki/hatom

食譜(Recipes)

• schema.org Recipe — http://schema.org/Recipe
• hRecipe — http://microformats.org/wiki/hrecipe
• Rich Snippets Recipe — http://data-vocabulary.org/Recipe

Google豐富摘要詞彙支援微格式和RDFa這是除了微資料之外其他兩個增加內容語義的方法。除了這種差異外，基本上與schema.org是想匹配的，除非他們在itemtype中使用www.data-vocabulary.org代替schema.org。儘管google仍然支援這類詞彙，但是最新的schema.org提供了更多的詞彙，這些詞彙還被Bing和Yahoo支援，因此在選擇微資料上schema.org可以讓你笑得更久。不過您可能仍然希望簽出“富文檔摘要”，因為它們代碼更簡單，書寫的時候要比schema.org來得更好。

五、瀏覽器支援

微資料瀏覽器支援情況 (截止2011年8月16日)

Browser	Support
Chrome
Safari
Firefox	進行中...
Opera	最快版本12.00-1033
Internet Explorer

雖然瀏覽器目前對微資料的支援基本上就是大鴨蛋，但是，由於搜尋引擎還有一些三方工具都鳥他，微資料目前還是很有應用價值的。例如Bing, Google, 以及Yahoo使用schema.org詞彙表定義的微資料顯示搜尋結果（特定格式的搜尋結果，即將展示）。

六、豐富網頁摘要應用

先看國內應用微資料的執行個體。

我們開啟穀哥哥，輸入“香口魚”，輕輕地斷行符號，稍等片刻，得到下面：

我們對比可以發現，福士點評網搜尋顯示的樣子跟下面的芸芸結果不一樣，有評分顯示，評論數，日期等。怎麼回事？莫非點評給Google塞了很多票子。非也，我們點選連結進入該頁面，右鍵查看原始碼，就會發現如下代碼：

上面各種標註的部分就是本文多次出現了微資料特有的關鍵屬性，名稱等。也就是說，點評的搜尋結果的顯示之所以不同，是因為其應用了HTML5之微資料，使用的詞彙表是相對簡單的Google豐富網頁摘要詞彙表中的。

關於具體怎麼使用，Google提供了詳盡的使用樣本（包括代碼展示），而且是中文版的。就是上面這段末尾的連結。我想我沒有必要重複詳述。不過，有些同行可能就是單純地感興趣，不想跳來跳去，我還是依葫蘆畫瓢，做了個很簡單的微格式應用例子。

您可以狠狠地點擊這裡：微資料樣本之評論demo

其實demo沒有什麼好看的，人眼所見，並非機器所見，Google提供了一個豐富摘要測試的工具（仍測試階段）：Rich Snippets Testing Tool。

例如上面測試結果您可以狠狠地點擊下面這個連結查看：微資料評論之豐富網頁摘要測試

是否有所啟發呢？想讓您的網頁在Google，或是Bing下面的展示豐富而與眾不同嗎？微資料，就是你的選擇！！

七、延伸閱讀

• 潛入HTML5 — “Distributed,” “Extensibility,” & Other Fancy Words, by Mark Pilgrim
• Microformats vs RDFa vs Microdata by Philip J?genstedt
• Google Help — Rich Snippets; 對微資料，為格式和RDFa有很好的介紹，且有各種語言的簡單的程式碼範例。
• Knol — Rich Snippets Tips and Tricks 關於Google豐富摘要的更多介紹

本文主要參考：Extending HTML5 — Microdata

精力有限，無法同步更新，見諒！歡迎吐槽。

原創文章：http://www.zhangxinxu.com/wordpress/?p=2058

HTML5擴充之微資料與豐富網頁摘要