リッチスニペットは検索結果に様々な情報を表示できる

1. リッチスニペットとは
2. リッチスニペットを使うには
3. リッチスニペットを使ってみる

1.リッチスニペットとは

Google の検索結果にはページタイトルと共にページに関する情報が表示されます。一般的に description であったり Google の作成したサマリーであったりしますがその部分にページのより詳しい情報を表示することができるので、検索ユーザーはそのページの内容を把握しやすくなります。これがリッチスニペットです。

ページタイトルや要約（description）だけでなく、著者情報やGoogle＋のフォロワー数も表示されます。

通販サイトの場合は商品の詳細情報を Google に通知することでその情報を基に価格、在庫状況、レビューなどを直接 Google の検索結果ページに表示できます。

検索を実行したユーザーがページの情報を検索結果一覧で把握することができ、より詳細な情報が掲載されていればクリックもされやすくなります。

2.リッチスニペットを使うには

リッチスニペットを使うにはいくつかの方法があります。html タグ内でシンプルな属性を使う「microdata」、xhtml タグ内でシンプルな属性を使う「RDFa」、class 属性を使う「microformats」。この中でも Google は「microdata」を推奨しています。

リッチ スニペットと構造化データについて

これらは HTML コンテンツのメタデータを記述することができるもので、商品名などを挟むタグに記述するとそれが商品名であるといったことを検索エンジンに認識させることができるようになります。

このように検索エンジンがコンテンツの意味を理解できるようにすることをセマンティックウェブと言います。

3.リッチスニペットを使ってみる

ここでは Google が推奨している「microdata」を使ってみます。まずは簡単な商品ページのコンテンツ例です。

<article>
<span>商品名</span>
<img src="商品画像" />
<span>商品価格</span>
<div>商品説明</div>
</article>

これに item～ という属性をいくつか追記します。例えば itemprop=”name” と記述するとそこには商品名が書いてあるということを意味することができます。

<article itemscope itemtype="http://data-vocabulary.org/Product">
<span itemprop="name">商品名</span>
<img itemprop="image" src="商品画像" />
<span itemprop="offerDetails" itemscope itemtype="http://data-vocabulary.org/Offer">
<span itemprop="price">商品価格</span>
</span>
<div itemprop="description">商品説明</div>
</article>

上記以外にも様々な属性があります。詳しくは Google のウェブマスターツールヘルプをご参照下さい。また下記のように構造化データのマークアップを支援したり、テストができるツールも提供されています。

構造化データマークアップ支援ツール

構造化データテストツール

ECサイトでリッチスニペットを実装したら、検索結果でのCTRが5％上がったという検証結果もありますので、ぜひ実装をしてみてください。

河野