検索結果にレビューの星（★）を表示する方法

概要

↓コレをやります。

※この記事に書かれていることを実践したことでなんらかの不具合、損害が発生したとしても責任を取れませんので、くれぐれも自己責任の上でお願いします。

設定方法

以下のコードを、HTMLとして貼り付けます。

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Review",
  "itemReviewed": {
    "@type": "Product",
    "name": "【※1】"
  },
  "reviewRating": {
    "@type": "Rating",
    "ratingValue": "【※2】",
    "bestRating": "【※3】"
  },
  "author": {
    "@type": "Person",
    "name": "【※4】"
  }
}
}
</script>

コード中の「【※n】」の部分には、以下の情報を記入してください。省略はできません。

※1	レビューする製品の名前
※2	評価点
※3	評価の最大点
※4	評者の名前

コードはページ中のどこに配置してもOKです。bodyタグの前に入れるとかを気にする必要はありません。コード中の文字は基本的に表示されませんが場合によっては改行されることがあるので、ページの末尾に配置するといいでしょう。

確認方法

データが正しく設定されているかどうかは、以下のツールで確認できます。

構造化データテストツール

データ部分だけを確認する場合は、「コードスニペット」に編集したコードを貼り付けてからテストを実行します。すでに編集内容を保存済みであれば、「URL」にページのURLを貼り付けてからテストを行なってください。

f:id:Littlebeans:20181201214402p:plain — 「コードスニペット」に編集したコードを貼り付け

f:id:Littlebeans:20181201214432p:plain — 正しく設定されていれば、エラーなしと表示されます

エラーが発生する場合は、だいたい要素が抜けているか「,（カンマ）」の位置が変わっているかです。上記のサンプルコードをよく確認して、必要以上に変更していないかを確認してください。

3日くらい待つ

設定したデータはすぐには反映されません。だいたい3日後くらいに反映されます。3日以上たっても反映されない場合は、追加したコードをよく確認してみてください。あとサーチコンソールのFetch as Googleでインデックス登録をリクエストしておくといいかもしれません。

これはなんなの？

「構造化データ」と呼ばれるものです。簡単に言えば、ページや単語の意味・役割を検索エンジンに伝えるためのもの（だと思います）。一定のルールに従ったデータを用意することで、検索結果にリッチスニペットとして表示されるようになります。

ちなみに構造化データの設定方法にはいくつか種類があるのですが、今回紹介しているのは「JSON-LD」を使ったものです。星（★）を出すくらいなら完全に理解する必要は（いまのところ）ないのですが、どんなものか程度は調べておいたほうがいいでしょう。

www.suzukikenichi.com

星（★）を表示するメリットは？

単に「検索結果で目立つかも」というだけです。いまのことろ、検索順位には影響しないと言われているっぽいです。

ただ個人的には検索結果でのクリック率は少なからず順位に影響すると考えているので、リッチスニペットで目立つほうが有利かもしれませんし、そんなことはないのかもしれません。

デメリットは？

構造化データを設定するのが面倒というぐらいです。慣れれば数分以内には終わると思いますけど。

ただ、構造化データと実際に表示されている内容に剥離があるとわりと厳しめのペナルティーがあるとかなんとか。その意味では、ちょっと注意が必要かもしれません。

↓参考記事：グーグル向け構造化データでよくある15の間違い――手動対策の原因にも！
webtan.impress.co.jp

以前に評価点数をページに記載せずにデータを設定したことがあるのですが、そのときはいくら待ってもリッチスニペットに星（★）が表示されませんでした。ページに表示されている情報をそのままデータに使うのがいいのかもしれません。

評価点について

評価については「評価点」と「最大点」のふたつを記述します。このときの数字はどんな感じでもいいっぽいです。たとえば「100点（最大点）中の60点（評価点）」であれば"bestRating"（最大点、サンプルの※3）には「100」、"ratingValue"（評価点、サンプルの※2）には「60」と書きます。このふたつの数字から、Googleが自動的に星（★）の数を計算して表示しているようです。点数に小数点以下の値が含まれるときは半分の星（★）が表示されますが、どこからどこまでが半分表示なのかはまだ把握できていません。

基本的に評価点はどんな値でもいいのですが、検索画面上では星（★）の数は最大5つで表示されるため、「5」を最大値にしたほうが感覚的にわかりやすい気がします。たとえば「★★★☆☆ 60点/100点」よりも「★★★☆☆ 3点/5点」のほうがスッと理解できるんじゃないかなあ、と。そんな理由から、私は評価点を5点満点で付けています。

でこの評価点についてですが、ページ内にちゃんと記載されていたほうが良さそうです。前述しましたが、評価点を掲載しないままデータだけ設定してもスニペットに反映されなかったことがあるからです。もしかするとほかに原因があったのかもしれませんが、ページ内に書かれている情報を元にデータを設定したほうが安全かと思います。

ちなみに私は、以下のような感じで評価点を掲載しています。

f:id:Littlebeans:20181202230249p:plain — 評価点の掲載方法

構造化データでは評価点の根拠は求められないので、数値はなんとなく付けた値でも大丈夫だと思います。たとえば記事の最後に「個人的な評価：3.6」と書くだけでもOKかと。

ただそれだと記事を読んだ人が納得しないだろうという考えから、評価基準を掲載しているわけです。上記の場合だとレビュー対象製品を5つの視点から0～5点で採点し、その平均値を総合評価としています。各項目については客観的な指針（非公開）を考慮した上で主観を加味しています。

実際に使っているデータ

上記のサンプルコードは必要最低限の要素をまとめたもので、実際には以下のような感じでいろいろな項目を加えています。

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Review",
  "name": "Inspiron 14 5000(5480)",
  "image": "https://little-beans.net/wp-content/uploads/2018/11/inspiron14-5480-29.jpg",
  "description": "税込8万円台からの高性能な14インチノートPC",
  "itemReviewed": {
    "@type": "Product",
    "name": "Inspiron 14 5000(5480)",
    "image":[ "https://little-beans.net/wp-content/uploads/2018/11/inspiron14-5480-29.jpg",    "https://little-beans.net/wp-content/uploads/2018/11/inspiron14-5480-32.jpg"],
    "description": "パフォーマンスはやや控えめながら、コンパクトでデザインがいい"
  },
  "reviewRating": {
    "@type": "Rating",
    "worstRating": "0",
    "ratingValue": "3.6",
    "bestRating": "5.0"
  },
  "author": {
    "@type": "Person",
    "name": "こまめブログ",
    "sameAs": "https://little-beans.net/about-3/"
  },
"publisher": {
    "@type": "Person",
    "name": "こまめブログ",
    "sameAs": "https://little-beans.net/"
    }
}
}
</script>

サンプルとの違いは画像や説明文/評価文を指定している点や、プロフィールページ/運営ページなどを指定している点です。現在これらの情報がリッチスニペットとして表示されることはないのですが、今後の仕様変更で表示されるようになったりナレッジグラフで使われるかもという予測で含めています。使われない可能性のほうが高いような気もしますが。

各要素についてはschema.orgにまとめられているので、興味のある人は見てみてください。単語を見れば、なんとなくわかるかもしれませんけれども。

schema.org