リッチスニペットを表示させる方法!設定方法とHTMLの書き方を解説

SEO内部対策
SEO対策
2022.06.09
リッチスニペットを表示させる方法!設定方法とHTMLの書き方を解説

リッチスニペットとは、通常よりも多くの情報が盛り込まれている「視覚的アピール度」の高いスニペットのことです。とは言え、表示させる方法が分からなくて諦めている方も多いのではないでしょうか。そこで今回は、設定方法・HTMLの書き方・テスト方法などをまとめてみました。

リッチスニペット(リッチリザルト)とは?

リッチスニペットとは、「レビューの点数」や「パンくずリスト」といった通常より多くの情報まで検索結果に表示されるスニペットを指しています。

より多くの情報を盛り込んでいるため、「豊な=rich」という単語が名称に反映されているのでしょう。

ただし、名称は統一されておらず、下記の全てがリッチスニペットを表しています。

▼名称の種類

  • リッチスニペット(rich snippets)
  • リッチリザルト(rich results)
  • リッチカード(rich cards)
  • エンリッチリザルト(enriched results)

ちなみに、最も新しい名称は「リッチリザルト」です。

スニペット・強調スニペット・リッチスニペットの違いとは?

スニペットには下記の3種類があり、最大の違いは掲載される情報量です。

▼スニペットの種類と特徴

  • 強調スニペット:最も多くの情報が含まれており、検索結果の最上部に表示される
  • リッチスニペット:表示される情報が通常よりも多く、強調スニペットよりも少ない
  • 通常スニペットの表示例:最小限の情報で、ページ内容とKWの関連性を表している

情報量が多くなるほど人目を引く反面、表示される難易度は高くなります。

「実際の見た目を画像で確かめたい!」という方は、下記の記事を参照して下さい。

▼関連記事

リッチスニペットの種類

ここからは、特にニーズの高い11種類のリッチスニペットをご紹介します。

なお、「もっと自社のサービスに適したタイプはないのかな?」と悩まれているからは、全種類のリッチスニペットが紹介されているGoogle検索セントラルの「検索ギャラリーを見る」をチェックしてみましょう。

にて、全種類のリッチスニペットが紹介されていまする

商品情報

商品情報

商品の価格・在庫・特徴・レビューなどが表示されます。ECサイトや個人輸入のオンラインサイト、通販アフィリエイトサイトなどにおすすめです。

パンくずリスト

パンくずリスト

パンくずリストとは、ユーザーが今WEBサイト内のどの位置にいるのかを視覚的に分かりやすくするために、トップページから該当ページまでのリンク経路を表示したものです。

パンくずリストについては下記の記事で解説しています。

▼関連記事

レビュー

レビュー

ランキングサイトや口コミサイト、オンライン通販サイトなどで多用されているのがレビューのリッチスニペットです。

レビューの星の部分は黄色表示されます。また、どのくらいの人からレビューが投稿されているのかも数字で表示されます。

イベント

イベント

通常のスニペットの下に、直近のイベントについて「いつ・どこで・何が」行われるのかが表示されます。

イベントサイトやチケットサイトを運営している場合は、ぜひ掲載したいところです。

検索窓

検索窓

大手不動産サイトや通販サイトで見かけた方もいると思います。

特にサイト全体のコンテンツ数が多かったり複雑な階層だったりした場合は、検索窓から直接キーワードを入力してアクセスできるので、ユーザーにとって便利な機能です。

検索窓(サイト内検索)については下記の記事でも解説しています。

▼関連記事

動画

動画

料理レシピ・DIY・ガーデニング・市販家具の組み立て方など、ハウツー情報が集客に役立つサイトにおすすめ。実物のイメージが伝わるほど、CVアップが期待できます。

レシピ

レシピ

レシピのリッチスニペットは、youtubeなどの動画やレビューが含まれているのが特徴。

ユーザーの目に留まりやすいので、該当するコンテンツには積極的に設定した方が良いでしょう。

会社概要・サイトリンク

会社概要・サイトリンク

会社概要は、その会社がどのような組織なのか知りたい方に役に立つ情報です。会社の規模や事業など、その会社がどのような業務を手掛けているかが一目でわかります。

特に、就職や転職活動をされている方にとっては、事業内容や採用情報の有無など欲しい情報が一目で見つかりるので、利便性の高い機能と言えるでしょう。

店舗情報

店舗情報

「会社概要」と「商品情報」をミックスした使用になっているのが特徴。

商品情報と同様、レビュー・価格帯・営業時間・休店日なども一緒に表示されます。今後は、モバイルユーザー向けの仕様が必須となるでしょう。

求人情報

求人情報

「求人・業種・エリア」などのキーワード検索でヒットするリッチスニペットは、ひと際サイズが大きく、いくつかの類似情報がまとめて表示されるのが特徴です。

給与・勤務形態・残業の有無など、ユーザーが興味を示す情報が掲載され、類似求人へ誘導できる仕組みになっています。

FAQ(よくある質問)

検索下位よりテキストが長文で、下部に「お申込みについて」や「料金(お支払い)について」などのリンクがあり、直接アクセスできるようになっています。

▼関連記事

リッチスニペットのSEO的メリット

結論から言うと、通常のスニペットからリッチスニペットへと昇進しても、直接的なSEO効果はありません。

Googleも長らく「リッチスニペットと検索ランキングは無関係」と、否定的な立場を貫いています。

とはいえ、通常のスニペットよりも人目を引くのは周知の事実。

そこでここからは、リッチスニペット化がSEOに与える間接的な効果についてご紹介します。

▼リッチスニペットのメリット

  • CTR(クリック率)の向上
  • ユーザーエクスペリエンスに貢献
  • 検索結果への反映が早くなる
  • 検索結果の正確性がアップする

CTR(クリック率)の向上

最大のメリットは、何と言ってもオーガニック検索からの流入増に伴うCTRの向上が見込めるという点でしょう。

通常のSERP(検索結果)には、似たようなスニペットが並んで表示されており、どのコンテンツにアクセスすべきか迷ってしまうユーザーも少なくありません。

そんな中、明らかに他とは違うリッチスニペットが表示されていれば、ユーザーに大きなインパクトを与えるのは当然でしょう。

他のサイトより目立っているというだけで、ユーザーのアクションを後押ししてくれるのです。

ユーザーエクスペリエンスに貢献

リッチスニペットは表示面積が通常より広い分、より多くの情報が盛り込まれているうえ、レビューの星マークや画像や動画といった視覚的にアピールできる要素が満載です。

直接的な表現は、最短距離で答えに辿り着こうとしているユーザーにとって良質なヒントとなり、結果的にユーザーエクスペリエンスがアップします。

検索結果への反映が早くなる

検索結果に反映される速さは、クローラーがどれだけ早く情報を処理できるかどうかで決まります。

つまり、リッチスニペット化するために作成した構造化データはクローラーが理解しやすいHTMLに設置していますので、通常より短時間で検索結果に反映される可能性が高いのです。

検索結果の正確性がアップする

構造化データを介してクローラーに情報を伝えていることで得られるメリットは、検索結果の反映速度だけではありません。

反映速度と同じ原理で、検索結果における正確性のアップも期待できます。

リッチスニペットの設定方法と手順

手動によるリッチスニペットの設定プロセスを大きく分類すると、下記の2ステップに分かれています。

▼リッチスニペットの設定手順

  1. 構造化データのマークアップ
  2. マークアップした構造化データをHTML内に設置する

なお、後述する支援ツールまたはデータハイランダーであれば一連の作業をまとめて行えますが、トラブルが発生した時に対処できるよう、手書きの設定方法も把握しておいた方が良いでしょう。

▼関連記事

構造化データのマークアップ

リッチスニペットを検索結果に表示させるには、検索エンジン(クローラー)にコンテンツの内容を正しく伝える必要があります。

しかし、人間なら「佐藤」という文字を見ただけで「これは名前だな!」と理解できますが、検索エンジンはあくまでロボットですから、サイト内に書かれているテキスト情報を「文字の羅列」としてしか認識できません。

そこで重要となるのが構造化データのマークアップ、すなわち「HTMLのタグ付け」です。

HTMLに「addressタグ」が付いていれば、検索エンジンは「連絡先」だと正しく理解できるようになります。

つまり、構造化データのマークアップとは、検索エンジンにとって難解な表記方法を理解しやすい形式に書き換える作業なのです。

マークアップの方法を決定する

構造化データをマークアップする方法は、下記の3種類から選べます。

▼マークアップ方法の種類

  • HTML上に手書きでマークアップする
  • 構造化データマークアップの支援ツールを使う
  • データハイライターを使用する

Googleの公式サイトではサポートしている支援ツールを紹介していますが、最もメジャーなのはGoogle Search Consoleの機能を使う「データハイライター」です。

同じレイアウトのコンテンツを「ページ群」として認識してくれるので、まとめてタグ付けしてくれます。

ただし、データハイライターは全ての構造化データに対応している訳ではありません。

下記に該当している場合のみ、有力な選択肢となります。

▼データハイライターが使用できるケース

  • 記事
  • イベント
  • 商品
  • ソフトウェア
  • アプリケーション
  • 書籍

ボキャブラリーとシンタックスを決定する

手書きで構造化データのマークアップを行う場合は、あらかじめ使用する「ボキャブラリー」と「シンタックス」を決めておかなければなりません。

  • ボキャブラリー(vocabulary):マークアップする物事を定義するもの
  • シンタックス(syntax):単語の意味を正しくロボットに伝えるための記述方式(文法書)

どちらも数種類の規格が存在していますが、その全てがGoogleのサポート対象という訳ではありません。

今回は、Googleが推奨している「schema.org」というボキャブラリーと、「JSON-LD」というシンタックスを使った構造化データのマークアップ方法について解説します。

マークアップした構造化データをHTML内に設置する

手書きでマークアップした構造化データの設置場所は、「ページの末尾」が最もおすすめです。

▼設置場所の影響

  • ページの前方:構造体が「<summary>サマリータグ」などの影響を受けやすい
  • ページの末尾:他のタグに影響されるリスクが低い

構造体が悪影響を受けないよう、bodyの閉じタグ(</body>)の手前などに設置しましょう。

リッチスニペットの書き方

ここからは、「schema.org」と「JSON-LD」を使った構造化データの書き方について解説します。

▼HTMLの記述例

  • 商品情報とレビューのHTML
  • パンくずリストのHTML
  • イベントのHTML

商品情報とレビューのHTML

商品情報とレビューのHTML

上記のリッチスニペットを検索結果に表示させるには、下記のように記述します。

<script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Product",
      "name": "商品名",
      "description": "説明文",
      "image": [
        "https://example.com/photos/16x9/image.jpg",
        "https://example.com/photos/4x3/image.jpg",
        "https://example.com/photos/1x1/image.jpg"
       ],
      "sku": "商品アイテムID",
      "mpn": "グローバル識別子",
      "brand": {
        "@type": "Brand",
        "name": "空気清浄機"
      },
      "review": {
        "@type": "Review",
        "reviewRating": {
          "@type": "Rating",
		  "ratingValue": "4",
          "bestRating": "5"
        },
		"author": {
            "@type": "Person",
            "name": "レビュー人物名"
        }
	  },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.6",
        "reviewCount": "449"
	  },
	  "offers": {
        "@type": "Offer",
        "url": "http://www.example.com/item",
        "price": "17360",
        "priceCurrency": "JPY",
        "priceValidUntil": "2022-12-31",
		"itemCondition": "http://schema.org/NewCondition",
        "availability": "http://schema.org/InStock"
      }
    }
</script>

上記の構造化データは、表している内容が異なる3つのパートで成り立っています。

▼各パートの内容

  1. 3~17行目:「schema.orgの宣言」と「productの必須プロパティ」
  2. 18~34行目:レビューの集計結果
  3. 35~43行目:商品情報に関する説明

下記の12項目を書き換えるだけで、別商品のリッチスニペットとして使えます。
※必須ではないものを除くと、書き換える項目はさらに少なくなります。

▼書き換える個所

  • 5行目:商品名
  • 6行目:説明文
  • 8~10行目:画像のURL
  • 12行目:商品アイテムID
  • 13行目:グローバル識別子
  • 16行目:商品名(ジャンル)
  • 22行目:商品の評価(レビュー者)
  • 27行目:レビュー人物名
  • 32〜33行目:商品の評価とレビュー数(全体)
  • 37行目:商品のURL
  • 38行目:商品の価格
  • 40行目:対象商品が現在の価格でその日以降は購入(使用)できなくなる日付

より詳しく知りたい方は、こちらGoogle検索セントラル「Product」をご参照ください。

パンくずリストのHTML

パンくずリストのHTML

上記のリッチスニペットを検索結果に表示させるには、下記のように記述します。

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [
	  {
        "@type": "ListItem",
        "position": 1,
        "name": "SEO対策なら株式会社ペコプラ",
        "item": "https://pecopla.net/"
      },
	  {
        "@type": "ListItem",
        "position": 2,
        "name": "SEO対策",
        "item": "https://pecopla.net/seo-column"
      },
	  {
        "@type": "ListItem",
        "position": 3,
        "name": "SEO内部対策",
		"item": "https://pecopla.net/seo-column/internal-countermeasure"
      }
	 ]
    }
</script>

押さえておくべきポイントは、下記の3点です。

▼ポイント

  • position:パンくず要素の順番
  • item:各要素のURL
  • name:ページのタイトル

今回のパンくずリストは3層なので、ポジション1~3に沿って「各要素のURL」と「ページのタイトル」を書き替えるだけで、簡単に転用できるようになります。

より詳しく知りたい方は、こちらGoogle検索セントラル「パンくずリスト」をご参照ください。

イベントのHTML

イベントのHTML

リッチスニペットを検索結果に表示させるには、下記のように記述します。

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Event",
      "name": "イベント名",
      "startDate": "2022-06-01",
      "endDate": "2022-06-30",
      "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
      "eventStatus": "https://schema.org/EventScheduled",
      "location": {
        "@type": "Place",
        "name": "イベント名",
        "address": {
          "@type": "PostalAddress",
          "name": "開催場所の住所"
        }
      },
      "image": [
        "https://example.com/photos/16x9/image.jpg",
        "https://example.com/photos/4x3/image.jpg",
        "https://example.com/photos/1x1/image.jpg"
       ],
      "description": "説明文",
      "offers": {
        "@type": "Offer",
        "url": "https://example.com/event",
        "price": "3000",
        "priceCurrency": "JPY",
        "availability": "https://schema.org/InStock",
		"validFrom": "2022-04-01"
      },
      "performer": {
        "@type": "PerformingGroup",
        "name": "パフォーマー名"
      },
      "organizer": {
        "@type": "Organization",
        "name": "運営会社",
        "url": "https://example.com/"
      }
    }
</script>

▼書き換える個所

  • 5行目、12行目:イベント名
  • 6行目、7行目:開催期間
  • 15行目:開催場所の住所
  • 19〜21行目:画像
  • 23行目:説明文
  • 26行目:URL
  • 27行目:価格
  • 30行目:先行販売
  • 34行目:パフォーマー名
  • 38行目:運営会社

より詳しく知りたい方は、こちらGoogle検索セントラル「Event」をご参照ください。

リッチスニペットのテスト方法

完成した構造化データは、必ずテストを行ってからHTMLに内に設置しましょう。

構造化データをテストする方法は、下記の3種類があります。

▼テスト方法

テスト結果で構造化データが正しくマークアップされていると実証されたら、HTML内の末尾に設置して完了です。

リッチリザルトテストツール

「URL」または「HTMLコード」のどちらでも有効性を確認することができます。

PCとスマホの切り替えが可能なので、両方確認してみましょう。

▼テストの手順

  1. リッチリザルトテストツールにアクセスする
  2. 「<>コード」をクリックする
  3. 作成した構造化データを張り付ける
  4. 画面下部のプルダウンメニューから「パソコン」または「スマホ」を選択
  5. 右下の「コードをテスト」をクリックする
  6. 右側の仮面にテスト結果表示される
  7. 「結果をプレビュー」をクリックして見た目をチェックする

▼関連記事

Google Search Console

こちらは、「Google Search Console」の拡張機能を使ったテストです。

リッチリザルトレポートが装備されており、構造化データを設置するだけで「拡張メニュー」一覧が表示され、結果のステータスが一目で分かる仕組みになっています。

▼ステータスの種類

  • 有効
  • 有効(警告あり)
  • エラー

リッチスニペットが表示されない時のチェック項目

期間を置いてもリッチスニペットとして表示されない時は、下記の項目をチェックしてみましょう。

リッチスニペットを表示させるには、下記の全項目を満たしていなければなりません。

▼チェック項目

  • 正しく実装できているか?
  • Googleのガイドラインに沿っているか?
  • 検索クエリ(キーワード)とページ内容の関連性は高いか?
  • webサイトのクオリティは良質か?

ただし、構造化データのマークアップが完璧で、なおかつ上記のチェック項目を全て満たしているからと言って、100%スニペット化に成功する訳ではありません。

リッチスニペットとして検索結果に表示されるのは、ほんの一握りのページだけ。

検索キーワードを扱っているサイトが多いほど、難易度は高くなります。

▼関連記事

リッチスニペットの注意点

リッチスニペット化は、より多くのユーザーに閲覧してもらえる有効な手段ですが、万能ではありません。

下記のような注意点についても理解しておきましょう。

▼注意点

  • 必ずしも表示されるわけではない
  • 検索順位が向上するとは限らない
  • 品質が悪いとスパムと判定される可能性がある

まとめ

リッチスニペットの設定方法は、構造化データをマークアップするコツさえ掴めれば、さほど難しくはありません。

手軽な支援ツールを使うのも賢い方法ですが、トラブルに備えて一度は手書きで試しておくと良いでしょう。

必ずしも希望通りにリッチスニペットとして表示されるとは限りませんが、間接的なSEO効果が期待できるので、挑戦してみる価値は十分にあります。

SEOやWEB制作に関する情報を検索する

コラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)