前回書いた「Google AnalyticsのコードをWordPressプラグインを使わずに導入する超簡単な方法」に引き続き、WordPressの小ネタです。
あなたはサイトやブログにパンくずリストを設定していますか？パンくずリストがあれば、サイトを見ている人に現在地を知らせることができます。検索エンジンで入ってきた場合は、トップページ以外が最初のページということの方が多いぐらいです。
何気ないように見えて、パンくずリストは重要です。
このパンくずリストもWordPressではプラグインが用意されていて、ちょっと設定するだけですぐに導入することができます。代表的なプラグインに「Breadcrumb NavXT」というのがあります。
非常に便利なプラグインで以前はよく使っていたのですが、最近は使わなくなりました。今はプラグインなしでパンくずリストを実現しています。
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> > </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> > </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> > </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> > </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> > </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> > </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> > </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があとあと効いてくるかもしれませんよ。
