Googleの検索結果ページでパンくずリストを表示する「Prime Strategy Bread Crumb」編

パンWordPressでパンくずリストを表示されるプラグインは多数ありますが、有名なものは「Breadcrumb NavXT」等がありますが、筆者はシンプルでわかりやすい、日本の方が作られた「Prime Strategy Bread Crumb」が、とってもお気に入りです。

Prime Strategy Bread Crumb」は設定画面もなく、下記のコードを出力したいWordpressのテンプレートに追加すれば、ほぼ何もすることなくパンくずが表示されます。

<?php if ( function_exists( 'bread_crumb' ) ) { bread_crumb( 'type=string' ); } ?>

上記は、パンくずをstringで表示させる例ですが、パンくずをmicrodataにならって記述すると下記のように検索結果にパンくずが表示されるようで、オーガニック検索の方への配慮ももちろん、微弱ではありますが、オーガニック検索時に他の記事よりも多少目立つかもしれません。

google検索結果
google検索結果
yahoo検索結果
yahoo検索結果

さっそく、微弱ではあるかもしれませんがSEO対策の一環として、「Prime Strategy Bread Crumb」で、microdataに対応しようと思いたちました。「Breadcrumb NavXT」のように設定画面もなく(筆者はそのシンプルさが好きです)、HTMLにmicrodataの要素を追加させるようなパラメータもないので、プラグインのコードを改造が良いかもしれませんが、例のごとく半ば強引にw、フィルターフックで対応できましたので皆様にご紹介します。

WordPress 3.6.1、Prime Strategy Bread Crumb 1.0.4使用
1. functions.phpにコードを追加
function my_bread_crumb($output, $args) {
	if ($args['type'] == 'list') {
		/* li element spacing fix */
		$output = str_replace(array("\t","\n"), '', $output);

		/* itemscope="itemscope" */
		$output = preg_replace('|<li\s+(.*?)>|mi','<li ${1} itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">',$output);

		/* current page is not itemscope="itemscope" */
		$output = preg_replace('|<li\s+class="(.*?current.*?)".*?>|mi','<li class="${1}">',$output);

		/* itemprop="url" */
		/* itemprop="title" */
		$output = preg_replace('|<a\s+(.*?)>|mi','<a ${1} itemprop="url"><span itemprop="title">',$output);
		$output = str_replace('</a>','</span></a>',$output);
	}
	return $output;
}

add_filter('bread_crumb', 'my_bread_crumb',10,2);

※上記4行目は、li要素をdisplay:inlineした際に、変なスペースが開くので追加しました。やっぱりHTMLはインデントされてないと嫌な方は加工してください。ひょっとしたら、後続の正規表現にも影響があるかもしれませんが・・・・
※正規表現に間違いがあったら、すみませんw

2. WordPressテンプレートでの呼び出し
<?php if ( function_exists( 'bread_crumb' ) ) { bread_crumb(); } ?>

※microdataのコーディングにはtype=stringではNGで、要素の構造化が必要でしたので、bread_crumbに引数を与えずリストタイプにしました。

3. ul/li要素のCSS

省略・・・・w

なお、上記のコードを追加したあと「Google ウェブマスター ツール」の「構造化データ テスト ツール」で、ご自分のWordpressに適しているかご確認ください(くれぐれも自己責任でお願いします)。

「構造化データ テスト ツール」で下記のようになっていればOKと思います。

richsnippets

なお、詳しくはGoogleヘルプ「リッチ スニペット – パンくずリスト」のmicrodataの箇所に書かれています。

このGoogleヘルプを読んでわかりましたが、パンくずの1番最後の階層は、「最後のアイテムが現在のページの親を表します」だそうです。

Googleヘルプ「リッチ スニペット – パンくずリスト」抜粋

各パンくずアイテムは、その順序で表示され、最初のアイテムがトップ レベルのページを表し、最後のアイテムが現在のページの親を表します。

つまり、パンくずの1番最後の階層は、カレントページではないということです。他のblogで「Breadcrumb NavXT」のmicrodataへの対応記事がありますが、ここを間違っている例があります(カレントページにもmicrodataのタグ付け)。間違っても、検索エンジン側で除外されて表示されるので問題無さげですが。。。。

また、当然のことではありますが、パンくずリストをmicrodataに対応したからといって、すぐは検索結果に表示されません。Gooogleからクロールがあって、パンくずリストが検索エンジンによって認識されたのち表示されるはずです。

以上、皆様のSEO対策の一環にご参考になりましたら幸いです。