SEO対策なら株式会社ペコプラ > SEO対策 > SEO内部対策 > リッチスニペットを表示させる方法！設定方法とHTMLの書き方を解説

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

SEO内部対策

SEO対策

2022.12.13

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

リッチスニペット（リッチリザルト）とは？

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

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

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

名称の種類

リッチスニペット（rich snippets）
リッチリザルト（rich results）
リッチカード（rich cards）
エンリッチリザルト（enriched results）

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

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

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

スニペットの種類と特徴

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

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

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

SEO対策で効果的にスニペットを使うには？スニペットの種類と使い方について

SEO対策では主に検索順位を上げることを目標としていますが、そのためには、ユーザーのニーズに合致するよう対策を行うことによってサイトへの訪問やリ...

強調スニペットの狙い方！検索1位よりも上を掴もう

強調スニペットとは、Googleの検索結果の上部に表示されるページからユーザーの疑問や悩みの答えとなる部分を抜粋したものです。強調スニペットに表...

リッチスニペットの種類

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

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

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

商品情報

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

パンくずリスト

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

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

SEO対策に有効な「パンくずリスト」とは

パンくずリストをご存じでしょうか。パンくずリストはSEOに効果的とされており、ぜひサイトを作る際には導入してほしい要素です。ただ...

レビュー

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

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

イベント

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

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

検索窓

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

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

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

サイト内検索を簡単に実装！Googleカスタム検索の設置方法とデザインのカスタマイズ

みなさんサイト内検索は使ってますか？サイト内検索といえばヘッダーやサイドメニューの中にチョロっと設置されているような脇役的存在であり、さらに...

動画

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

レシピ

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

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

会社概要・サイトリンク

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

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

店舗情報

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

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

求人情報

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

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

FAQ（よくある質問）

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

FAQを構造化データを使用して検索結果に表示する方法

検索をしていて、検索結果にFAQのようなものが表示されているのを見た方もいると思います。これは構造化データを使用して、FAQを検索結果に表示され...

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

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

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

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

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

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

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

CTR（クリック率）の向上

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Google社員が今後より難しくなると予測した構造化データをここで一度おさらい

2019年に新しいタイプの「How-toリッチリザルト」が登場し、今後は記述する機会が増えそうな「構造化データ」。そんな構造化データについてGo...

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

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

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

そこで重要となるのが構造化データのマークアップ、すなわち「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

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

<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つのパートで成り立っています。

各パートの内容

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

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

書き換える個所

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

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

パンくずリストの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

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

<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>

書き換える個所