WordPressでschema.org構造化データに対応したパンくずリストの作り方【投稿・カテゴリー用】

先日（2020年1月22日未明）、以下のようなメールがGoogle Search Consoleから届きました。

パンくずリストhttps://nelog.jp/で問題が検出されました

https://nelog.jp/ の所有者様

Search Console により、貴サイトに影響する「パンくずリスト」関連の問題が 1 件検出されました。

主な警告

警告は、サイトの改善のための推奨項目です。警告によっては、検索結果での表示に影響がある場合がございます。また、警告が今後エラーになることも考えられます。貴サイトでは、以下の警告が検出されました。

data-vocabulary.org schema deprecated

上記の問題をできる限り解決されることをおすすめいたします。こうした問題を解消することで、サイトのエクスペリエンスや Google 検索結果での表示を最適化できます。

それとともに「data-vocabulary.org schema deprecated」のステータス警告がGoogle Search Console上で増大していました。

構造化データテストツールでページをチェックしてみても、パンくずリスト部分に警告表示が出ています。

警告文は以下。

data-vocabulary.org スキーマのサポートは終了しました。今後、Google がこのスキーマをサポートする予定はありません。schema.org タイプへの移行をお願いいたします。

調べてみると当サイト（Simplicityテーマ）で使用しているパンくずリストの構造化データの書式である「data-vocabulary.org」は、2020年4月6日をもってGoogleでのサポートを終了するようです。

現在、Google Search Console上で「警告」として表示されていますが、サポート終了後は「エラー」となるのでしょう。

パンくずリストの構造化データにエラーが出たとしても、コンテンツ内容以上に優先されるほど大きな変化は無いとは思います。

ただ、やはり警告とかエラーが出ていると気持ちはよくないということで、schema.orgタイプのHTMLに修正してみました。

参考 data-vocabulary構造化データによるリッチリザルトのサポートをGoogleが終了、schema.orgへの移行を推奨 | 海外SEO情報ブログ

カスタマイズの主な手順

カスタマイズの主な手順はこちら。

1. パンくずリストを表示したい箇所にPHPコードを貼り付ける
2. CSSでスタイリングする

基本コピペのみで行えるカスタマイズになるかと思います。

パンくずリストを表示したい箇所にPHPコードを貼り付ける

まずは、WordPressのパンくずリスト表示したい箇所に以下のコードを貼り付けます。

<?php
/**
 * カテゴリ用のパンくずリストのカスタマイズ
 * @author: わいひら
 * @link: https://nelog.jp/schema-org-breadcrumblist
 * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 */

if (is_single() || is_category()){
  $cats = get_the_category();
  $cat = (is_single() && isset($cats[0])) ? $cats[0] : get_category(get_query_var("cat"));
  if($cat && !is_wp_error($cat)){
    $echo = null;
    $root_text = 'ホーム';
    echo '<div id="breadcrumb" class="breadcrumb breadcrumb-categor" itemscope itemtype="https://schema.org/BreadcrumbList">';
    echo '<span class="breadcrumb-home" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span class="fa fa-home fa-fw" aria-hidden="true"></span><a href="'.esc_url(get_home_url()).'" itemprop="item"><span itemprop="name">'.esc_html($root_text).'</span></a><meta itemprop="position" content="1" /><span class="sp"><span class="fa fa-angle-right" aria-hidden="true"></span></span></span>';
    $count = 1;
    $par = get_category($cat->parent);
    //カテゴリ情報の取得
    $cats = array();
    while($par && !is_wp_error($par) && $par->term_id != 0){
      $cats[] = $par;
      $par = get_category($par->parent);
    }
    //カテゴリの順番入れ替え
    $cats = array_reverse($cats);
    //先祖カテゴリの出力
    foreach ($cats as $par) {
      ++$count;
      $echo .= '<span class="breadcrumb-item" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span class="fa fa-folder fa-fw" aria-hidden="true"></span><a href="'.esc_url(get_category_link($par->term_id)).'" itemprop="item"><span itemprop="name">'.esc_html($par->name).'</span></a><meta itemprop="position" content="'.$count.'" /><span class="sp"><span class="fa fa-angle-right" aria-hidden="true"></span></span></span>';
    }
    // 現カテゴリの出力
    ++$count;
    echo $echo.'<span class="breadcrumb-item" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span class="fa fa-folder fa-fw" aria-hidden="true"></span><a href="'.esc_url(get_category_link($cat->term_id)).'" itemprop="item"><span itemprop="name">'.esc_html($cat->name).'</span></a><meta itemprop="position" content="'.$count.'" />';
    echo '</span>';

    echo '</div><!-- /#breadcrumb -->';
  }
} //is_single ?>

上記は、Font Awesome4を利用することを前提としています。Font Awesome4を利用する場合は、以下のタグをheadタグ内で呼び出す必要があります。

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

アイコンフォントを使用しない場合は、アイコンフォントタグ部分を「>」等のテキストに書き換えるかしてください。

Font Awesome5を使用する場合は、書式を変更してください。

CSSでスタイリングする

次に以下のCSSをテーマ（子テーマ）のstyle.cssに追記します。

/************************************
** パンくずリスト（Breadcrumb）
************************************/
.breadcrumb{
  margin-bottom: 20px;
  color: #777;
  font-size:13px;
}

.breadcrumb .sp{
  margin:0 10px;
}

.breadcrumb a{
  text-decoration:none;
	color:#777;
	margin-left: 2px;
}

色や余白等は、好みで調整してください。

動作確認

投稿ページなどに今回のカスタマイズを挿入した場合は、以下のように表示されます。

テストテーマはWordPress公式テーマの「Twenty Seventeen」です。

なので、大抵のテーマであれば問題なく動作するとは思います。多分。

構造化データ

構造化データテストツールで試すと、「BreadcrumbList」として表示されます。

詳細を見ても問題はないようです。

まとめ

こんな感じで、WordPressの投稿ページや、カテゴリページのパンくずリストをschema.orgタイプに対応させることができます。

特にこだわりがなければ、コピペで出来るようになっているので、作業だけでいえば、そこまで難しいカスタマイズではないかと思います。

固定ページ用のパンくずリストはこちら。