リッチスニペットのマークアップをサイト内に施すことよって、検索結果を目立たせる効果を期待できる。
ここでは、そのリッチスニペットのマークアップを検索結果に表示させるまでの手順をメモしておきたい。
ちなみに、リッチスニペットとは。
- リッチスニペット
リッチスニペットとは、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を入れこむ”などしていくととなる。
レビュー内容をマークアップで表す
レビューの例では、缶コーヒーを載せてみた。
ルーツ アロマインパクト デミタス
レビュー: 山田招憲、
4月 20日
.
JTの凝縮した味わいのデミタスタイプ缶コーヒー
数ある缶コーヒの中でも、じっくりと楽しめる味わい深い缶コーヒー。なかなか販売している店舗を見つけられないのが唯一の難点。
評価:
これをソースで見るとこうなる。
[html]<div class="hreview">
<span class="item">
<span class="fn">ルーツ アロマインパクト デミタス</span>
</span>
レビュー: <span class="reviewer">山田招憲</span>、
<span class="dtreviewed">
4月 20日<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に採用された場合には、☆画像が表記される。
ただ、サイト上では少し寂しい気がするので、もし、この評価の部分に画像を入れたい場合には、
ルーツ アロマインパクト デミタス
レビュー: 山田招憲、
4月 20日
JTの凝縮した味わいのデミタスタイプ缶コーヒー
数ある缶コーヒの中でも、じっくりと楽しめる味わい深い缶コーヒー。なかなか販売している店舗を見つけられないのが唯一の難点。
評価:
※画像は臨時で揃えたやつなのでご勘弁を。
ソースはこちら。
[html]<div class="hreview">
<span class="item">
<span class="fn">ルーツ アロマインパクト デミタス</span>
</span>
レビュー: <span class="reviewer">山田招憲</span>、
<span class="dtreviewed">
4月 20日<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』に関しては、後ほど別記事で。
※お急ぎの方は、こちらのプレゼンが役に立つだろう。