Jac 前端攻城屍的玻璃心: 2017

在上一篇文章中有介紹到到microdata的使用方式，在此要更進一步介紹能讓自己內部網站曝光的sitelinks search box(如下圖)

從Google官方文件中得知，要讓google search解析出search box 的撰寫方式有兩種，第一種是今天要介紹的方法microdata，另一種是JSON-LD

JSON-LD是一套使用 JSON 格式標注數據的方案。最大的優點是 JSON 格式便於解析，缺點是數據冗余，尤其是在需要 HTML 展示大段內容的情況下。但因為出線的時間更晚，所以支援的程度更低，可以說幾乎就只有google search支援而已，但從google官網有很多效果，範例也只提供JSON-LD感覺是要推行這種方式，但這不在今天討論範圍，稍微了解一下這是什麼就好。

接著我們來看官方提供的範例

<div itemscope itemtype="http://schema.org/WebSite">
  <meta itemprop="url" content="https://www.example.com/"/>
  <form itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
    <meta itemprop="target" content="https://query.example.com/search?q={search_term_string}"/>
    <input itemprop="query-input" type="text" name="search_term_string" required/>
    <input type="submit"/>
  </form>
</div>

事實上已經講得差不多了，要新增的HTML就這麼多，只要注意對應到自己的網站上就好了，剩下的就是有幾點注意事項。

在網站上安裝一個搜尋引擎(您可以使用google的自訂搜尋)
“url"—與首頁的 URL 相同。
target—搜尋結果的URL.
query-input—required name的值必須與 target 大刮號中的變量相同。
首頁必須設定一個canonical URL。
確定您的伺服器支援UTF-8編碼。
相關的標記只需要放在首頁即可。
Google建議使用JSON-LD來標記搜尋框。

小結:

如果上述都做完了，恭喜你，就慢慢等他生效吧，Google 搜尋引擎再次抓到你的網站會判斷是否需要出現搜尋框。所以，不只需要一些時間，最終也會不會有搜索框也不是我們說了算的，不過有做有機會拉~~

JSON-LD範例

<script type="application/ld+json">
{
   "@context": "http://schema.org",
   "@type": "WebSite",
   "url": "https://website.url/",
   "potentialAction": {
     "@type": "SearchAction",
     "target": "https://searchpage.url?&Description={search_term_string}",
     "query-input": "required name=search_term_string"
   }
}
</script>

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

Jac 前端攻城屍的玻璃心

2017年1月24日星期二

Google Search sitelink(JSON-LD)

小結:

Google Search sitelink(Microdata)

Microdata 基礎

小結:

2017年1月24日 星期二

Google Search sitelink(JSON-LD)

小結:

Google Search sitelink(Microdata)

Microdata 基礎

小結:

2017年1月24日星期二