[SEO優化] Microdata類別(itemtype)實作

上一篇文章中簡單了說明一下什麼Microdata，本文分享一下稍微複雜的使用情境。

原則上只需要依照規範中的類別去定義相關欄位即可，但實際調整的過程應該很多初學者包含筆者在內都會發現，怎麼少了一些需要的屬性????

例如，商品類別沒有價格欄位，怎麼定義價格? 諸如此類的問題會再實作過程中一一出現，因此在實作前建議先了解一下schema.org中關資料類型的定義及其架構。

schema.org定義的資料類型

先回到上一篇文章中提到的類型(itemtype)，在schema.org的規範中可以看出，類型是一個將物件擁有的屬性包含再一起的集合，並且類型的架構有一個階層性(類似物件導向的概念)，越頂端的類型則越通用，越下層的類型則功能性越專一。

原則上所有的類型皆繼承於Thing(通用類型)，在依各類型不同的功能性各自衍生出自己的相關屬性，類型的架構圖可參考底下的示意圖，目前定義的資料類型種類非常的多，完整的類型可自行到此處查詢。

但另外值得一提的是，雖然schema.org這個組織的規範定義Google也有摻一腳，但Google本身的文件也有另外說明說那些屬性是會被Google的搜尋引擎所收錄，這些規範的欄為明顯的少於schema.org內的定義，例如商品這個類別的欄為定義，因此建議定義的欄位盡量還是符合實際要登錄的搜尋引擎為主。

實作範例

由於類型(itemtype)是描述整個物件的靈魂，因此在microdata的實作上，首先先確定每個頁面所要選定的類別，在這裡筆者先使用 "商品" 這個類別來做一個多階層的範例。

產品的內部可能需要包含了幾個重要的資訊，名稱、描述、圖片超連結、顏色、品牌、價格資訊等等，在實際操作之前先到Google文件上查詢一下各屬性的對應關係，可以整理出個屬性的對應關係如下。

商品名稱 => http://schema.org/Product
商品描述 => http://schema.org/Product
圖片超連結 => http://schema.org/Product
商品顏色 => http://schema.org/Product，Google文件中沒說明此項目。
品牌 => http://schema.org/Product
價格 => http://schema.org/Offer
幣別 => http://schema.org/Offer

特別注意一下兩個部分，商品顏色、和價格。

# 商品顏色

在Google的文件並沒有特別說名商品具有顏色這個屬性屬性，但在http://schema.org/Product中確有列出此項目，實際設定該屬性還是可以通過結構資料測試工具的測試，但後續再Google Search Console中檢視，Google實際上並無收錄該欄位。

# 價格

在Product這個類別並無單一屬性來描述價格這個資訊，而是透過類別Offer來定義價格、幣別(幣別格式參考 ISO 4217)等等相關資訊，另外相關文件中提到，同一個商品的價格只允許設定一個，否則收錄上可能會出現一些異常。

若商品金額格式正確，且成功收錄，則顯示的結果如下圖參考。

接下來筆者要示範一下商品的基本範例(如下圖)。

# Step1

先看一下上面這張圖描述了商品的各項基本資訊，參考一下底下的語法，這個時候尚未實作結構化資料。

<div>
    <h3>小安隨手畫</h3>
    說明 : <span>隨興創作，每日限量</span>
 品牌 : (<span>Amber Shen</span>)
 顏色 : <span>經典紅</span>
 定價 : <s>NT.999,999,999</s>
 優惠價 : NT.30,000,000
 <div><img src="http://lawrence/amber.jpg"/></div> 
</div>

# Step2

接下來根據規範先把商品類別的，名稱、說明、圖片、顏色、品牌等屬性欄位補上(如下參考)，並通過測試工具的驗證(參考下圖)。

<div itemscope itemtype="http://schema.org/product">
    <h3 itemprop="name">小安隨手畫</h3>
    說明 : <span itemprop="description">隨興創作，每日限量</span>
 品牌 : (<span itemprop="brand">Amber Shen</span>)
 顏色 : <span itemprop="color">經典紅</span>
 定價 : <s>NT.999,999,999</s>
 優惠價 : NT.30,000,000
 <div><img itemprop="image" src='https://www.google.com.tw/images/nav_logo242.png'/></div>  
</div>

# Step3

不知道各位有沒有發現，價格的部分尚未提供呢? 如果看清楚上文的說明，你應該會發現價格資訊這個屬性並沒有存在Product這個類別之中，而是存在Offer類別當中，並且該類別的價格和幣別皆為必填並且有其要求的規範須遵守。

回顧一下上方的代碼，目前畫面呈現的資訊，價格和幣別的格式並不符合規範，因此需要另外建立兩個隱藏的欄位來宣告這兩個屬性(參閱底下代碼)。

<div style='display:none' itemprop='offers' itemscope itemtype='http://schema.org/Offer'>
    <meta itemprop='price' content='30000000'>
    <meta itemprop='priceCurrency' content='TWD'>
</div>

# 完整範例代碼參考如下

<div itemscope itemtype="http://schema.org/product">
    <h3 itemprop="name">小安隨手畫</h3>
    說明 : <span itemprop="description">隨興創作，每日限量</span>
 品牌 : (<span itemprop="brand">Amber Shen</span>)
 顏色 : <span itemprop="color">經典紅</span>
 定價 : <s>NT.999,999,999</s>
 優惠價 : NT.30,000,000
 <div><img itemprop="image" src='https://www.google.com.tw/images/nav_logo242.png'/></div>  
    <div style='display:none' itemprop='offers' itemscope itemtype='http://schema.org/Offer'>
        <meta itemprop='price' content='30000000'>
        <meta itemprop='priceCurrency' content='TWD'>
    </div>
</div>

參考網站
Google 購物微數據簡介
結構化標記工具

搜尋此網誌

Lawrence Blog