【レビュー記事に】Googleの検索結果にリッチリザルトを表示させよう 3つの方法を紹介

アイキャッチ

Google で検索した時に、このような「★★★★☆」 が表示された 検索結果を見たことはありませんか?

これはリッチリザルト (リッチスニペット) と呼ばれ、これらが検索結果に表示されることでユーザーがより直感的に記事の内容や評価を知ることができます。

リッチリザルトは必ずしも表示されるとは限りませんが、適切に構造化データを記事内に挿入することで利用可能となります。

大手ECサイトなどでは利用しているケースが多いですが、まだまだ利用しているサイトは少ないので検索結果の中で目立つことでしょう。

リッチリザルト
  • 検索結果で視認性が高くなる
  • CTR(クリック率)の向上が期待できる

写真付きのレシピなどは目を引きますよね。これもリッチスニペットの一種です。

検索結果の最上部には「カルーセル」も表示され視覚的にユーザーが記事の内容が分かるのが特徴です。

リッチリザルトは、商品のレビューや、レシピのほかにさまざまな種類があります。

この記事では比較的簡単に導入できるコト・モノのレビュー記事に対してリッチリザルトを表示させる方法を紹介します。WordPressであればにすぐに対応することが出来ますよ。

https://tabikumo.com/img/2018/09/face-icon-boy.png

リッチリザルトは目立ちます。少しの手間で導入できるのでトライしてみましょう。しかし実体のないレビューはスパム扱いを受けることがあるのでやりすぎには注意が必要です。

速いサーバーをお探しなら

乗り換えで20,000円キャッシュバック 10/31まで

リッチリザルトの種類

こちらのページから利用できるリッチリザルトを確認できます。(ベータ版のものは検索結果には表示されません。順次対応するようです。)

リッチリザルト・構造化データの一覧 (Google)

リッチリザルトを表記するためには対応した構造化データ (リッチリザルトを表示させるための書式)を記事内に適切に挿入する必要があります。

構造化データは多数あるので、サイトに必要なものを利用してみましょう。

  • 記事
  • パンくずリスト
  • よくある質問 (FAQ)
  • How-to
  • 商品
  • Q&A
  • レシピ
  • レビュー

FAQ – 制作者が用意した1問1答タイプのもので複数の質問と回答を掲載できる。
ユーザーは回答できない。

Q&A – 1つの質問に対してユーザーも回答を送信できるもの (例) Yahoo知恵袋
1つのページで掲載できるのは1つの質問だけ。

商品 – 商品販売サイトやレビュー投稿サイトなどユーザーがスコア評価できるもの。価格や商品画像も表示可能。下のレビューより必須プロパティが多い

レビュー – 制作者が商品に対してスコア評価できるもの。対象は書籍、映画、音楽、商品、レシピ、飲食店の評価など。1ページ1つのみの評価で、複数の製品を紹介しているページには使用できない

https://tabikumo.com/img/2018/09/face-icon-boy.png

個人サイトならレビューレシピなどが使いやすそうです。

どうすればリッチリザルトを表示できる?

記事内容にあった構造化データを作成

URL、作成者、画像、評価など必須プロパティを記載した構造化データを作成します。

記事内に構造化データを挿入

作成した構造化データを記事内に挿入します。プラグインを利用すれば自動で挿入可能です。

検索結果をテスト

リッチリザルトテストを使い正しく構造化データがマークアップ出来ているか確認

問題なければ、Search Console から URL を登録、再登録

検索結果を確認

記事がフェッチ(検索結果に反映)されるのを待ってから、Google や Bing の検索欄から 該当のURL を入力して結果を確認しましょう。ただし、必ずリッチリザルトが表示されるとは限りません。

リッチリザルトを導入するために、Googleへの申請や特別なツールは必要ありません。

大事なことは、構造化データと呼ばれる書式に沿ってマークアップすることです。

指定された必須プロパティが抜けていると、最初はリッチリザルトが表示されても少し経つと検索結果から消えてしまうこともあります。記事の内容と乖離している場合も同様です。

その場合は構造化データを見直してみましょう。

メモ

Googleの検索結果のタイトル下にある URL構造を表記している「パンくずリスト」もリッチリザルトですが、WordPressのテーマに組み込まれているので自分で設定する必要はありません。「記事」も同様に自動で挿入されます。

また、作成した構造化データを記事内に挿入する方法として以下のような方法があります。

WordPress で構造化データを記事に挿入する方法
  1. プラグインを使う
  2. functions.php を編集
  3. 記事内に手動で記述

プラグインを使う方法が最も簡単です。functions.phpというファイルを編集する方法は、WordPressが表示できなくなることがあるので全く知識がない方にはおすすめしません。手間はかかりますが、手動で構造化データを記事内、ヘッダー、フッターに挿入してもOKです。

リッチリザルトを表示させるために構造化データを作成しよう

構造化データの書式は scheme.org (http://scheme.org) が定義しているもので、3つあります。

  • JSON-LD
  • RDFA
  • MICRODATA

どれを使えばいいの?となりますが、JSON-LDを利用しましょう。

理由は JSON-LD は Bing も対応している書式なので、そのままでBingの検索結果にも反映させることができるからです。記事内のどこに記述しても認識されるので再利用可能ブロックなどを使って手動で対応できるメリットもあります。

Google
Googleの検索結果
Binng
Bingの検索結果

実際にどのように構造化データが挿入されているかソースを確認してみましょう。

ブラウザを開いて 右クリック > 「ページのソースを表示

自動挿入JSON

ソース内の<script type=”application/ld+json”> 〜 </script> が挿入された構造化データです。

それでは構造化データの作成をしていきましょう。

1. プラグインを使う方法

All In One Schema Rich Snippets というプラグインが有名で設定も簡単なのですが、レーティング(評価のスコア)が5段階までしかないため細かい評価ができません。

https://tabikumo.com/img/2018/09/face-icon-boy.png

たとえるなら、通信簿で 3 と 4 の違いのようなものです。

おすすめのプラグインは WP REVIEW です。レーティングは 0 〜 10 まで 0.1刻みでの評価が可能です。このプラグインは無料版だと「thing(モノ)」のレビューしかできませんがこれで十分だと思います。

構造化データの作成から記事への挿入までこのプラグインのみで完結できるので、比較的導入しやすい方法だと思います。

設定は英語ですが難しい英語はないので頑張って設定しましょう。無料版は機能が制限されているので設定項目が少なくかえって使いやすいと思います。

プラグインをインストールしたらWordPress 管理画面より 「設定 > WP REVIEW」を開きます。「Global > Style」で記事内に表示されるレビューボックスの見た目を変更可能です。

テンプレートが Default か Aqua から選べる他、星の色や背景色、枠の色、フォントの色などを変更できるのでサイトに合った色にしましょう。

また 「Global > Defaults」で 自分の使いやすいように項目を設定しておけるので、ここで初期設定をしておくことで記事内でいちいち項目を入力しておく手間が減らせます。

リンクボタンを設定することも可能です。購入ページへと誘導するのに使えますよね。

デフォルト

レビューしたい記事の編集画面を開いて最下部の「Review」から商品のレーティング、レビューができるようになっています。(WordPress Gutenberg エディタの場合)

いろいろ表示方法を指定できるのですが無料版では機能が限られているので画像のように設定していくとよいかもしれません。

入力が完了したら、記事を更新、公開すれば自動的に構造化データが挿入されます。

Aqua テンプレートのデフォルト表記は味気ないのでCSSでカスタマイズしました。Review typeは Pointです。

SANGO で表示を確認しています。以下のファイルの内容を子テーマ内の style.css に追記してください。

https://files.tabikumo.com/index.php/s/NmxbGkmtREC6Zyy

なお、このレビューボックスを display:none で非表示にすると検索結果のリッチリザルトが消える場合があるのでご注意ください(検証中)。

速いサーバーをお探しなら

乗り換えで20,000円キャッシュバック 10/31まで

2. functions.php を編集する方法

参考にさせていただいた記事

プラグインなしでGoogleの検索結果に星を表示する方法【コピペ】

functions.php は WordPressで利用する関数などを記述しておくファイルです。編集を間違えるとWordPressが表示されなくなりますので、触ったことがない方にはおすすめしません。また、編集前にバックアップをとっておくことで元に戻すことが可能です。

FTP、SFTPクライアントでWordPress の子テーマディレクトリを開いて、エディタで「functions.php」を開きます。

「WordPressのディレクトリ > wp-content > themes > 子テーマ > functions.php」

functions.php の最下部に以下のコードを挿入します。

 

/*************************************************
// レビュー リッチリザルト
**************************************************/
classReview_4536{

function__construct(){
add_action('add_meta_boxes',[$this,'init_4536']);
add_action('transition_post_status',[$this,'save_4536'],10,3);
	}

functioninit_4536(){
add_meta_box($id,'レビュー設定',[$this,'review_form_4536'],'post','side','low');
add_meta_box($id,'レビュー設定',[$this,'review_form_4536'],'page','side','low');
}

functionsave_4536($new_status,$old_status,$post){
if(($old_status=='auto-draft'
||$old_status=='draft'
||$old_status=='pending'
||$old_status=='future')
&&$new_status=='publish'){
return$post;
}else{
add_action('save_post',function($post_id){
$arr=[
'review_name',
'review_rating',
];
foreach($arras$name_4536){
if(defined('DOING_AUTOSAVE')&&DOING_AUTOSAVE)return$post_id;
if(filter_input(INPUT_POST,'action')==='inline-save')return$post_id;
if(!empty($_POST[$name_4536])){
update_post_meta($post_id,$name_4536,$_POST[$name_4536]);
}else{
delete_post_meta($post_id,$name_4536);
}
}
});
}
}

functionreview_form_4536(){
global$post;
$review_name_4536=get_post_meta($post->ID,'review_name',true);
$review_rating_4536=get_post_meta($post->ID,'review_rating',true);
?>
<p><label>レビュー対象<inputtype="text"name="review_name"value="<?phpechoesc_html($review_name_4536);?>"size="30"class="input-4536"/></label></p>
<label>評価</label>
<selectname="review_rating"type="text">
<optionvalue="">選択してください</option>
<?phpfor($i=2;$i<=20;$i++){
$x=strval($i/2);
$selected=($x===strval($review_rating_4536))?'selected':'';
echo'<optionvalue="'.$x.'"'.$selected.'>'.$x.'</option>';
}?>
</select>
<?php}

}
newReview_4536();

add_action('wp_head',function(){
global$post;
if(!is_singular())return;
$author=get_userdata($post->post_author)->display_name;
$posted_date=get_the_date('c');
$review_name_4536=get_post_meta($post->ID,'review_name',true);
$review_rating_4536=get_post_meta($post->ID,'review_rating',true);
if(empty($review_name_4536)||empty($review_rating_4536))return;
?>
<!--4536reviewsettingbegin-->
<scripttype="application/ld+json">
{
"@context":"http://schema.org",
"@type":"Review",
"itemReviewed":{
"@type":"Thing",
"name":"<?phpecho$review_name_4536;?>"
},
"reviewRating":{
"@type":"Rating",
"ratingValue":"<?phpecho$review_rating_4536;?>",
"bestRating":"10"
},
"datePublished":"<?phpecho$posted_date;?>",
"author":{
"@type":"Person",
"name":"<?phpecho$author;?>"
},
"publisher":{
"@type":"Organization",
"name":"<?phpechobloginfo('name');?>"
}
}
</script>
<!--/4536reviewsettingend-->
<?php});

保存後、WordPress の編集画面にレビュー設定が追加されます。

レビュー対象に商品名などを入力して、評価で0.5刻みでのレーティングができます。

 

<?php for ($i=40;$i<=100;$i++){
$x=strval($i/10);

のようにしておくと、4〜10まで0.1ずつの評価が可能になります。お好みでどうぞ。

プラグインを使わず、レビューの設定も2ヶ所だけなので一番簡単な方法とも言えます。

3. 手動で構造化データを挿入する方法

少し手間がかかりますが、レビュー記事が少ないサイトなどはこの方法で対応するのがよさそうです。

 

<scripttype="application/ld+json">{
"@context":"http://schema.org",
"@type":"Review",
"itemReviewed":{
"@type":"Thing",
"name":"山菜ラーメン"
},
"reviewRating":{
"@type":"Rating",
"ratingValue":"7.8",
"bestRating":"10"
},
"author":{
"@type":"Person",
"name":"ZIMA"
}
}</script>

以下の項目を記事にあった内容に修正しましょう。

“name”:”商品名など
“ratingValue”:”スコア“,
“bestRating”:スコアの最大値
“name”:”作成者名

任意の場所にこのコードをを挿入します。分かりやすいよう、見出し下に入れておくといいかもしれません。

フォーマット > カスタムHTML
コードをペースト

これでコードの挿入は完了です。

構造化データ マークアップ支援ツール を使う方法も紹介します。

URLを開いたら構造化データの種類にチェックして、記事にURLを指定しましょう。

記事内の文字列や画像、リンクを設定していきます。文字列をドラッグすると設定項目が出てくるのでクリックすると自動的に項目が挿入されます。

項目をドラッグして設定

必須プロパティを入力したら、「HTMLを作成」ボタンを押して、JSON-LD形式の構造化データをコピーして記事内に貼り付けましょう。

https://tabikumo.com/img/2018/09/face-icon-boy.png

支援ツールを使う方法は分かりやすいのですが、レビューする記事が多いと面倒です。

構造化データを挿入した記事をテストしよう

リッチリザルトテスト (新)

構造化データ テストツール (旧)

公開した記事のURL、もしくは構造化データをコピペして検索結果がどのように表示されるか確認することが出来ます。

書式が間違っているとエラーが出ます。

なぜかリッチリザルト対象外と表示されました。

少し前までは下のようにリッチリザルトの対象と表示されていましたので、ベータ版ということで仕様が変わったのかもしれません。

検索結果では問題なくリッチリザルトが表示されます。

リッチリザルト結果

ちなみに 構造化データ テストツール でURLを検証してみると、構造化データ自体にエラーがないことが確認できました。

リッチリザルトを使いこなすために

記事を読んでみてリッチリザルトの導入は難しそうだな…と思ったでしょうか?

検索結果の見た目でCTRも変わってくると思いますので、挑戦してみましょう。

リッチリザルトの中にはまだベータ版でGoogle日本語版では表示できないものもあります。そういったものにいち早く対応することで他サイトに差をつけたいところですね。

手順を紹介するHow-to なんかも面白そうです。(日本でもモバイル版で対応しました。)

注意点としては記事と無関係の内容を構造化データに組み込むと記事自体がスパム扱いをされてしまうようなので、構造化データは必ず記事の内容に沿って作成するようにしましょう。

実際私のサイトで試したところ プラグインで記事内に自動挿入されたレビューボックスを「display:none」で非表示にしていたところ1週間くらいで検索結果からリッチリザルトが消えてしまったことがあります。(別の要因の可能性もありますが)

まだまだ発展途上の手法のためSEO的な効果は未知数で、個人では使わないほうがいいという意見もあります。信頼性が低いエアレビューができてしまうためです。

つまり検索結果を表示しているGoogleの責任ということになりかねませんよね。対応の早いGoogleが検索結果が汚染されるのを見逃すとは思えません。

とはいえリッチリザルトは注目しておきたい機能なので、まずは記事の執筆に力を入れて少しずつ対応させていって様子を見るのがよさそうです。

納得の高速サーバー

乗り換えで20,000円キャッシュバック 10/31まで

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です