JSON-LDで商品ページのリッチスニペットを表示させる
ネットショップを運営しているなら見落とすわけにはいかないリッチスニペット。
リッチスニペットには構造化データが必要となり最初は少し手間がかかりますが、未導入の方はこの記事をぜひ参考にしてみてください。
なお、ショプサーブをご利用中の方は簡単に設定できますので、3章だけお読みください。
リッチスニペットとは？
Googleの検索結果を見ているとサイトの説明(description)だけでなく、写真やレビュー数、価格、在庫状況などが合わせて表示されていることがあります。これをリッチ スニペットと呼びます。
スマホネイティブ世代が増え、視覚的に目立つことが今後は特に重要になってくると思われますのでリッチスニペット導入はネットショップを運営しているなら外せません
このリッチスニペットを表示させる為に必要になってくるのが構造化データです。
ちなみにここのコーヒー美味しかったです（個人の感想です）。
構造化データとは
商品ページには商品名、価格、商品画像など様々な情報が掲載されています。
人間がみればそれは全て商品に関する情報だとすぐに分かりますが、検索エンジンのクローラーは人間ではないのでそういう訳にはいきません。それぞれを個々の情報をしてばらばらに認識していきます。
それを人の目で見るのと同じように検索エンジンに伝える技術が構造化データです。
大手のショッピングモールやワードプレスもテーマによっては構造化データが標準装備されていますが、大体のサイトでは自分で設定しないといけません。
Google提供の構造化データテストツールですぐに設定・未設定が分かりますので気になる方はご確認ください。
Microdateによるマークアップ
Microdateを使った構造化データのマークアップは、html文に直接マークアップします。
(例)
<div itemscope itemtype="http://schema.org/Product"> <p itemprop="name">A（商品名）</p> <img itemprop="image" src="__.jpg" alt="（商品画像）" /> </div>
赤字部分を追記していき、「これは商品Aを説明しています」と検索エンジンに伝えます。
schema.orgで詳しく分類されています。記述例もあるのでご参照ください。
JSON-LDによるマークアップ
2016年までは上のMicrodateが推奨されてきましたが、現在Googleが推奨しているのはJSON-LDによる構造化データマークアップです。
headタグ内でないといけないということはなく、htmlのどこに記述しても問題ないようです。<body>の終了タグ前にでも入れておきましょう。
商品ページのJSON-LD記述例
＜script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": "xxxxxxxx",
"image": "-------.jpg",
"description": "xxxxxxxxx",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "3.5",
"bestRating": "5",
"reviewCount": "20"
}
}
</script>
他にも記載できることは沢山ありますが、このように一括できますのでhtmlもすっきりしますしメンテナンスも楽です。
文末に実装例書いておきますのでご参考までに。
↑の記述例は、上から商品名、商品画像、説明、レビュー（平均スコア、最高設定値、レビュー件数）となっています。
ショップサーブなら簡単に設定できる
ショップサーブの個別の商品登録ページには「Googleショッピングなどの外部連携用データ」という項目がありますが、ここに記述した内容が自動的にJSON-LDに変換されて商品ページに記載されるようになっています。
2016年から導入された機能ですので以前からショップサーブを利用している方などで見落とされている場合はすぐに記述しましょう。
商品ページのJSON-LD 実装例
＜script type="application/ld+json">
[{
"@context": "http://schema.org/",
"@type": "Product", //構造化データの種類
"name": "xxxxxxxx", //商品名
"image": "-------.jpg", //商品の代表画像
"description": "xxxxxxxxx", //商品の説明
"aggregateRating": {
"@type": "AggregateRating", //データの種類（レビュー）
"ratingValue": "3.5", //平均スコア
"bestRating": "5", //レビュー設定の最高値
"reviewCount": "20" //獲得しているレビュー件数
},
"gtin13": "1234567890123", // JANコード
"mpn": "XXXXXX", // 商品コード（任意の管理コード)
"brand": {
"@type": "Thing",
"name": "AAAAAAA" // ブランド名
},
"offers": {
"@type": "Offer", //データの種類（販売価格）
"priceCurrency": "JPY", //通貨の設定（日本円）
"price": "1234.00", //販売価格
"itemCondition": "http://schema.org/NewCondition", //新品か中古か
"availability": "http://schema.org/InStock", //在庫ありまたは無し
"seller": {
"@type": "Organization", //データの種類（販売者）
"name": "XXXXXXXX" //販売者名
}
}
},
{
"@context":"http://schema.org/",
"@type":"BreadcrumbList", //データの種類（パンくずリスト）
"itemListElement":[
{
"@type":"ListItem", //データの種類（リスト）
"position":"1",
"item":{
"@id":"https://XXXXXXX.jp", //（トップページのURL）
"name":"ページタイトル"
}
},
{
"@type":"ListItem",
"position":"2",
"item":{
"@id":"https://XXXXXXX.jp/YYY/", //(次の階層, 商品一覧など)
"name":"ページタイトル"
}
},
{
"@type":"ListItem",
"position":"3",
"item":{
"@id":"https://XXXXXXX.jp/ZZZ/", //（次の階層, 商品カテゴリーなど）
"name":"ページタイトル"
}
},
{
"@type":"ListItem",
"position":"4",
"item":{
"@id":"https://XXXXXXX.jp/ITEMNAME/", //（次の階層, 商品ページURLなど）
"name":"ページタイトル"
}
}
]
}
]
</script>
