リッチスニペット：パンくず

リッチスニペットをご存知でしょうか。
簡単に言うと、googleの検索結果の表示がリッチになる機能です。
今回はgoogleの検索結果のURL部分に、URLの代わりにパンくずを表示する方法を紹介。

表示するための条件は以下の通り。

• html5であること。
• microdata、microformats、RDFa、のいずれかの書式で規定のコードを記述すること。

以上です。但し、現在は必ずしもリッチスニペットが表示されるわけではないようです。

Google では、最も有効で参考になる検索結果の提供に努めています。検索結果のスニペットから得られる情報が多いほど、ユーザーは検索に関連するページかどうかを判断しやすくなります。構造化コンテンツ（レビュー サイトやビジネス リスティング）を使用しているサイトでコンテンツにラベルを付けると、ラベル付けされたそれぞれのテキストが特定の種類のデータ（レストランの名前、住所、評価など）としてリッチ スニペットで表示されるようになります。

http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=99170

tree-shopではmicrodataを使用しています。具体的なソースコードは以下のようになります。

<ul id="breadcrumbs">
<li>
	<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	<a href="/" itemprop="url" rel="nofollow"><span itemprop="title">TOP</span></a>
	</div>
</li>
<li>
	<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	<a href="/rakuten/" itemprop="url" rel="nofollow"><span itemprop="title">楽天市場TOP</span></a>
	</div>
</li>
<c:forEach var="e" items="${genreList}" varStatus="s">
<li>
	<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	<a href="/rakuten/product/genre/${f:h(e.genreId)}/" itemprop="url" rel="nofollow"><span itemprop="title">${f:h(e.genreName)}</span></a>
	</div>
</li>
</c:forEach>
</ul>

このコードでgoogleの検索結果は以下のように表示されるようになります。

下がmicrodataを書く前の結果、上がmicrodataを書いた後の結果です。

レビュー等のリッチスニペットは日本ではまだ未対応なので、まずはパンくずからチャレンジしてみてはいかがでしょうか。
（実際は、コードを書かなくてもパンくずを表示するケースもあるのですが、より高い確率でパンくずを表示させるには、コードを書いた方がいいです）

SEOを強化する技術 エンジニアが内側から支えるサイト設計・構築術