リッチスニペットの条件、出し方、注意点

区切り線

rich_snippets

リッチスニペットとは

「アマゾン」の検索結果 - Yahoo!検索 2016-03-08 13-14-18
リッチスニペットは従来の検索結果に加え、レビューの点数や住所、特定のページに関する情報などが表示される機能です。
検索結果に表示されるサイト説明文を『スニペット』と読んでいましたが、このスニペットをよりユーザーに分かりやすく、そしてユーザーのクリック率(CTR)を向上させるのがリッチスニペットの長所と言えます。

リッチスニペットの条件

もちろんリッチスニペットを検索結果に出すには条件もいくつかあります。
大きく分けると次の3つです。

  • リッチスニペットの品質ガイドラインに沿った記事であること
  • クエリと関連性のある記事
  • 一定のクオリティを満たした内容

つまり、検索キーワード(クエリ)に沿い、その上でリッチスニペットの品質ガイドラインを満たさなければ、表示されないこともあります。
クオリティに関しては気にするまでもありません。意味が理解できる文章になっていれば十分でしょう。
ただ、品質ガイドラインに関しては少々注意が必要です。これについては後ほど説明します。

特に、使用できるコンテンツに関しては覚えて損はないでしょう。
現状では以下のコンテンツでリッチスニペットを使うことができます。

  • レシピ
  • レビュー
  • 人物
  • 商品
  • イベント
  • 会社組織
  • 音楽

特に会社組織や商品、レビューに関するサイトを検討されている方は、リッチスニペットを積極的に取り入れることでCTRを挙げ、アクセスしやすい導線を作ることもできます。

例えば商品の紹介1つみても、リッチスニペットを導入していれば商品画像やレビュー点数を検索結果から見ることができます。説明文だけの結果とは大違いです。

リッチスニペットの出し方

さて、リッチスニペットを出すためには『構造化データマークアップ』が必要です。
おおざっぱに言えばHTML上にメタデータを設定することにより、Googlebotのようなクローラーに分かりやすく認識させ、リッチスニペットとして反映させることができるのです。

出し方にはいくつか方法がありますが、商品情報に関して言えば『itemscope』と『itemprop』、そして『itemtype』を使いましょう。
コードで表すと、このような形になります。

<div itemscope itemtype="http://schema.org/Product">
 <img itemprop="image" src="商品画像" />
 <span itemprop="name">商品名</span>
  <div itemprop="offers" itemscope itemtype="http://schema.org/offer">
   <span itemprop="price">2,980円</span>
  </div>
</div>

schema.orgはリッチスニペットにおけるDOCTYPEのようなもので、リッチスニペットを導入する際には必ず入れるようにしましょう。
今回の場合だとProduct(製品)とoffer(提供)の2つで使っています。タグに入れる際はdivタグを使いましょう。

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

使う際の注意点として、誤ったプロパティを設定したり、ユーザーに表示されないコンテンツをマークアップしてしまうと、スパム扱いされてしまいます。

例えば著書のページに飛ばしたいばかりに『Book(本)』ではなく『Person(人物~』のプロパティを設定してしまえば、それはスパム扱いされても仕方ありません。その人の経歴を調べるつもりが、なぜか著書が表示されるのですからね。

また、構造化データテストツールを使って、構造化データがに記述ミスがないか調べるのも良いでしょう。当然記述ミスをしていれば反映されません。

まとめ

リッチスニペットは便利な反面、馴れない人には記述が難しい内容でもあります。
構造化データマークアップは馴れると便利ですが、そのためにはschema.orgを理解し、さらにHTMLの入れ子構造を理解しなければならないので、敷居も高くなりやすいものです。

ただし、覚えておくと検索結果をより見やすく、そしてユーザーに理解されるような作りに変えることができます。
単に見やすいだけではなく、ユーザーがクリックしてさらに読みたくなる検索結果を作ることは、両者にとってWIN-WINな関係になるものだと考えています。

  • このエントリーをはてなブックマークに追加

区切り線

コメントをどうぞ

メールアドレスが公開されることはありません。