[WordPress]SEO的にもちょびーっとだけ有利なリッチスニペットを用いたパンくずリストの作り方

WordPressを今年の1月から使い始めたので、もうすぐで6ヶ月になります。

WordPressを使ってみて、なんだかんだで、使いやすいし、楽しいしではまってしまいました。最近では、自分でテーマを作ったりしてみています。

それで、昨日は「パンくずリスト」を作成したので、コピペで利用できるようにして載せておきます。

photo by surlygirl

パンくずリストとは

パンくずリストとは、サイトの階層をユーザーが把握して移動できるようにするための一連のリンク（パンくず）です。

このブログで言えば、ページ上部にあるこんなやつのことです。

こう書くことで、読者に今読んでいる記事の位置を把握してもらうことができます。

それとともに、SEO的にはGoogleの検索結果に以下のように表示されるので、検索ユーザーにも、ページ内容がさらにわかりやすく伝わります。

ちなみに、パンくずリストが設定されていないページの場合は以下のように、ただのURLで表示されます。

このようなGoogleにも認識してもらいやすいパンくずリストを設定するには、リッチスニペット使って非構造化マークアップすることが Googleでも紹介されています。（普通に作成するだけでもGoogleはパンくずリストとして読み取ってくれることもありますが、リッチスニペット使った方が確実です。）

参考 リッチ スニペット – パンくずリスト – ウェブマスター ツール ヘルプ

Google推奨の、マークアップの書き方としては、microdataを用いた方法と、RDFaがあるのですが、今回は、microdataを用いました。

あと、パンくずリストは、「複数パンくずリスト」という手もあるのですが、GoogleのMatt Cutts（マット・カッツ）氏が1つで十分と言っているので1つにしました。SEO的にも複数あっても、最初の一つしか採用しないようですし。

でも1つで間に合うならそれで十分で、ほとんどの人がそうやっているし、それが普通のやり方だ。僕たちも、1つのパンくずリストを勧める。

複数のパンくずリストを1つのページに設置することはSEOにおいて問題ないか？ | 海外SEO情報ブログ

コピペで使えるパンくずリストの作り方

今回作成した、Wordpressテーマにパンくずリストを載せる方法です。

作成する手順は以下です。

1. 手軽に呼び出して何度も使えるようにbreadcrumbs.phpファイルを作成する
2. パンくずリストのコードを書く（コピペ）
3. WordPressテーマ内からbreadcrumbs.phpをテンプレートとして呼び出す（コピペ）
4. style.cssでスタイルを整える（コピペ）

breadcrumbs.phpファイルの作成

これは普通に、「breadcrumbs.php」というファイルを作成します。

パンくずリストのコード

breadcrumbs.phpに以下のコードを貼り付けます。

<?php
if (is_single()) {
  $cat = get_the_category();
  if($cat && !is_wp_error($cat)){
      $par = get_category($cat[0]->parent);
      echo '<div id="breadcrumb">';
      echo '<div itemtype="http://data-vocabulary.org/Breadcrumb" itemscope=""><a href="'.get_bloginfo('url').'" itemprop="url"><span itemprop="title">ホーム</span></a><span class="sp">&gt;</span></div>';
      while($par && !is_wp_error($par) && $par->term_id != 0){
           $echo = '<div itemtype="http://data-vocabulary.org/Breadcrumb" itemscope=""><a href="'.get_category_link($par->term_id).'" itemprop="url"><span itemprop="title">'.$par->name.'</span></a><span class="sp">&gt;</span></div>'.$echo;
           $par = get_category($par->parent);
      }
      echo $echo.'<div itemtype="http://data-vocabulary.org/Breadcrumb" itemscope=""><a href="'.get_category_link($cat[0]->term_id).'" itemprop="url"><span itemprop="title">'.$cat[0]->name.'</span></a></div>';
    
      echo '</div><!-- /#breadcrumb -->';
  }  
}
?>

参考 パンくずの構造化マークアップをしよう | サイトフレームワークノート

WordPressテーマから呼び出す

single.phpやarchive.phpなどから、以下のコードを用いてパンくずリスト（breadcrumbs.phpファイル）を呼び出します。

<?php get_template_part('breadcrumbs'); ?>

スタイルシートの記入

最後にstyle.cssなどに以下のようなスタイルを書き込んで終了です。

/************************************
** パンくずリスト（Breadcrumb）
************************************/
#breadcrumb{
  margin-bottom: 20px;
  color:#777;
  font-size:13px;
}
 
div#breadcrumb div {
  display: inline;
}
 
#breadcrumb span.sp{
  margin:0 10px;
}
 
#breadcrumb a{
  text-decoration:none;
  color:#777;
}

作成されるパンくずリスト

これで作成されたパンくずリストはこんな感じになります。

HTMLソースはこんな感じになります。

<div id="breadcrumb">
  <div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
    <a itemprop="url" href="http://localhost/wordpress">
      <span itemprop="title">ホーム</span>
    </a>
    <span class="sp">></span>
  </div>
  <div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
    <a itemprop="url" href="http://localhost/wordpress/category/cat-1/">
      <span itemprop="title">カテゴリー 1</span>
    </a>
    <span class="sp">></span>
  </div>
  <div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
    <a itemprop="url" href="http://localhost/wordpress/category/cat-2/">
      <span itemprop="title">カテゴリー 2</span>
    </a>
  </div>
</div>

パンくずリストの構造をチェックするには、Google Structured Data Testing Toolなどで行えます。

まとめ

このような、リッチスニペットを使ったパンくずリストは、それさえ使えばアクセスがアップするというものではありません。

けれども、Googleに正確にブログの階層構造を伝えておくのは、良いことはあれ、決して悪いということはないと思います。