レビュー・クチコミ 2019.03.14
レビューのリッチスニペットを導入してみよう!

レビューのリッチスニペットを導入してみよう!

  • このエントリーをはてなブックマークに追加

実際にリッチスニペットを導入してみよう!

前回の記事では、リッチスニペットの概要とメリットや注意点についてお話させていただきました。今回の記事では、レビューを導入しているwebサイト向けに具体的な導入方法をご紹介します。

実際に導入して、検索結果にリッチスニペットを表示させてみましょう!

導入手順

リッチスニペットの導入手順は、おおまかに言って2ステップに分かれます。

  • ステップ1 : 構造化データのマークアップ
  • ステップ2 : マークアップした構造化データをHTML内に設置

それぞれを少し詳しくご説明しましょう。

ステップ1 : 構造化データのマークアップ

◆ 構造化データって?

そもそも、構造化データとはなんでしょうか?

構造化データとは、検索ロボットがHTMLに書かれている情報を理解するために必要なものです。
例えば、会社名や電話番号の情報は人が見ればすぐに判別がつきます。株式会社〜となっていたら会社名、0120から始まるナンバーなら電話番号と、パッと見てわかりますよね。
しかし、検索ロボットにはなかなか困難なため、構造化データを用意して「これが会社名・電話番号ですよ」と明示的にしてあげる必要があります。

◆ JSON-LDを使用

また、この構造化データの作成には、schema.orgで定義されているボキャブラリー(マークアップする物事を定義するもの)をもとに作成する必要があります。
今回は、Googleが推奨しているJSON-LDというシンタックス(構造化データをマークアップするときの文法のようなもの)を使う方法をご紹介します。

ステップ2 : マークアップした構造化データをHTML内に設置

◆ 構造化データの設置場所はHTMLの末尾に!

構造化データの作成が完了したら、HTML内に設置することで導入は完了です。
データの設置場所はHTML内であればどこでも大丈夫なのですが、ページの末尾にすることをおすすめします(bodyの閉じタグの手前など)。
ページの頭のほうに構造化データを置いてしまうと、ページのサマリ等に構造体が拾われて検索結果にその構造体が表示されてしまうことがあります。
そうならないためにも、設置場所には注意しましょう。

構造化データを作成しよう

冒頭で「レビューを導入しているwebサイト向け」と書かせていただいた通り、レビューを収集しているwebサイトを前提に、商品詳細ページ用の構造化データの書き方をご紹介します。

構造化データの中には必須の項目もあれば推奨の項目もあり、他にも様々な情報を記述することが可能になっています。今回はあくまでレビューにまつわる部分の紹介になりますので、その他項目はこちらよりご確認ください。

それでは、早速構造化データを作成してみましょう!
まず、サンプルをご覧ください。

◆ リッチスニペットのサンプル

◆ サンプルの構造化データ

上記の構造化データはおおまかに3つに分けられます。パーツ別に内容を見ていきましょう。

【必須】 ①schema.orgの宣言とproductの必須プロパティ

"@context":"https://schema.org/",
"@type":"Product",
"name":"NaviPlus Tシャツ",
"image": [
  "http://www.naviplus.co.jp/xxxx.png",
  "http://www.naviplus.co.jp/xxxx_2.png"
],

①では、schema.orgに則って記述しますということと、どんなジャンルの構造化データなのかを宣言しています。今回は商品のページに挿入する構造化データなので、@typeがProductになっています。(今回はご紹介しませんが、他のジャンルについてはこちらこちらより確認できます。)
また、アイテム名アイテム画像のURLを記述しており、この部分は全てが必須項目となるので、必ず記述しましょう。

属性 必須 入力する項目
@context 必須 https://schema.org/
@type 必須 Product
name 必須 商品名
image 必須 商品画像のURL。
画像は最低でも1つ登録する必要があります。
また、適切な画像が選択されるためには複数登録することが推奨されています。
注意点はこちらを参考にしてください。

②商品情報

"offers":{
  "@type":"Offer",
  "price":1980,
  "priceCurrency":"JPY",
  "itemCondition":"new",
  "url":"http://www.naviplus.co.jp/xxxx.html",
  "availability":"InStock"
},
"description":"柔軟な素材と自由なデザインでユーザとの関係を築く国産Tシャツ!",

Offerにより価格と在庫情報をリッチスニペットに含めることができます。ユーザビリティ向上のためにも記述できる部分は記述しておきましょう。

属性 必須 入力する項目
@type 必須 Offer
price 必須 商品の価格
priceCurrency 必須 通貨単位(日本円の場合JPY)
itemCondition 推奨 アイテムの状態
url 推奨 アイテムのURL
availability <推奨 在庫の状態

Offerに入力する項目は、下記のサイトを参考にして下さい。

descriptionは商品の説明文になり、推奨項目ですが記述しているwebサイトが多いようです。

属性 必須 入力する項目
description 推奨 商品の説明文

③レビューの集計結果

"aggregateRating":{
  "@type":"AggregateRating",
  "bestRating": "5",
  "worstRating": "1",
  "ratingValue":4.33,
  "reviewCount":67
}

ガイドライン上は推奨項目ですが、この部分により検索結果に総合評価とレビュー件数を表示させているため、必ず記述しましょう。

属性 必須 入力する項目
@type 必須 AggregateRating
bestRating 必須 評価の最高値
省略した場合は5
worstRating 必須 評価の最低値
省略した場合は1
ratingValue 必須 総合評価の値
reviewCount 必須 レビューの投稿数の合計

上記項目で構造化データを作成する場合は、こちらをコピーしてお使いください。

<script type="application/ld+json">
  {
    "@context":"https://schema.org/",
    "@type":"Product",
    "name":"商品名",
    "image":"商品画像のURL",
    "offers":{
      "@type":"Offer",
      "price":商品の価格,
      "priceCurrency":"通貨単位(日本円の場合JPY)",
      "itemCondition":"アイテムの状態",
      "url":"アイテムのURL",
      "availability":"在庫の状態"
    },
    "description":"商品の説明文",
    "aggregateRating":{
      "@type":"AggregateRating",
      "bestRating": "評価の最高値",
      "worstRating": "評価の最低値",
      "ratingValue":総合評価の値,
      "reviewCount":レビューの投稿数の合計
    }
  }
</script>

テストをしてからサイト内に設置

マークアップし終わったら、サイト内に設置する前に構造化データテストツールでテストをしてみましょう。

①テストを実行する

作成した構造化データをコードスニペットに貼り付け、テストを実行します。

②テスト結果を確認し、プレビューを表示

オレンジ色の「推奨フィールドです。値があれば指定してください」というメッセージが出ています。
構造化データエラーによる悪影響はないとGoogleは説明していますが、指定できる場合はできるだけ記述しましょう。

緑色のプレビューボタンがでているので、こちらからプレビューして下さい。

③期待した結果になっているかを確認

プレビューが表示されたら、期待した結果になっているかを確認しましょう。
今回は、総合評価・レビューの投稿数・価格・在庫情報が表示されるよう構造化データを記述しました。期待通りの結果になっていますね。

④作成完了!HTML内に設置しましょう

これで構造化データの作成はバッチリ!
あとは、商品詳細ページのHTML内に設置をして導入完了です。
前述したとおり、ページの末尾にすることをおすすめします(bodyの閉じタグの手前など)。

リッチスニペットが表示されない時は

正しく構造化データを作成し、webサイトに設置したとしても、リッチスニペットが必ずしも表示されるとは限りません。

前回の記事でもご紹介しましたが、検索結果にリッチスニペットを表示するにあたり、チェックされる項目があります。

もしリッチスニペットが表示されない場合は、下記を確認してみてください。

  • リッチスニペットがガイドラインに沿っていること
  • 検索キーワード(クエリ)と、ページの内容の関連性
  • webサイトのクオリティ

いかがでしたか?
この記事がリッチスニペットの導入の参考になれば幸いです。
大きな効果の見込めるリッチスニペット、ぜひ導入してみてくださいね。

  • このエントリーをはてなブックマークに追加

この記事を読んだ方にオススメの記事