上方廣告

Lady Kukki 手作糖霜餅乾

2016年10月5日 星期三

[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 購物微數據簡介
結構化標記工具