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

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

結構化資料之「商品」範例 - 使用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。

留言

張貼留言