HTML5はmicrodataを使って要素にメタデータを付加することができます。
今回はそのmicrodataを使ってWordPressのサイトでパンくずリストをGoogleに表示させる方法を、いろいろなサイトを参考にしながら紹介したいと思います。

microdataの基本

本題に入る前に簡単にmicrodataについて簡単に触れておきたいと思います。

microdataを使うことで、通常の要素に属性をつける形でメタデータを付加することができます。
まず、メタデータを定義している要素を囲んでいる要素にitemscope属性を指定します。この囲んでいるdiv要素の開始タグから終了タグまでをアイテム(item)と呼びます。 もし名前空間がある場合は、itemtype属性でURLを指定します。名前空間(NameSpace)は、ここでは属性の意味を定義するためのものです。サンプルでは適当なURLを指定していますが、たとえばパンくずリストを定義するためには、パンくずリストを定義した名前空間を指定する必要があります。

続いて、メタデータを定義します。メタデータはキーと値をセットにして定義します。
定義したい値を任意の要素で囲みます。続いて囲んだ要素のitemprop属性にキーをセットします。 サンプルでは、キーにname、値にニホンアマガエルをセットしています。

このように、microdataを使うと属性を付加するだけで簡単にメタデータを付加することができます。

今回はこれ以上のmicrodataの詳しい仕様については触れませんが、microdataについてもっと詳しく知りたい方はリンク先を参考にしてください。
HTML5のMicrodataとは何か? - Publickey

Googleにパンくずリストを表示させるためのmicrodata

続いてGoogleにパンくずリストを表示させるためのmicrodataを紹介します。
サンプルはGoogleの検索結果に表示されるパンくずリストがmicrodataとRDFaに対応[to-R]を参考にさせていただきました。

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses" itemprop="url">
    <span itemprop="title">洋服</span>
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses/real" itemprop="url">
    <span itemprop="title">ドレス</span>
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
    <span itemprop="title">緑のドレス</span>
  </a>
</div>

まず、パンくずリストの項目一つ一つをitemscope属性を指定した要素で囲んでいます。 そしてそれぞれのパンくずのa要素にitemprop=”url”を指定してパンくずリストのリンク先であることを示すとともに、項目名をspan要素で囲み、itemprop=”title”を指定することでそれがパンくずの項目名であることを示します。itemtype属性では、パンくずリストを定義している名前空間を指定しています。
これでGoogleでパンくずリストが表示されるようになります。

こんな感じ↓
価格コム regza – Google 検索

WordPressでGoogleにパンくずリストを表示させるためのmicrodata

さて、ようやく本題のWordPressでのパンくずリストを表示させる方法ですが、こちらのサイトでWordPress用のパンくずリストのコードが公開されています。
1秒で誰でもできる WordPress のブログサイトで microdata に対応したパンくずリストを表示する銀河系最強のコードを書いたよ | ウェブル

<div class="breadcrumbs">
	<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	  <a href="<?php bloginfo('url'); ?>" itemprop="url">
		<span itemprop="title"><?php bloginfo('name'); ?></span>
	  </a> › 
	</div>
	<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	  <a href="<?php $cat = get_the_category(); echo get_category_link($cat[0]->cat_ID); ?>" itemprop="url">
		<span itemprop="title"><?php echo $cat[0]->name; ?></span>
	  </a> ›
	</div>
</div>

パンくずリストの項目の1つ目にブログのトップページ、2つ目にその記事のカテゴリーが表示されます。

もちろんこのまま使わせてもらってもいいのですが、個人的にはパンくずリストの終着点(つまり現在ページ)を表示したいのでコードを追加します。 ついでにパンくずリストの項目にリスト要素で囲み、全体をnav要素で囲んでHTML5仕様にしてみました。

<nav class="breadcrumbs">
	<ul>
		<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
			<a href="<?php bloginfo('url'); ?>" itemprop="url">
				<span itemprop="title"><?php bloginfo('name'); ?></span>
			</a> ›
		</li>
		<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
			<a href="<?php $cat = get_the_category(); echo get_category_link($cat[0]->cat_ID); ?>" itemprop="url">
				<span itemprop="title"><?php echo $cat[0]->name; ?></span>
			</a> ›
		</li>
		<li>
			<?php the_title(); ?>
		</li>
	</ul>
</nav>

これをテーマファイルの記事単独ページ(single.php)のお好みの場所に貼付けるだけで完了です。
簡単に導入できるので、ぜひやってみてください。