この記事の所要時間: 1121

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

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

リッチスニペット

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

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

参考文献(引用元):IT用語辞典バイナリ
–スポンサーリンク–

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

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

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

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

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

マークアップの具体例

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

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

具体例としては

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

これは、ウェブ上での見た目は何も変化がない。※分かりやすくboxで表示しているが、これはマークアップとは関係ないのであしからず。
ところが、ソースを見ると、

&amp;lt;div itemscope itemtype=&amp;quot;http://data-vocabulary.org/Person&amp;quot;&amp;gt;<br />
    &amp;lt;div class=&amp;quot;vcard&amp;quot;&amp;gt;私の名前は&amp;lt;span class=&amp;quot;fn&amp;quot;&amp;gt;山田招憲&amp;lt;/span&amp;gt;です。<br />
&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;

このように、itemprop=”name”を付けておくことで、山田招憲とは人の名前なんだよ。と検索エンジンに教えることができるわけだ。

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

–スポンサーリンク–

マークアップのひな形

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

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

  • レビュー
  • 人物
  • 商品
  • 会社と組織
  • レシピ
  • イベント
  • 音楽
  • 動画コンテンツ
  • この中で、例えば”時間を表す時に、timeを入れこむ”などしていくととなる。

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

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


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

    レビュー: 山田招憲

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

    評価:
    4.5

    これをソースで見るとこうなる。

    --スポンサーリンク--
    &amp;lt;div class=&amp;quot;hreview&amp;quot;&amp;gt;<br />
    &amp;lt;span class=&amp;quot;item&amp;quot;&amp;gt;<br />
    &amp;lt;span class=&amp;quot;fn&amp;quot;&amp;gt;ルーツ アロマインパクト デミタス&amp;lt;/span&amp;gt;<br />
    &amp;lt;/span&amp;gt;<br />
    レビュー: &amp;lt;span class=&amp;quot;reviewer&amp;quot;&amp;gt;山田招憲&amp;lt;/span&amp;gt;、<br />
    &amp;lt;span class=&amp;quot;dtreviewed&amp;quot;&amp;gt;<br />
    4月 20日&amp;lt;span class=&amp;quot;value-title&amp;quot; title=&amp;quot;2011-09-15&amp;quot;&amp;gt;&amp;lt;/span&amp;gt;<br />
    &amp;lt;/span&amp;gt;.<br />
    &amp;lt;span class=&amp;quot;summary&amp;quot;&amp;gt;JTの凝縮した味わいのデミタスタイプ缶コーヒー&amp;lt;/span&amp;gt;<br />
    &amp;lt;span class=&amp;quot;description&amp;quot;&amp;gt;数ある缶コーヒの中でも、じっくりと楽しめる味わい深い缶コーヒー。なかなか販売している店舗を見つけられないのが唯一の難点。&amp;lt;/span&amp;gt;</p>
    <p>評価:<br />
    &amp;lt;span class=&amp;quot;rating&amp;quot;&amp;gt;4.5&amp;lt;/span&amp;gt;<br />
    &amp;lt;/div&amp;gt;

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


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

    レビュー: 山田招憲

    4月 20日

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

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

    ソースはこちら。

    &amp;lt;div class=&amp;quot;hreview&amp;quot;&amp;gt;<br />
    &amp;lt;span class=&amp;quot;item&amp;quot;&amp;gt;<br />
    &amp;lt;span class=&amp;quot;fn&amp;quot;&amp;gt;ルーツ アロマインパクト デミタス&amp;lt;/span&amp;gt;<br />
    &amp;lt;/span&amp;gt;<br />
    レビュー: &amp;lt;span class=&amp;quot;reviewer&amp;quot;&amp;gt;山田招憲&amp;lt;/span&amp;gt;、<br />
    &amp;lt;span class=&amp;quot;dtreviewed&amp;quot;&amp;gt;<br />
    4月 20日&amp;lt;span class=&amp;quot;value-title&amp;quot; title=&amp;quot;2011-09-15&amp;quot;&amp;gt;&amp;lt;/span&amp;gt;<br />
    &amp;lt;/span&amp;gt;<br />
    &amp;lt;span class=&amp;quot;summary&amp;quot;&amp;gt;JTの凝縮した味わいのデミタスタイプ缶コーヒー&amp;lt;/span&amp;gt;<br />
    &amp;lt;span class=&amp;quot;description&amp;quot;&amp;gt;数ある缶コーヒの中でも、じっくりと楽しめる味わい深い缶コーヒー。なかなか販売している店舗を見つけられないのが唯一の難点。&amp;lt;/span&amp;gt;<br />
    評価:&amp;lt;span class=&amp;quot;rating&amp;quot;&amp;gt;4.5&amp;lt;/span&amp;gt;<br />
    &amp;lt;img itemprop=&amp;quot;rating&amp;quot; src=&amp;quot;https://websites-designs.com/wp-content/uploads/2013/04/4.5-150x27.gif' alt='4.5' width='100' height='20' class='aligncenter size-medium wp-image-427'&amp;quot; alt=&amp;quot;4 つ星評価: 非常に良い&amp;quot; /&amp;gt; &amp;lt;/div&amp;gt;

    最下部の部分(img=)が画像の表記となる。

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

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

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

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

    この自己紹介に使えるひな形のソース。

    &amp;lt;div class=&amp;quot;vcard&amp;quot;&amp;gt;<br />
    &amp;lt;span class=&amp;quot;photo&amp;quot;&amp;gt;&amp;lt;a href='画像のURL'&amp;gt;&amp;lt;img src='画像のURL' alt='名前' width='212' height='150' class='alignright size-full wp-image-459' /&amp;gt;&amp;lt;/a&amp;gt;<br />
       私の名前は&amp;lt;span class=&amp;quot;fn&amp;quot;&amp;gt;名前&amp;lt;/span&amp;gt;ですが、<br />
       みんなから「&amp;lt;span class=&amp;quot;nickname&amp;quot;&amp;gt;ニックネーム&amp;lt;/span&amp;gt;」と呼ばれています。<br />
       私のホームページは、&amp;lt;a href=&amp;quot;http://&amp;quot; class=&amp;quot;url&amp;quot;&amp;gt;websites-designs.com&amp;lt;/a&amp;gt; です。<br />
       &amp;lt;span class=&amp;quot;adr&amp;quot;&amp;gt;&amp;lt;span class=&amp;quot;region&amp;quot;&amp;gt;○○県&amp;lt;/span&amp;gt;&amp;lt;span class=&amp;quot;locality&amp;quot;&amp;gt;○○市&amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;に住んでおり、<br />
       &amp;lt;span class=&amp;quot;title&amp;quot;&amp;gt;○○(役職名)&amp;lt;/span&amp;gt;として&amp;lt;span class=&amp;quot;org&amp;quot;&amp;gt;会社名&amp;lt;/span&amp;gt;に勤めながら、&amp;lt;span class=&amp;quot;role&amp;quot;&amp;gt;○○(職種)&amp;lt;/span&amp;gt;を手がけています。<br />
    &amp;lt;/div&amp;gt;

    –スポンサーリンク–

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

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

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

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

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

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

    著者情報

    山田招憲
    Wordpressを使ったSEOからの集客を含むアクセスアップサポートを行っています
    (検証サイト3000サイト以上)
    詳しいプロフィールはメルマガ内で…