Breadcrumb NavXTを使わずにmicrodataのパンくずリストを設定する方法

スポンサーリンク

前回書いた「Google AnalyticsのコードをWordPressプラグインを使わずに導入する超簡単な方法」に引き続き、WordPressの小ネタです。

あなたはサイトやブログにパンくずリストを設定していますか?パンくずリストがあれば、サイトを見ている人に現在地を知らせることができます。検索エンジンで入ってきた場合は、トップページ以外が最初のページということの方が多いぐらいです。

何気ないように見えて、パンくずリストは重要です。

このパンくずリストもWordPressではプラグインが用意されていて、ちょっと設定するだけですぐに導入することができます。代表的なプラグインに「Breadcrumb NavXT」というのがあります。

非常に便利なプラグインで以前はよく使っていたのですが、最近は使わなくなりました。今はプラグインなしでパンくずリストを実現しています。

bread crumbs
bread crumbs / acidpix

microdataを設定していますか?

パンくずリスト、検索エンジンが読みやすいように構造化していますか?ちょっとした設定で、検索での表示を変えることができます。

microdata形式というのがあり、パンくずリストにこれを設定しておけば、Googleの検索結果にパンくずリストを表示することができます。

以下は私が別に運営している「ノマド的節約術」というサイトの記事を検索してみた時の画面です。

パンくずリスト

検索結果の緑のところがこのように変わります。普通はアドレスが表示されていますよね。microdata形式に構造化しておくと、このように表示が変わります。

実際にこのページを開いてみるとパンくずリストはこのようになっています。

 

パンくずリスト表示例

ちゃんと「交通費節約」が出てますよね。

microdata形式に構造化するためのソースコードは以下のとおりです。

<div id="breadcrumbs">
	<ol>
		<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
			<a itemprop="url" href="http://nomad-saving.com"><span itemprop="title">HOME</span></a>&nbsp;&gt;
		</li>
		<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
			<a href="https://nomad-saving.com/category/saving/transportation/" itemprop="url"><span itemprop="title">交通費節約</span></a>&nbsp;&gt;
		</li>
		<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
			<span itemprop="title">JR西日本の回数券の割引率一覧 ~京阪神地区編~</span>
		</li>
	</ol>
</div>

liタグに見慣れない属性「itemscope」「itemtype」が入っていますね。aとspanタグにも「itemprop」という属性が入っています。これが肝です。

このように書けば構造化されると覚えておきましょう。あとはCSSで横並びにするように調整してください。

 

microdataの効果はあるのか?

この設定をしたことで、効果はあるのか?というのが疑問だと思います。

アクセス解析を見てみましょう。以下が2013年3月の結果です。

パンくずリストの効果

右から4番目に「3」とあるのが、検索結果からの直接流入数です。ノマド的節約術の2013年3月のユニークユーザー数は20,000程度(PVは48,000程度)だったので、ほんのわずかに効果があったと言えます。

カテゴリページはnoindexを入れて検索対象外にしているので、microdataを設定していなければ、この数字は「0」だったでしょう。

目に見える効果は薄いかもしれませんが、検索エンジンや検索する人にとって、やさしくなっているのはいいことだと思います。

テンプレートファイルにパンくずリストを設定する

さて、ここからはWordPressのプラグインを使わず、microdata形式に構造化されたパンくずリストを設定する方法を紹介します。

functions.phpに書いて、関数化する方法もありますが、毎回if文で判定して処理が重くなる気がしたので、今回はそれぞれのファイルにパンくずリストのコードを書きました。ノマド的節約術で設定しているコードを紹介しますので、それぞれのサイトに合わせてカスタマイズしてくださいね。

single.php

<?php $postcat = get_the_category(); ?>
<?php $catid = $postcat[0]->cat_ID; ?>
<div id="breadcrumbs">
	<ol>
		<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
			<a itemprop="url" href="<?php echo home_url(); ?>"><span itemprop="title">HOME</span></a>&nbsp;&gt;
		</li>
		<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
			<a href="<?php echo get_category_link($catid); ?>" itemprop="url"><span itemprop="title"><?php echo get_cat_name($catid); ?></span></a>&nbsp;&gt;
		</li>
		<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
			<span itemprop="title"><?php the_title(); ?></span>
		</li>
	</ol>
</div>

category.php

<div id="breadcrumbs">
	<ol>
		<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
			<a itemprop="url" href="<?php echo home_url(); ?>"><span itemprop="title">HOME</span></a>&nbsp;&gt;
		</li>
		<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
			<span itemprop="title"><?php single_cat_title(); ?></span>
		</li>
	</ol>
</div>

tag.php

<div id="breadcrumbs">
	<ol>
		<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
			<a itemprop="url" href="<?php echo home_url(); ?>"><span itemprop="title">HOME</span></a>&nbsp;&gt;
		</li>
		<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
			<span itemprop="title"><?php single_tag_title(); ?></span>
		</li>
	</ol>
</div>

page.php

<div id="breadcrumbs">
	<ol>
		<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
			<a itemprop="url" href="<?php echo home_url(); ?>"><span itemprop="title">HOME</span></a>&nbsp;&gt;
		</li>
		<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
			<span itemprop="title"><?php the_title(); ?></span>
		</li>
	</ol>
</div>

ノマド的節約術ではこれだけしか設定していません。しかし、まだ設定できるところはあります。例えば複数人で運営しているのであれば、author.phpにも同様のコードが必要です。あとarchive.phpや404.phpにもあればより親切ですね。

Footlightでも、もちろんmicrodataで構造化したパンくずリストを設定しています。

地道なことですが、一度設定してしまえば済む話なので、やってしまいましょう。ちょっとしたSEOがあとあと効いてくるかもしれませんよ。