WordPressにGoogleに認識されるパンくずリストをつける

2015/12/29 2016/01/02

パンくずリストは記事の階層関係、いわば立体的なナビゲーションをサイトに追加するものです。
このようにナビゲーションがついていると、サイトを訪れた人にも検索エンジンにも記事の相対位置がわかりやすくなり、ユーザビリティの向上やSEOとしての効果があると言われています。
適切にマークアップすることで、検索結果にも反映されます。
当サイトでは、Seesaaブログの頃からパンくずリストをつけています。

当サイトに設置しているパンくずリスト

現在当サイトに設置しているパンくずリストはテーマやプラグインを使わずに、以下のような感じで自作のものを設置しています。

記事ページのパンくずリスト

記事ページには、ホーム>カテゴリ名>を表示しています。
カテゴリが入れ子になっている場合はそれも表示します。
複数カテゴリがある場合でも一つのみの表示です。

カテゴリページのパンくずリスト

カテゴリページには、ホーム>カテゴリ名>(親カテゴリがあれば)を表示しています。
カテゴリが入れ子になっている場合はそれも表示します。

年月日別アーカイブページのパンくずリスト

年月日別のアーカイブページにはホーム>年>月>を表示しています。

その他のページのパンくずリスト

その他のページにはホーム>のみを表示しています。

パンくずリストを自作する理由

もともとは、以前使用していたテーマ、Stinger5のデフォルトのパンくずリストを使用していたのですが、表示が若干おかしくなっていました。
どうやらStinger5でのパンくずリストはかなり簡便なもので、どのページでも一番上の記事のカテゴリを引っ張ってくるので、入れ子になっているカテゴリがあるカテゴリページやカテゴリ以外のアーカイブページなどで表示がおかしくなるのです。

また、データベースへのアクセスがないプラグインならば特に動作が重くなることもないと思っているので、私はプラグインは積極的に使っていく方です。
が、既存のプラグインでは記事ページやカテゴリページ用のホーム>カテゴリ>というパンくずリストと年月日別のアーカイブページ用の年>月>というパンくずリストを併用することが出来なかったため、自作することにしました。
特にここの併用にこだわりがなければ、管理も楽になるので、Breadcrumb NavXTやWordPress SEO by yoastなどのプラグインを使うのがよいと思います。

パンくずリスト用のコード

私は以下のようなbreadcrumb.phpファイルを作成しました。
せっかくなので、data-vocabulary.orgではなく、Googleも公式にサポートするようになった、schema.orgでマークアップしてみました。
各テンプレート(single.php, archive.php, page.php, search.php, 404.php)からパンくずリストを表示させたい箇所で<?php get_template_part('breadcrumb');?>を記述して呼び出します。

<div itemscope itemtype="http://schema.org/BreadcrumbList" id="breadcrumb" >
  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="<?php echo home_url(); ?>"> <span itemprop="name">ホーム</span> </a>
    <meta itemprop="position" content="1" /></div>&gt;
  <?php if(is_category() || is_singular( 'post' ) ) {
      $allcats = array();
      $catid = -1;
      if(is_single()) {
        $categories = get_the_category($post->ID);
        $catid = $categories[0]->term_id;
        $allcats[] = $catid;
      }
      else {
        $cat = get_queried_object();
        if($cat -> parent != 0)
          $catid = $cat->cat_ID;
      }
      if($catid > 0)
          $allcats = array_merge(array_reverse(get_ancestors($catid, 'category' )),$allcats);
      $position = 2;
      foreach($allcats as $catid): ?>
  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="<?php echo get_category_link($catid); ?>" itemprop="item"> <span itemprop="name"><?php echo get_cat_name($catid); ?></span></a>
    <meta itemprop="position" content="<?php echo $position++; ?>" /></div>&gt;
  <?php endforeach;
	} else if(is_date() && !is_year()) { ?>
  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="<?php echo get_year_link(get_query_var('year')); ?>"> <span itemprop="name"><?php echo get_query_var('year'); ?>年</span> </a>
    <meta itemprop="position" content="2" /></div>&gt;
  <?php if(is_day()) {?>
  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="<?php echo get_month_link(get_query_var('year'),get_query_var('monthnum')); ?>"> <span itemprop="name"><?php echo get_query_var('monthnum'); ?>月</span> </a>
    <meta itemprop="position" content="3" /></div>&gt;
  <?php } } ?>
</div>

以下簡単な解説です。

schema.orgによるパンくずリストのマークアップ

schema.orgでは、以下のように、BreadcrumbListの中にListItemを埋め込みます。
対象となるURLのアンカーにはitemprop=”item”を、テキストにはitemprop=”name”をマークアップします。
またパンくずリストの階層としてitemprop=”positionをマークアップします。
画面には表示しないのでmetaタグを使用しています。

<div itemscope itemtype="http://schema.org/BreadcrumbList">
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="http://example.com/test"; ?>" itemprop="item"> <span itemprop="name">Test</span></a>
    <meta itemprop="position" content="1" /></div></div>

shema.orgのパンくずリストは比較的最近Googleでサポートされましたが、特に問題なく表示されています。

記事、カテゴリページのパンくずリスト用コード

<?php if(is_category() || is_singular( 'post' ) ) {

記事ページはis_singular( ‘post’ )で判定します。
is_single()を使ってしまうと、添付ファイル用のページも判定されてしまいます。

      if(is_single()) {
        $categories = get_the_category($post->ID);
        $catid = $categories[0]->term_id;
        $allcats[] = $catid;
      }

記事ページのカテゴリのリストを取得して、一番最初のカテゴリを取得しています。

      else {
        $cat = get_queried_object();
        if($cat -> parent != 0)
          $catid = $cat->cat_ID;
      }

カテゴリページに親カテゴリがあれば取得します。

      if($catid > 0)
        $allcats = array_merge(array_reverse(get_ancestors($catid, 'category' )),$allcats);

取得したカテゴリにさらに親があれば取得して、逆順に並べます。

       foreach($allcats as $catid): ?>
  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="<?php echo get_category_link($catid); ?>" itemprop="item"> <span itemprop="name"><?php echo get_cat_name($catid); ?></span></a>
    <meta itemprop="position" content="<?php echo $position++; ?>" /></div>&gt;
  <?php endforeach;

カテゴリのパンくずの出力です。
schema.orgでマークアップしています。

年月日アーカイブページのパンくずリスト用コード

	} else if(is_date() && !is_year()) { ?>
  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="<?php echo get_year_link(get_query_var('year')); ?>"> <span itemprop="name"><?php echo get_query_var('year'); ?>年</span> </a>
    <meta itemprop="position" content="2" /></div>&gt;

年以外のアーカイブページの場合に、年を出力します。

   <?php if(is_day()) {?>
  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="<?php echo get_month_link(get_query_var('year'),get_query_var('monthnum')); ?>"> <span itemprop="name"><?php echo get_query_var('monthnum'); ?>月</span> </a>
    <meta itemprop="position" content="3" /></div>&gt;

日付のアーカイブページの場合に、月を出力します。