結構化資料之「商品」範例 - 使用 JSON-LD

假設想在搜尋結果頁(SERPs)上對 單一商品 呈現更為吸引人的 Rich Snippet 效果,例如出現星等、評論數(如下圖),就需要利用結構化資料(Structured Data)來達成。

結構化資料之「商品」範例 - 使用 JSON-LD Pinkoi 範例  

至於資料格式種類和需要哪些欄位,Google 有很詳細的說明文件-Enabling Rich Snippets for Products,當然也可以參考更詳細的-Product - schema.org

程式碼範例

我在個人實驗網站上做了一個小商城,幫裡面的商品單頁撰寫結構化資料(使用 JSON-LD)。範例頁請見泰迪熊盪鞦韆 (ID: 6) | 拍賣桑莫的生活。SEO 遊樂場。抽出商品部份如下所示。由於官方文件對於個欄位都有很詳細的解說,在此就不做說明了。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Product",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": 4.5,
    "reviewCount": 100
  },
  "description": "可愛的泰迪熊在盪鞦韆呢!快買一個回家玩吧!",
  "name": "泰迪熊盪鞦韆",
  "productId": "6",
  "offers": {
    "@type": "Offer",
    "availability": "http://schema.org/InStock",
    "price": "99999",
    "priceCurrency": "TWD"
  },
  "image": "http://cythilya.apphb.com/content/eshopper/images/product/bear_on_hanging_seat.jpg",
  "brand": "泰迪熊盪鞦韆",
  "review":
  [
    {
      "@type": "Review",
      "author": "Summer",
      "datePublished": "2015-06-24",
      "description": "值得買,很超值!",
      "name": "泰迪熊盪鞦韆",
      "reviewRating":
      {
        "@type": "Rating",
        "bestRating": "5",
        "ratingValue": "4.5",
        "worstRating": "1"
      }
    },
    {
      "@type": "Review",
      "author": "Lucas",
      "datePublished": "2015-07-07",
      "description": "再買一個都不為過!",
      "name": "泰迪熊盪鞦韆",
      "reviewRating":
      {
        "@type": "Rating",
        "bestRating": "5",
        "ratingValue": "4",
        "worstRating": "1"
      }
    }
  ]
}
</script>

測試

Structured Data Testing Tool 測試一下 - 結果正確。

結構化資料之「商品」範例 - 使用 JSON-LD 測試結果

注意,結構化資料的欄位是會變動的,這段時間也許是用這些欄位,過些時間或許就更新了。可以關注 schema.org project - Github presence for schema.org project 所提出的相關 issues。

搜尋結果

結構化資料之「商品」範例 - 使用 JSON-LD 搜尋結果

這些測試用的商品頁面大概是去年底做好的,但直到這個月才發現在搜尋結果頁上出現 Rich Snippet 的效果。所以,如果你幫商品頁撰寫了結構化資料,測試也沒問題,甚至 webmaster 上也看到 index 了,但就是無法在搜尋結果上看到成效-等等吧!可能會需要等好長一段時間噢!

後記

這篇文章 6 rich snippet formats any e-commerce site can use to its advantage 整理電商了會用到的結構化資料相關應用。其中商品圖片與影片的呈現,這在目前 Product 的 Rich Snippet 上是缺少的,但可以用這篇文章提出的方式「VideoObject Schema」和「ImageObject Schema」補足。

自從轉行以後(其實也不是轉很大,只是從活動相關網站轉到電商而已),更是深刻體悟到一個網站的行銷概念、流程、UI 設計會影響後續的數據蒐集與分析。而做一個 SEO Engineer 最有趣的地方,就是和一般只關心開發(開規格和寫程式)的工程師不同-必須參與產品規劃、思考資料蒐集與分析方法、時時調整和去除無法達成目標的變因等。幸運如我,在廣大的前端領域中找到了一個真心喜歡的小天地 :)

推薦閱讀


這篇文章的原始位置在這裡-結構化資料之「商品」範例 - 使用 JSON-LD

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。
comments powered by Disqus