seo-cro

【リッチカード】活用ガイド

【リッチカード】活用ガイド

近年Google検索結果では地図情報やアドワーズ広告のほかにも、レビュー表示やニュース記事、書籍の紹介など通常の検索結果以外の表示が充実してきている傾向があります。
その中でも本日はGoogleリッチカードについてご紹介していていきます。リッチカードとはどのようなものなのか、導入のメリット、自サイトへの導入方法から作成したコードの確認方法までをすべてご紹介いたします。

Googleリッチカードとは

Googleは検索結果をより視覚的にも訴えられるように、テキストだけでなく画像や動画を伴った表示ができるように2016年5月17日から「リッチカード」と呼ばれる機能を導入しました。アメリカでの実装ののち、全世界には2017年3月22日よりモバイル及びPC検索結果に「リッチカード」が導入されています。2020年1月時点、日本でのリッチカード、「レシピ」・「飲食店」・「映画、テレビ、書籍」の3カテゴリーが対象となっています。

リッチカード導入のメリット

リッチカードを導入するメリットはなんといってもユーザーに視覚的なアプローチができることです。画像はもちろん動画についてもカード内に表示することができ、ユーザーはスワイプ一つでカード内の希望の情報に遷移することが可能です。検索結果の面を獲得し、自社サイトへの流入を増やす効果が期待できます。
リッチカード2

モバイルページでは、特にユーザビリティの観点からもリッチカードの実装が推奨されているといえます。現状国内の検索においては対応カテゴリーが少ない状況ではありますが、アメリカではさまざまなカテゴリーがリッチカードの適応対象となっているので、今後に向け対象領域以外のサイトについてもチェックしていただくことをお勧めします。

リッチカードを導入しよう

リッチカードの導入はWEBページに構造化データにて使用する画像や特定のデータを記載することで指定することができます。Googleでは、このデータの記載については「JSON-LD」の形式で記述することを推奨しています。各カテゴリーでのリッチカード情報に記載に際しては、Google 検索デベロッパー ガイドにてカテゴリーや情報ごとのコード例が解説されています。構造化データというと難解なイメージもありますが、コード例をもとに自社サイトに合わせた変更を行いますと、比較的簡単に構造化データの記載が可能となります。

▼Google 検索デベロッパー ガイド
https://developers.google.com/search/docs/guides/search-gallery

映画

リッチカードを使って映画情報を記載する場合、映画のタイトル、監督、画像など、詳細情報が可能です。カルーセルはモバイルデバイスのみの使用となります。リッチカードを作成することで、ユーザーは好みの映画を見つけやすくなり、自サイトへの誘導を効果的に行うことが可能になります。

概要ページ + 複数の詳細ページを表示するための構造化ソース例
※下記のソースを参考に自社サイトの構造化データについても作成いただくとよいでしょう。

  <html>
      <head>
          <title>The Best Movies from the Oscars – 2018 </title>
          <script type=”application/ld+json”>
         {
             “@context”:”https://schema.org”,
             “@type”:”ItemList”,
             “itemListElement”:[
                 {
                     “@type”:”ListItem”,
                     “position”:1,
                     “url”:”http://example.com/a-star-is-born.html”
                 },
                 {
                     “@type”:”ListItem”,
                     “position”:2,
                     “url”:”http://example.com/bohemian-rhapsody.html”
               },
                 {
                     “@type”:”ListItem”,
                     “position”:3,
                     “url”:”http://example.com/black-panther.html”
                 }
             ]
         }
          </script>
      </head>
      <body>
      </body>
  </html>
 

レシピ

レシピ検索において、リッチカードを用いる場合はレビュー評価や、調理時間、栄養成分などの情報を記載するとよいでしょう。レシピ検索においても画像は重要な要素となりますので、検索結果の表示させることでサイトへのユーザー導線を強固なものにすることができます。

レシピ検索のための構造化データソース例


  <html>
      <head>
          <title>Grandma’s Best Pie Recipes</title>
          <script type=”application/ld+json”>
         {
             “@context”: “https://schema.org”,
             “@type”: “ItemList”,
             “itemListElement”: [
                 {
                     “@type”: “ListItem”,
                     “position”: 1,
                     “url”: “https://example.com/apple-pie.html”
                 },
                 {
                     “@type”: “ListItem”,
                     “position”: 2,
                     “url”: “https://example.com/blueberry-pie.html”
                 },
                 {
                     “@type”: “ListItem”,
                     “position”: 3,
                     “url”: “https://example.com/cherry-pie.html”
                 }]
         }
          </script>
      </head>
      <body>
      </body>
  </html>
 

店舗

現状店舗についてのリッチカード表示は店舗やサイトが限定されています。フォーム登録の有無等下記のURLを確認指定ください。

https://developers.google.com/search/docs/data-types/local-business

※補足
また構造化データの作成に際しては、下記に3つのガイドラインを遵守する必要があります。構造化データサンプルと共に、ガイドラインについても確認を行い、ソースの作成を行うようにしましょう。

● ウェブマスター向けガイドライン
● 構造化データに関する一般的なガイドライン
● カルーセル ガイドライン(該当する場合)

構造化データを作成したら

構造化データを作成したら、本番反映を行う前に作成したコードに問題がないのかリッチリザルトテストを用いて検証を行ってください。リッチリザルトテストの検証についてはコードのみの検証もしくは、一般公開しているURLを入力する検証どちらでも確認可能です。テストではコードが正しいかの判別だけでなく、構造化データにどのようなアイテムが記載されているかについても表示されます。
リッチカード3
https://search.google.com/test/rich-results

テストの結果リッチリザルトの対象となる構造化データが作成出来たらいよいよ作成したコードをWEBページに埋め込んでいきましょう。

Google Search Consoleを使ったリッチカードの確認

構造化データをページに追加した後、サーチコンソールにて確認を行いましょう。サーチコンソールを利用した確認では、「URL 検査ツール」を使用します。対象サイト登録済みのサーチコンソール画面上枠に対象ページURLを入力します。
URLテストでは、Googleからのインデックス状況、クロールの有無をはじめ、検索ロボットからページがどのように認識され、表示されるかを確認することができます。URLテストにて問題がないようでしたらURLの再クロールを依頼してください。
リッチカード4

ワードプレスでのリッチカードの作成

対象サイトをワードプレス等CMSを用いて作成している場合はツール内のプラグインを利用し、構造化データを作成すると便利です。プラグインを探す場合は、『構造化データー』や『リッチカード』、『データハイライター』等のワードでプラグイン検索を行うとよいでしょう。

「対象カテゴリーを絞り重要なページのみ構造化データに記載を行いたい。」もしくは「複数ページでリッチカードを表示したい。」など要望に応じて便利なプラグインは異なります。複数のプラグインをインストールし、希望にあうツールを選定していくことが重要です。
またプラグインによっては、Google リッチリザルトテストまで完結できるツールもあります。そのようなプラグインを選ばなかった場合には、必ず別途プラグインで作成した構造化データコードをリッチリザルトテストに入力し、問題がないかどうか確認するようにしましょう。

まとめ

Googleリッチカードの導入は、

・ユーザーとの接触・コンバージョンの機会を増加
・よりインタラクティブな検索表示によりユーザビリティを向上
・モチベーションの高いユーザーのサイト誘導

などの面で非常に有効な施策の一つです。日本語圏の検索結果ではリッチカードが導入されているのは3カテゴリーとまだまだ少ないものの、今後網羅されるカテゴリーが増えていくことは十分に考えられるでしょう。

Google 検索デベロッパー ガイドの事例紹介では、楽天レシピがリッチカードをはじめとした構造化データを追加したことで、検索エンジン経由のトラフィックを2.7倍に、サイト滞在時間を 1.5 倍に増加したなどの事例も紹介されていますので、ご確認いただき自然検索経由のユーザー獲得施策として活用ください。


ハートラスのウェブサイトコンサルティングサービスの詳細はこちらご相談やお問い合わせはお気軽にご連絡ください

この記事のライター

須田希実

須田希実株式会社ハートラス

ウェブコンサルティングディヴィジョン

2018年にクロスフィニティ株式会社へ中途入社。 美容業界からIT業界に転身後、その経験を活かし大手エステポータルサイトのマーケティングに携わる。 関わったサイトのユーザー数は10倍に伸長し、収益増に大きく貢献する。 また、数多くのコンテンツマーケティングを支援し、収益アップの観点から数多くの文章コンテンツをプロデュースする。 日本クラウドソーソング検定協会では、実体験に基づく知見を活かし、セミナー講師として数多くの講演を実施。 業界歴10年以上の経験豊富さが強み。

おすすめの記事

関連する記事