リッチスニペットのマークアップを検索結果に表示する

/ SEO / By

\'リッチスニペット\'リッチスニペットのマークアップをサイト内に施すことよって、検索結果を目立たせる効果を期待できる。
ここでは、そのリッチスニペットのマークアップを検索結果に表示させるまでの手順をメモしておきたい。

ちなみに、リッチスニペットとは。

リッチスニペット

リッチスニペットとは、Web検索の検索結果ページ（SERP）に表示されるスニペットに、より多くの情報を表示させることができる拡張機能である。Googleが2009年に発表した。

リッチスニペットでは、Webページの本文中から抜粋された通常のスニペットに加えて、製品やサービスの価格帯、ユーザー評価などの情報を表示させることができる。これによって、より効率的に探しているページを見つけることが期待できる。

参考文献（引用元）：IT用語辞典バイナリ
–スポンサーリンク–

リッチスニペットをgoogleへ申請する

リッチスニペットを利用するには、まずGoogleへ申請する必要が出てくる。※必須ではない、念のため。
それは、こちらより申請できる。

申請する前に、どのように表示されるのかのテストをこちらの構造化『データ テスト ツール』で行なっておく。

と更にその前に、申請したいサイトにマークアップを施さければならない。

次にマークアップの具体例を出していく。
※まだhtml5に対応していないサイトも多いと思うので、ここではMicrodataでもRDFaでもないMicroformatsをご紹介していく。

マークアップの具体例

マークアップする場合に、なぜマークアップする必要があるのか？を理解する必要があると思う。
その理由は『セマンティックWrb』にして検索エンジンにより詳しい情報を伝える必要があるから。といえるだろう。

例えば、名前の表記の場合、それが人の名前なのか？或いは物の名前なのか？または店の名前なのか？検索エンジン判断する際に役立つというわけだ。

具体例としては

私の名前は山田招憲です。

これは、ウェブ上での見た目は何も変化がない。※分かりやすくboxで表示しているが、これはマークアップとは関係ないのであしからず。
ところが、ソースを見ると、
[html]<div itemscope itemtype="http://data-vocabulary.org/Person">
<div class="vcard">私の名前は<span class="fn">山田招憲</span>です。
</div></div>[/html]
このように、itemprop=\”name\”を付けておくことで、山田招憲とは人の名前なんだよ。と検索エンジンに教えることができるわけだ。

難しく考えるより、ひな形をそのまま使用する方が便利だと思う。

–スポンサーリンク–

マークアップのひな形

マークアップのひな形は様々あるので、メモ代わりに随時ここへ付け足していく次第だ。
※特にgoogleの推奨するリッチスニペットを取り上げていく。（ウェブ全体の要素に関してはここでは触れない）

まず、大まかに分けるといかのようなものがある。

  • レビュー
  • 人物
  • 商品
  • 会社と組織
  • レシピ
  • イベント
  • 音楽
  • 動画コンテンツ

    • この中で、例えば”時間を表す時に、timeを入れこむ”などしていくととなる。

    レビュー内容をマークアップで表す

    レビューの例では、缶コーヒーを載せてみた。


    ルーツ アロマインパクト デミタス

    レビュー: 山田招憲、

    ４月 ２０日
    .
    JTの凝縮した味わいのデミタスタイプ缶コーヒー
    数ある缶コーヒの中でも、じっくりと楽しめる味わい深い缶コーヒー。なかなか販売している店舗を見つけられないのが唯一の難点。

    評価:
    4.5

    これをソースで見るとこうなる。
    [html]<div class="hreview">
    <span class="item">
    <span class="fn">ルーツ アロマインパクト デミタス</span>
    </span>
    レビュー: <span class="reviewer">山田招憲</span>、
    <span class="dtreviewed">
    ４月 ２０日<span class="value-title" title="2011-09-15"></span>
    </span>.
    <span class="summary">JTの凝縮した味わいのデミタスタイプ缶コーヒー</span>
    <span class="description">数ある缶コーヒの中でも、じっくりと楽しめる味わい深い缶コーヒー。なかなか販売している店舗を見つけられないのが唯一の難点。</span>

    評価:
    <span class="rating">4.5</span>
    </div>[/html]

    これがGoogleに採用された場合には、☆画像が表記される。
    ただ、サイト上では少し寂しい気がするので、もし、この評価の部分に画像を入れたい場合には、


    ルーツ アロマインパクト デミタス

    レビュー: 山田招憲、

    ４月 ２０日

    JTの凝縮した味わいのデミタスタイプ缶コーヒー
    数ある缶コーヒの中でも、じっくりと楽しめる味わい深い缶コーヒー。なかなか販売している店舗を見つけられないのが唯一の難点。
    評価:4.5
    \'4.5\'

    ※画像は臨時で揃えたやつなのでご勘弁を。

    ソースはこちら。
    [html]<div class="hreview">
    <span class="item">
    <span class="fn">ルーツ アロマインパクト デミタス</span>
    </span>
    レビュー: <span class="reviewer">山田招憲</span>、
    <span class="dtreviewed">
    ４月 ２０日<span class="value-title" title="2011-09-15"></span>
    </span>
    <span class="summary">JTの凝縮した味わいのデミタスタイプ缶コーヒー</span>
    <span class="description">数ある缶コーヒの中でも、じっくりと楽しめる味わい深い缶コーヒー。なかなか販売している店舗を見つけられないのが唯一の難点。</span>
    評価:<span class="rating">4.5</span>
    <img itemprop="rating" src="http://websites-designs.com/wp-content/uploads/2013/04/4.5-150×27.gif\’ alt=\’4.5\’ width=\’100\’ height=\’20\’ class=\’aligncenter size-medium wp-image-427\’" alt="4 つ星評価: 非常に良い" /> </div>[/html]
    最下部の部分（img=）が画像の表記となる。

    続いては、各連絡先（人物）情報のマークアップ事例となる。

    自己紹介をマークアップで表す

    自己紹介をマークアップで表し、google+と連携することができる。

    自己紹介のマークアップ記述例に関しては、こちらのソースをご参考に。

    この自己紹介に使えるひな形のソース。
    [html]<div class="vcard">
    <span class="photo"><a href=\’画像のURL\’><img src=\’画像のURL\’ alt=\’名前\’ width=\’212\’ height=\’150\’ class=\’alignright size-full wp-image-459\’ /></a>
    私の名前は<span class="fn">名前</span>ですが、
    みんなから「<span class="nickname">ニックネーム</span>」と呼ばれています。
    私のホームページは、<a href="http://" class="url">websites-designs.com</a> です。
    <span class="adr"><span class="region">○○県</span><span class="locality">○○市</span></span>に住んでおり、
    <span class="title">○○（役職名）</span>として<span class="org">会社名</span>に勤めながら、<span class="role">○○（職種）</span>を手がけています。
    </div>[/html]

    –スポンサーリンク–

    リッチスニペットの参考サイト

    最後にリッチスニペットの参考サイトを記載しておきたい。

    リッチ スニペット（microdata、microformats、RDFa、データ ハイライター）

    スニペットとは、検索結果の下に表示される数行のテキストで、ユーザーがページの内容や検索キーワードとの関連性を把握できるようにするためのものです。

    ウェブマスター ツールヘルプ

    検索結果に著者情報が表示される『Google Authorship Markup』に関しては、後ほど別記事で。
    ※お急ぎの方は、こちらのプレゼンが役に立つだろう。

    関連記事