JSON-LDで商品ページのリッチリザルトを表示させる

SEO/集客 / / カスタマイズ
リッチスニペット
「商品」リッチリザルトの表示例

ネットショップを運営しているなら見落とすわけにはいかないリッチリザルト（リッチスニペット）。
検索結果にリッチリザルトを表示させる為にはschemaを使った構造化データが必要となり、最初は少し手間がかかりますが、未導入の方はこの記事をぜひ参考にしてみてください。

手前味噌ですが、カラーミーSEO Plusテンプレートでは何の設定をしなくても商品登録すれば自動で構造化データが挿入されるようになっています。

リッチリザルトとは？

Googleの検索結果を見ているとサイトの説明(description)だけでなく、写真やレビュー数、価格、在庫状況などが合わせて表示されていることがあります。これをリッチ リザルトと呼びます。

スマホネイティブ世代が増え、視覚的に目立つことが今後は特に重要になってくると思われますのでリッチリザルト対応はネットショップを運営しているなら外せません

このリッチリザルトを表示させる為に必要になってくるのが構造化データです。

リッチリザルトの表示には必須項目がいくつかあり、必須項目の記述が無かったり記述が誤っていたりすると表示されません。かと言って漏れなく記述していたら１００％リッチリザルトが表示されるのかというと、そういうわけでもないのですが、少なくとも表示される可能性はあります。

構造化データとは

商品ページには商品名、価格、商品画像など様々な情報が掲載されています。

人間がみればそれは全て商品に関する情報だとすぐに分かりますが、検索エンジンのクローラーは人間ではないのでそういう訳にはいきません。それぞれを個々の情報として記号のようにばらばらに認識していきます。

それを人の目で見るのと同じように検索エンジンに伝える技術が構造化データです。

大手のショッピングモールやワードプレス、或いはショッピングカートASPにも構造化データが標準装備されている場合がありますが、大体のサイトでは自分で設定しないといけません。

Google提供の構造化データテストツール（追記：現在は後継の「リッチリザルトテストツール」）ですぐに設定・未設定が分かりますので気になる方はご確認ください。リッチリザルトテストには、構造化データ記述のサンプルも用意されているので非常におすすめです。

https://mihune-web.com/blog/rich_resulttest/

Microdateによるマークアップ

Microdateを使った構造化データのマークアップは、html文に直接マークアップします。

(例)

<div itemscope itemtype="https://schema.org/Product">
 <p itemprop="name">A（商品名）</p>
 <img itemprop="image" src="__.jpg" alt="（商品画像）" />
</div>

赤字部分を追記していき、「これは商品Aを説明しています」と検索エンジンに伝えます。

schema.orgで詳しく分類されています。schemaのサイトにも記述サンプルがあるのでご参照ください。

JSON-LDによるマークアップ

2016年までは上のMicrodateが推奨されてきましたが、現在Googleが推奨しているのはJSON-LDによる構造化データマークアップです。

headタグ内でないといけないということはなく、htmlのどこに記述しても問題ないようです。<body>の終了タグ前にでも入れておきましょう。

商品ページのJSON-LD記述例

＜script type="application/ld+json">
 {
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "xxxxxxxx",
  "image": "-------.jpg",
  "description": "xxxxxxxxx",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "3.5",
    "bestRating": "5",
    "reviewCount": "20"
  }
 }
</script>

他にも記載できることは沢山ありますが、このように一括できますのでhtmlもすっきりしますしメンテナンスも楽です。

↑の記述例は、上から商品名、商品画像、説明、レビュー（平均スコア、最高設定値、レビュー件数）となっています。

関連投稿