[SEO優化] 認識Microdata

筆者從業以來一直跟SEO扯不上關係，近來因為公司組織調整而來了一群數據分析的專家，根據它們看完前端服務型的網站後，給了一些建議，例如增加Google Analytics、建立Google Search Console索引、明確的指名頁面標題、前端商品頁面新增Microdata等等...。

前面幾個項目都可以理解，但Microdata是啥?? 筆者可是完全沒聽過，因此只好默默地回到座位上求助一下Google大神的開示，並得出底下的結論。

對於一個前端的服務化網站，尤其是商業化網站，網路行銷人員無所不用其極地要設法讓自己的網站可以大量地在各大搜索引擎中曝光，實作的方式不外乎就是花錢買廣告、搭配知名部落客行銷自家商品以及提升網站SEO(search engine optimization搜索引擎最佳化)。

但要如何提升網站的排名呢? 很簡單，首先要了解各大搜索引擎的排名方式(花錢的除外)，就是要先知道的排名演算法，並加以調整就行了。

ㄜ~~~~ 但是這樣的嗎? 它們似乎不會將此演算法公諸於世，因此就僅能根據各大搜索引擎官方釋出的來Structured Data相關文件進行調整了。

什麼是Structured Data?

結構化數據(這是大數據分析時代一個很重要的基本組成元素)，所有的資料的型態、欄位大小、行為等等都必須加以約束，簡單來說就網頁元素遵守一個有規範的格式，讓搜尋引擎機器人找到你的網頁後，可以清楚明白的告訴它，你希望它呈現的內容。其規範實做的方式有很多種，如 : RDFa、Microdata、JSON-LD。

# RDFa

維基百科中提到，RDFa是一個W3C推薦標準。它擴充了XHTML的幾個屬性，網頁製作者可以利用這些屬性在網頁中添加可供機器讀取的後設資料。與RDF資料模型的對應關係使得RDFa可以將RDF的三元組嵌入在XHTML文件中，它也使得符合標準的使用端可以從RDFa檔案中提取出這些RDF三元組來，這個因出來的比較久了，目前已較少人在使用，因此這裡不特別說明了。

# Micordata

微資料，使用 HTML 標記與屬性來定義資料，為Google建議的結構化資料語法之一，下文會在簡單的介紹期幾個重要的組成元素。

# JSON-LD

JSON for Linking Data，使用 JavaScript 物件來定義資料，為Google建議的結構化資料語法之一，本文暫不說明此部分。

PS.
微資料與 JSON-LD 是兩種不同的標記資料方法 (兩者皆使用 schema.org 詞彙)。Google文件中建議擇一使用微資料或 JSON-LD，避免在單一網頁或電子郵件同時使用這兩種方法。Google 建議您使用微資料標記網頁內容

什麼是schema.org?

schema.org 是由 Google、Microsoft 與 Yahoo! 聯手打造的計劃，旨在建立描述網頁資料的常用詞彙，藉此改善網路瀏覽體驗。如果您在 HTML 網頁中加入 schema.org 標記，即可讓許多公司與產品 (包括 Google 搜尋) 解讀您網站上的資料。同樣地，如果您在 HTML 格式化的電子郵件中加入 schema.org 標記，也能讓 Gmail 以外的其他電子郵件產品解讀其中的資料。您可以使用不同類型的標記，透過 schema.org 詞彙來描述您的資料。

Microdata重要元素

上述簡單了說明Microdata的相關背景後，接下來針對三個重要的組成元素itemscope、itemtype、itemprop進行簡單的說明。

# itemscope

宣告需要被搜索引擎所收錄的區域，該"區域"內必須包含了其它明細資料。

<div itemscope>
  <h1 itemprop="name">這裡是名稱1</h1>
</div>
<div itemscope>
  <h1 itemprop="name">這裡是名稱2</h1>
</div>

# itemtype

有了itemscope，還需要告訴前端這區域是在描述是什麼"類別"，這時候就必須要宣告itemtype，該屬性的值是一個網址格式+類別別稱，例如http://primeeagle.com/類別，建議遵循Schema.org所定義的類別，這樣可以讓幾個主流的搜索引擎都可以正確地進行分類，也比較有機會提高SEO的排名。

<div itemscope itemtype="http://schema.org/movie">
  <h1 itemprop="name">佩佩豬電影版</h1>
</div>

下圖是執行的結果，由於我們是遵循schema.org中電影這個類別的定義，因此該工具會回傳執行的結果，並且提供建議及缺少的必欄位。

不知道聰明的你有沒有發現剛剛有提到請盡量遵循標準規範，若不使用該組織定義的類別，而自行定義是否會出現什麼事情呢? 這個就交由你自己去試試看了。

# itemprop

上述兩個要素完成後，搜尋引擎機器人已經知道我們有一個電影的框架，因此我們還要補充說明該部電影的詳細說明，因此itemprop這個Tag就是在宣告類別內的屬性名稱和屬性值的標記。

<div itemscope itemtype="http://schema.org/movie">
   <h1 itemprop="name">佩佩豬電影版</h1>
   <meta itemprop='image' content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF66VcuHifCJr9VDEq9sTCwRX5xkpqs38EiMNB2bJnFL5g1N-0ojnkE9LkmEnrZEBzrbVBXp3Hz048Zc9WfjSzj1WLLSH6ZksJN4Q2bXp9HKUmWv0-ya9JncOEF_XKP9WRVQ18J1Ly4hk/s220/pig.png' />
   <span itemprop='dateCreated'>2013/03/31</span>
   <label itemprop='director'>沈小安</label>導演
</div>

上述語法分別用h1、meta、span、label，四個不同的物件來記錄，並且通過測試工具的驗證(參考下圖)，這裡大概說明一下幾種使用情境。

1. 有UI畫面，並且該資料的值就直接是希望搜尋引擎收錄的值，參考h1、span的方式，直接InnerText內將該收錄值包起來。

2. 有UI畫面，搜尋引擎收錄的值不是畫面呈現的值，參考label，把導演【沈小安】框在label物件的InnerText內部，導演兩個字放在label外部。

3. 沒有UI畫面，但需要讓搜尋引擎收錄的資料不一定需要使用視覺物件(Div，Span等等)在設定在隱藏，可用參考meta的替代方案來設定，但請注意由於meta沒有InnerText，因此需要將值設定在content屬性內。

重新複習一下microdata三個重要的元素，

itemscope : 描述收錄的區域。
itemtype : 描述該區域的類別。
itemprop : 描述該類別的屬性和值。

當然實際的使用情境不可能如此單純，有可能會出現，itemscope內包含了內部的itemscope，例如商品區域，包含了描述商品品牌、商品價格的itemscope，這個就留到後續如果有提到在另外說明了。

PS.
說明所附的圖片是使用Google所提供的結構化資料測試工具中所擷取出來了，該工具可針對程式碼片段和網址進行測試，並回報測試的結果，適合在搜尋引擎尚未收錄相關代碼之前的一個測試工具，是個挺好用的開發工具。

參考網站
結構、半結構、非結構式資料是啥意思?
Schema.org簡體中文站，方便先理解，但建議看英文版，因為簡體中文版好像年久失修了。
前端的基礎修養：Microdata

搜尋此網誌

Lawrence Blog