Google Search sitelink(Microdata)

Microdata是一種結構性的標示，可以用來表示網頁內容的語意。是為了讓搜尋引擎可以順利解析網頁資料的標籤。

例如原本簡單的HTML如下:

<div>
 <h1>Avatar</h1>
 <span>Director: James Cameron (born August 16, 1954)</span>
 <span>Science fiction</span>
 <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

 只是以上的HTML並不能讓搜尋引擎知道你在說什麼，因此如果我們改成以下:

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <div itemprop="director" itemscope itemtype="http://schema.org/Person">
  Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span>
  </div>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

以上的itemscope、itemtype、itemprop就是microdata的語法，它可以明白地指出這段內容是關於電影，然後搜尋引擎就可以從裡面的文字"Avatar"去跟電影關聯。然後導演是James Cameron、類型是科幻電影！

Microdata 基礎

Mircodata 主要用到這幾個 attributes 來標注信息：itemscope, itemtype, itemprop，另外還有 itemid 與 itemref。

包含 itemscope 這個 attribute 的 DOM 就是一個事物(item)，例如：

<div itemscope>
...
</div>

我們可以給這個事物定義一個類型，比如一本書，這時就需要用到 itemtype，它的值是一個或多個 URL：

<div itemscope itemtype="http://schema.org/Book">
...
</div>

如上的代碼片斷，我們知道它是一本書了，但是它還缺少書的信息，需要用 itemprop 來標示：

<div itemscope itemtype="http://schema.org/Book">
  <div>書名：<span itemprop="name">改革歷程</span></div>
  <div>作者：<span itemprop="author">趙紫陽</span></div>
  ...
</div>

也許因為奇怪的設計方案，也許因為 PM 的無理取鬧，也許就是因為代碼不太好寫，佈局並不能輕易合乎要求，itemprop 可能散落於其它地方，這時可以使用 itemref 將它們連接起來：

<div itemscope itemtype="http://schema.org/Book" itemref="a b">
  <div>作者：<span itemprop="author">趙紫陽</span></div>
  ...
</div>

<!-- 因為某些原因，書名與價格不在 scope 裡面 -->
<div id="a">書名：<span itemprop="name">改革歷程</span></div>
<div id="b">價格：<span itemprop="price">$12</span></div>

至於該如何去定義我所撰寫的內容屬於何種itemtype呢?這種事情當然不是自己說了算，這樣會世界大亂吧，所以Google, Bing, Yandex, Yahoo!合作創建了Schema.org用以統一Microdata。

http://schema.org/Thing

Schema.org定義了許多類型，也仍在創造更多了類型。

比如我們來賣個車看看：schema.org/Car

<div itemscope itemtype="http://schema.org/Car">
  <h2 itemprop="name">奇瑞QQ</h2>
  <p itemprop="description">中國汽車製造商奇瑞汽車公司於2003年推出的一款微型車(...)</p>
  <img itemprop="image" href="2003_qq.png" />
  <div>
    <strong>顏色</strong>
    <span itemprop="color">黑色</span>
  </div>
  <div>
    <strong>齒輪數</strong>
    <span itemprop="numberOfForwardGears">6</span>
  </div>
  <div itemprop="vehicleEngine" itemscope itemtype="http://schema.org/EngineSpecification">
    <div>
      <strong>引擎</strong>
      <span itemprop="name">1.1 L SQR472F I4 DOHC 16v — 50 kW at 6000 rpm, 90 N·m at 3500 rpm</span>
    </div>
  </div>
  <div>
    <strong>氣囊數</strong>
    <span itemprop="airbags">4</span>
  </div>
</div>

小結:

上面看了這麼多結構化的語法，那實際上有什麼用呢?簡單說就是增加自己的曝光度啦。這也是SEO中重要的一環！

結構化的數據不僅僅能被這些 Web 搜索引擎使用，還能被諸如 Siri, Cortana 等語音設備使用，當然，他們也能被當作搜索引擎。例如我問 Siri 最近有什麼電影可看，於是找到了《土豪大戰外星人》，而你會發現這個內容來自爛番茄(一個國外有名的電影評論網站)，因為爛番茄的網頁有使用 Schema.org 的 Microdata 標注，再次詢問 Siri 附近吃飯的地方，返回了大眾點評的數據，查看大眾點評的網頁，亦是使用 Schema.org 的 Microdata 標注的。

結構化的數據在未來相當有吸引力，方便未來的各種設備接入。比如「智能廚房」，當你告訴它你要做什麼菜，於是它從下廚房找到了菜譜，因為下廚房使用了結構化數據，「智能廚房」就能直接列出需要的材料與材料的份量，甚至是烹煮所需要花費的的時間。

Microdata雖然看似是為了機器所設計的一個標準，但最終亦受惠的人依然是使用者和(網站)經營者阿！

reference link:
https://developers.google.com/structured-data/slsb-overview#how_do_you_set_it_up