リッチスニペットとは、ユーザーが検索結果画面からどのページをクリックするか、その判断を助けるための視覚的にページ内容が想像できるような情報のことです。
通常、検索結果の下部に表示されるのは、スニペットと呼ばれる、要約（description）やページ内の文言を抜粋したもので、基本的には文字情報だけで構成されています。
一方リッチスニペットは、スニペットに加えて、ページの主題となるものに対して画像・価格・評価などを併せて表示します。スニペット（snippet）の表現が豊か（rich）になるためrich sunippetと呼ぶようです。
リッチスニペットを表示させるには構造化データを使用して記述する必要があります。構造化データとは、各要素がそれぞれ何を意味するのかを検索エンジンに伝えるためのものです。
そう聞くと難しいと思うかもしれませんが、ポイントを押さえればそれほど大変ではありません。
リッチスニペットを使用するとどんなメリットがあるのか、どのように表示させるのか、その際どのような注意すべき点があるのかをまとめました。
2016.4.18 記事の内容の修正・更新を行いました。
目次
- リッチスニペットのSEO上のメリット
- リッチスニペットの種類
- リッチスニペットの設定方法
- リッチスニペットの書き方
- リッチスニペットのための便利なツール
- 構造化データの確認
- リッチスニペットの注意点
- スマホでのリッチスニペット表示について
- リッチスニペットまとめ
リッチスニペットのSEO上のメリット
そもそもリッチスニペットにはどのようなメリットがあるのでしょうか。
検索結果画面の表示を変えるリッチスニペットは、検索流入を増やしたいサイトオーナーにとって大きな武器になります。
クリック率
リッチスニペットによって、検索結果画面で文字情報が並ぶ中で画像など他の検索結果と一目で違うとわかる情報が表示されます。
これにより、自サイトのページを引き立たせ、検索ユーザーの注意を引き、クリック率も高くなると考えられます。
クリック率が上がれば自サイトへの流入を増やせますので、これがリッチスニペットを実装するメリットとしてもっとも大きいものでしょう。
検索順位
以前Googleは、「リッチスニペットのためにコンテンツをマークアップしても、検索順位は変わらない」と言及していました。
ただ、今後リッチスニペットをはじめ構造化データによってGoogleがページ内容を理解し、検索クエリと関連したページだと判断すれば、検索順位にもわずかとはいえプラス効果があるのではないかと考えています。また、ページ内容の理解が進めば、これまで意図していなかった検索クエリでひっかかることもあると考えられます。
とはいえ現時点では、SEO的にはクリック率の向上を目指して行うのがメインとなる施策となるでしょう。
リッチスニペットの種類と一覧
リッチスニペットにはどのような種類があるのでしょうか。
例とともにご紹介します。
パンくずリスト
パンくずリストはサイトトップから該当のページまでのリンク経路を表示したものです。サイトの構成をユーザーや検索エンジンに伝える役割をしています。
通常の検索結果画面にはページURLが表示されていますが、構造化データと併せて記述することでパンくずリストの要素を表示させることができます。
検索ユーザーにとっては、ページのトピックがそのサイトにおいてどのように位置づけられているのか判断がつきやすくなるのではないでしょうか。
なお、検索結果画面のURL部分は正確にはスニペットと呼びませんので、Googleの分類上もパンくずリストはリッチスニペットには入らないようです。
写真・画像
リッチスニペットとしてページのトピックとなる画像が表示されます。
画像は検索結果の中で目を引くので積極的に活用したいところですが、現在のところ表示が確認できているのはレシピと動画のキャプチャだけのようです。
レビュー・評価
該当するページがテーマとするものがユーザーからどれだけ評価されているのかが、星の数で表されます。
また、何人の人のレビューを集めているのかが表示されます。
星の色は黄色となっていて検索結果画面の中でも目を引きます。対応するコンテンツを持っているウェブマスターならぜひ掲載したいところです。
価格
価格のリッチスニペットは商品情報の１つで、レビューとともに表示されていることが多いようです。
イベント
通常のスニペットに加えて、ページ内に記載したイベントのうちいくつかについて、日時やイベント名・場所等が表示されます。
検索窓
あるサイトに行きたいと思って検索した際に、次のような検索ボックスを見たことはないでしょうか。
この検索窓にキーワードを入れると、直接そのサイト内の検索結果ページに飛ぶことができます。
すでに行きたいサイトは決まっているものの、行きたいページを含めて検索しなかったユーザーにとってはうれしい機能かもしれませんね。
なお、こちらもパンくずリストと同様、Googleはリッチスニペットに含めていないようです。
リッチスニペットの設定方法
リッチスニペットを表示させるためには構造化されていないHTMLテキストを構造化データを使用して記述する必要があります。
それを読んだGoogleはリッチスニペットとして表示するかどうかを決定します。
リッチスニペットを表示させるための記述は、基本的に既存のHTMLに書き加えるだけのもので、必ずしも難しいものではありません。
構造化データを記述するためには、使用するボキャブラリーとシンタックスを決める必要があります。
まずはこれらについてご説明します。
ボキャブラリーとシンタックス
構造化データにおけるボキャブラリーはマークアップする物事を定義するもの、シンタックスはそのマークアップの記述方式のことで、それぞれイメージするならば、ボキャブラリー（vocabulary）は単語を集めた単語集、シンタックス（syntax）は単語の意味をロボットに伝えるための書き方を決めた文法書となるでしょうか。
リッチスニペットを表示させるための構造化データはこれから設定する場合は、マークアップする要素を規定するschema.orgと、記述フォーマットであるJSON-LD、もしくはRDFaやmicrodataを組み合わせるのがよいでしょう。
schema.org
schema.orgはGoogle, Yahoo, microsoftの3社で策定を進めていたボキャブラリーの規格です。
Googleはもちろん、Microsoftが使っている検索エンジン、Bingにも有効なボキャブラリーのはずです。（現在のBingの対応状況については裏づけを取っておりません。）
schema.orgのほかにもボキャブラリーとしてdata-vocabulary.orgというものがあります。ただ、現在はその機能をschema.orgに引き継いでおり、Googleのサポートが遅れていたパンくずリストにマークアップされているのを見かけるのがほとんどです。
先日パンくずリストも対応するようになりましたので、今から構造化マークアップを考えるのであれば、ボキャブラリーはGoogleが推しているschema.org一択でよいかと思います。
シンタックス
シンタックスは、構造化データがどのような物事について記述されていて、各要素がどんな値をとっているか、その骨格（論理構造）を示すために必要なものです。
Googleは現在以下のシンタックスをサポートしています。
- microdata
- RDFa
- JSON-LD
Googleが最も推しているのはJSON-LDですが、どれを使ってもいいことになっています。
シンタックスを選ぶ基準は以下のように考えるとよいのではないでしょうか。
- Googleが最も推奨しているJSON-LDを使う
- 一部のJSON-LDの記述がリッチスニペットに対応していない場合があるため、その場合はRDFaもしくはmicrodataを使う
- RDFaかmicrodataかで迷ったらRDFaを採用する（理由としては、microdataのW3C勧告は2013年を最後に更新されていないため ）
- 自身のサイトの環境と相性のよいものを選ぶ
- コーディングやメンテナンスのしやすいものを選ぶ
- Google以外にも構造化データを読んでもらいたいロボットが対応しているものを選ぶ
リッチスニペットの表示を主目的とするのであれば基本的にはJSON-LDを使い、サポートされていない形式の場合はRDFaを使うことをおすすめします。
なお、ボキャブラリー、シンタックスや構造化データについては以下の記事をご覧ください。
構造化データとは？～HTMLを構造化する前に知っておきたいこと～
リッチスニペットの書き方
ボキャブラリーとシンタックスが決まれば、ページ内コンテンツに沿って各要素をマークアップしていきます。
ただ、リッチスニペットはサイトオーナーが表示させる内容を好きなようにカスタマイズできるわけではなく、フォーマットと表示できる項目がGoogleによってある程度決められています。
ここでは主なリッチスニペットの書き方をご紹介します。
表示させるための構造化データはCMSでphpなどを用いているのであればテンプレートを編集すればよく、また後述するようにプラグインなどを用いて設定することも可能です。
パンくずリスト
パンくずリストのリッチスニペットは長らくschema.orgに対応していなかったため、schema.orgの前身であるdata-vocaburaly.orgで記述するのが通例でした。
ただ対応されたのでschema.orgでの記述が可能になっています。
ここではschema.orgとJSON-LDを用いた記述例をご紹介します。
なお、JSON-LDによるマークアップは、HTMLソース内のhead内やbody内のいずれでもどこに記述しても認識されるようです。
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "https://www.brain-solution.net/",
"name": "TOP"
}
},
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "https://www.brain-solution.net/about/",
"name": "会社案内"
}
},
{
"@type": "ListItem",
"position": 3,
"item":
{
"@id": "https://www.brain-solution.net/about/office/",
"name": "オフィス紹介"
}
}
]
}
</script>
マークアップする項目は、各パンくずリスト要素の順番、URL、名前です。
次の記事により詳しく書いておりますのでよろしければご覧ください。
パンくずリストをschema.orgでリッチスニペットにしてみました
商品情報
商品情報のリッチスニペットはECサイトがもっとも力を入れる部分でしょう。
マークアップにより、価格、評価、レビュー数などが表示されます。
商品情報については、執筆時点（2015.8.17）でJSON-LDでのリッチスニペット表示が一部対応準備中とのことなので、microdataでの記述をお勧めします。
※追記：商品情報についてもJSON-LDによる記述がサポートされました。
Google、商品とレビューのschema.orgにJSON-LDをサポートしたことを正式にアナウンス -海外seo情報ブログ
なお、レシピ、イベント、動画、記事については対応がされているようです。
＼(^o^)／JSON-LDのリッチスニペットをGoogleがいよいよサポート開始 -海外seo情報ブログ
商品情報の一覧ページに記述することを想定して、リッチスニペットとして使用される最低限のマークアップ例を示します。
・JSON-LD
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": "さくらまんじゅう",
"offers": {
"@type": "AggregateOffer",
"lowPrice": "120",
"highPrice": "130",
"priceCurrency": "JPY"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.4",
"ratingCount": "89"
}
}
</script>
・microdata
参考までにmicrodataによるマークアップも示します。
microdataは表示させるテキストを直接マークアップする形式となっています。
<div >
<span >さくらまんじゅう</span>
<span >
<span >120</span>～
<span >130</span>円<meta content="JPY" />
</span>
<span >
平均評価: <span >4.4</span> <span >89</span>人のレビュー
</span>
</div>
マークアップする項目は、商品の名前、価格と通貨、総合評価、評価された数です。
必要に応じて商品の概要(description)、画像(image)などを追加します。
リッチスニペットを記述できるwordpressプラグイン
サイトの構築にwordpressを使っているならプラグインを使うのが楽です。
Breadcrumb NavXT
もともとはwordpressにパンくずリストを導入するプラグインですが、その際マークアップもつけ加えてリッチスニペットに対応できるようになるプラグインです。
そのため、パンくずリストのコード部分とは別にコードを記述する必要があるJSON-LDは使えない上に、パンくずリスト要素の順番を記述する必要があるschema.orgも不向きです。
そのため、schema.orgのひと世代前のdata-vocabulary.orgとmicrodataを組み合わせて記述するのがよさそうです。
ひと世代前とはいえ、きっちりリッチスニペットに対応していますので心配はいりません（当ブログのほか、多くのサイトがこの形式を採用しています）
プラグインの設定は以下のブログが詳しくありましたのでご紹介します。
【WordPress】Breadcrumb NavXTをリッチスニペットに対応させる
構造化マークアップ支援ツール/データハイライターを使う
ページ内の情報を検索エンジンに伝えるためにGoogleが公開しているツールを2つご紹介します。
構造化マークアップ支援ツール
https://www.google.com/webmasters/markup-helper/u/0/
構造化マークアップ支援ツールは基本的なマウス操作だけで構造化されたHTMLを返してくれるツールです。
まず、ページURLを入力、もしくはHTMLを貼り付けてマークアップするデータタイプ（商品・記事など）を指定します。
すると作業画面が表示されますので、右側のボックスに示された要素をマウスを使って選択していきます。
下図の例はデータタイプ「記事」にてツールを使ってみた例です。
記事であれば名前（タイトル）や著者、公開日などをタグ付けし、一通りマークアップが終わったら「HTMLを作成」ボタンを押すと、構造化データを含んだHTMLを返してくれます。
１ページごとにしか返してくれないのが難点ですが、書き換えられたHTMLソースを見ながらCMSのテーマを編集すれば各ページのマークアップができるでしょう。
データハイライター
https://www.google.com/webmasters/tools/data-highlighter?hl=ja
（サイトがSearch Consoleに登録されていることが必要）
データハイライターはレイアウトが同じページ群（ブログページなど）をまとめてタグ付けすることが可能です。
ただし、Search Console（旧WebmasterTool）への登録が必要なことと、HTMLを構造化するわけではないのでおそらくGoogle以外のロボット(Bingなど)に対して効果はないと思われます。
また、すでに構造化データが含まれているページには、データハイライターを使っても効果がないようです。
使い方は構造化データテストツールとほぼ同様です。
代表とするページURLとマークアップするデータタイプ（商品・記事など）を指定し、マウスを使って各要素を指定していきます。
マークアップが終わったら適用するページセットの範囲を確認して送信します。
HTMLを編集して構造化データを追加できない場合には便利なツールです。
構造化データの確認
リッチスニペットを表示させるために構造化データを記述したら、必ず構造化テストツールで確認しましょう。
使い方は簡単で、URLもしくはソースを貼り付けて「検証」ボタンを押すだけで、記述された構造化データが正しいかどうか、マークアップ不足の要素がないかどうかなどを返してくれます。
ただし、あくまでも記述した構造化データが正しいかどうかを確認するためのもので、リッチスニペットが表示されるかどうかを確認するツールではないので注意が必要です。
（以前はリッチスニペットテストツールを公開していてリッチスニペットのプレビューが見られたのですが、現在は公開されていないようです。）
実際にリッチスニペットが表示されるかどうかは、構造化データを記述したページを公開し、Googleがそのページをインデックスしてからになります。
Google検索で、検索窓に”info:公開したページURL”と打ち込むと、そのページのスニペットのほか、キャッシュからインデックス日時を確認することができます。
クローラーの回遊頻度はサイトやディレクトリにもよりますが、数時間のうちにインデックスされる場合もあれば、数週間かかる場合もあります。
リッチスニペットの注意点
表示させることができたら強力なツールになりそうなリッチスニペットですが、注意すべき点がいくつかあります。
リッチスニペットは必ずしも表示されるわけではない
リッチスニペットのために構造化データを記述したとしても、必ずしも表示されるわけではありません。
まず、構造化データを備えたページを公開しても、すぐにリッチスニペットが表示されるわけではなく、Googleにインデックスされる必要があります。
インデックスされた場合でも、表示させたいリッチスニペットと検索クエリとの関連が低い場合や、ページ自体のクオリティが低い場合も表示がされないようです。
さらに、Googleはアルゴリズムや手動対策によって、表示を制限しているケースがあります。
こうした判定のほとんどはアルゴリズムが行っていると考えられ、私たちが詳細を知ることはできません。
なお、以前はリッチスニペットを表示させるためにGoogleへの申請が必要でしたが、現在はアルゴリズムによって自動的に表示されるため、申請は必要ありません。
リッチスニペットガイドラインに準じる必要がある
アルゴリズムにしても手動対策にしても、リッチスニペットが表示されるかどうかはGoogleのガイドラインに示された考え方をもとに決められています。
Googleはガイドラインの中で下記のように言及しています。
High-quality structured data must not create a misleading or deceptive experience for search users.
構造化データの優れた機能を検索ユーザーを誤解させたりだますために使ってはならない
https://developers.google.com/structured-data/policies#quality_guidelines
構造化データはリッチスニペットを表示させるためだけに悪用することができてしまいます。悪用例として下記のようなものが考えられます。
- 画面外に飛ばしたテキストや画像の下に隠したテキストをマークアップする
- metaテキストを用いて、ページ内コンテンツに無関係な要素のマークアップする
- JSON-LDを用いて、ページ内コンテンツに無関係な要素のマークアップする
これらの悪用が認められた場合、手動による対策でそのページだけでなく、サイト全体でリッチスニペットの表示ができなくなる措置がとられることもあるようなので注意が必要です。
構造化データがHTMLソースを汚してしまう
これは注意点というよりは、リッチスニペットのデメリットともいえるかもしれません。
リッチスニペットを表示させるために構造化データを記述していると、大なり小なりソースを汚してしまいます。
microdataのようにテキストを直接マークアップする形式ですと、該当部分が判別しづらくなってしまいますし、JSON-LDのように構造化データをまとめて記述できる形式ではソースのボリュームが大きくなってしまいます。
これらに留意しつつ、リッチスニペットを導入・運用していくようにすることが重要です。
スマホでのリッチスニペット表示について
現在スマホで検索された場合も、下記の条件を満たしていればリッチスニペットが表示されます。
- PC用のページにリッチスニペットが正しく表示されている
- PC用のページからスマホ用のページへのリダイレクトもしくはalternate設定がされている
PC用とスマホ用でHTMLが違う場合でも、同じ場合（レスポンシブ）でも、PC用に表示されるページさえリッチスニペットの設定をしていれば、スマホ用ページに設定していなくても基本的にはPC用と同じように表示されます。
ただ、Googleは次のように言及しています。
It is important to mark up mobile-specific pages on your site in addition to their desktop equivalents to provide the best experience across devices.
デバイスごとに最適な結果を得るためにはデスクトップページだけでなく、モバイル専用ページにもマークアップすることが重要です。
https://developers.google.com/structured-data/policies#technical_guidelines
Googleがスマホ専用ページへのマークアップを推奨するのには、スマホ専用のページインデックスを取得する準備進めていることも関係しているかもしれません。
可能であればスマホ用ページでもマークアップをしておくべきでしょう。
※2016.12.7追記
先日モバイルファーストインデックスに向けての取り組みについてGoogleから発表があり、スマホ用ページにも構造化データを記述することが推奨されています。
モバイルファーストインデックスが実装された際には、モバイルページに構造化データの記述がないページにはリッチスニペットの表示がされなくなる可能性があります。
該当するページにはGoogleの実装までに対応を行っておくことをお勧めいたします。
参考記事
モバイルファーストインデックスとは？必要な対策まとめ
リッチスニペットまとめ
リッチスニペットはGoogleをはじめとする検索エンジンがユーザーエクスペリエンスを向上させるために表示しているものです。
サイトオーナーなら誰しも流入をアップさせたいと思いますが、リッチスニペットの表示がユーザーのためになるかどうか、設置や管理工数に見合った効果が得られるのか、といった観点から構造化データを使用するのが大切なのではないでしょうか。
リッチスニペットの表示に取り組むべきかお悩みの場合は
リッチスニペットが表示されることで検索結果で目立つようになりCTRの向上が見込まれるのも事実です。
・どれを優先的に対策すべきか
・そもそもリッチスニペットを狙うべきか
こうした疑問に対して第3者からのアドバイスが必要な場合は、無料相談会へお申し込みください！
コンサルタントが貴社サイト状況や目標をお伺いし、アドバイスをいたします！
