Yoast SEOで「パンくずリスト」を有効化

【2020年3月更新】

「パンくずリスト」とは、ページがカテゴリーツリー・階層構造のどの位置にあるかをわかりやすく示してくれる、ハイパーリンク付きの道しるべです。

「パンくず」という表現は、ヘンゼルとグレーテルで、家に帰るための道しるべとして、パンくず(breadcrumb)を使ったことから転用されたようです。

参考資料：Google検索、「パンくずリスト」

人間用とボット用

人間用(HTML)とボット用(JSON-LDなど)があります。

人間用↓

ボット用↓

Yoastのパンくずリスト設定

私はSEOプラグイン「Yoast」で入れています。

SEO → Search Appearance → パンくずリスト → 有効 → 変更を保存

↑で有効化したら、スクロールダウンして、どのタクソノミーで階層を選びます。

もっとも一般的なのは、階層構造を作ることができる「カテゴリー」です。

ボット用の設定はこれで終わり。

JSON-LDのパンくずリストが掃き出されます。

人間用のパンくずリストは、テーマに標準装備されていることが多いですが、なくて入れたい場合は↓

テーマにパンくずリストのコードを追記

「変更を保存」ボタンのちょっと上に、「テーマにパンくずリストを挿入する方法」というセクションがあって、そこからたどれるページにコードが書いています。

※コードが変わるかもしれないので、敢えて記述しません。

子テーマのfunctions.phpに貼り付けられるように↓のような感じでコードを変えてペーストしました。

※functions.phpを編集すると画面が真っ白になったりすることがあるので、バックアップを取って、慎重になさってください！！

<?php
function add_breadcrumbs($content){
	if ( function_exists('yoast_breadcrumb') ) {
	$beforecontent = yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
        $fullcontent = $beforecontent . $content;
    } else {
        $fullcontent = $content;
    }
    return $fullcontent;
}
add_filter('the_content', 'add_breadcrumbs');
?>

ついでにデザインも微修正、外観のCSS追記に貼り付けます。

#breadcrumbs {
  　　　border-radius:10px;
	border-color:#7a6909;
	border-style:dotted;
	padding: 1rem;
}

点線で囲まれている部分がパンくずリストです。あまり使う気がなかったので、動作テストだけで、背景色とか余白とか真面目に調整していませんが、ID名は「breadcrumbs」だったので、ご自分でお好きなデザインに変えてくださいませ。

最後までお読みいただきありがとうございました。