WP、Yoastで手抜き、だけど完璧な”パンくずリスト”

“パンくずリスト”とは

“パンくずリスト”とは、ページがカテゴリーツリー・階層構造のどの位置にあるかをわかりやすく示してくれる、ハイパーリンク付きのページナビです。(下図のオレンジ枠内)

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

パンくずリスト
オレンジ枠が”パンくずリスト”

上部のオレンジ枠内がパンくずリストで、当該ページの上位階層からのパスを示しています。ページの住所のようにサイト内での位置がわかりやすいですね。

一方、右サイド―バーのピンクで囲内は、カテゴリーツリーです。
親カテゴリー(ウラ)、子カテゴリー(ワードプレス)、孫カテゴリー(TwentySeventeen)というように、サイト全体の構造を示しています。

SEOプラグインのYoastでは、この道しるべ(breadcrumb)を簡単に作成できます。

SEOプラグイン、Yoastでスイッチ・オン!

私はSEOプラグインYoastの機能を使って、”パンくずリスト”を実装しました。

といっても、「有効化する」を選んだだけです。

時短、時短。

  1. パンくずリスト→有効化を選択
  2. 末端は太字→標準を選択
  3. Yoastコードをsingle.phpに貼り付ける

の3ステップでした。

設定場所は、YoastロゴのSEO→高度な設定→パンくずリストです。

Yoastでの"パンくずリスト"設定画面
Yoastでの”パンくずリスト”設定画面

最後のページを太字にするか?

最後のページを太字にすると、強調を意味するstrongタグが出力されてしまっていました。

strongタグは、強い強調なので、ここぞ!っというときにだけ使うことを推奨されています。詳しくは関連記事「“strong”は重要!、emは強調!、bは注目…」をご参照くださいませ。

当ブログでは、本当に強調したいときにだけstrongタグを使い、装飾したいときは別の方法をとっていますのでこの設定は、「標準」を選択しました。

“パンくずリスト”のタクソノミーは、カテゴリーがおススメ

Yoastでの"パンくずリスト"設定(後半)
Yoastでの”パンくずリスト”設定(後半)

関連記事「“カテゴリーとタグ”の違いと使い分け」に詳しく書いたのですが、カテゴリーでは縦断的な階層表現ができることが特徴ですから、パンくずリストには最適です。

そして、最後に大事な作業が待っています。

個別投稿phpにコードをコピペ

設定を保存後、上のオレンジ枠からYoastのページにリンクして、コードをコピーし、子テーマの関連個所に貼り付ける作業があります。

個別投稿にコードをコピペ
個別投稿にコードをコピペ

Yoast的には、header.phpに貼り付けられればそれが一番簡単よ!って事みたいですが、TwentySeventeenでは、「貼れるケド、無様」でした。このため投稿ならsingle.php、固定ページならpage.phpというように、それぞれのページタイプで適切な場所に入れていく作業があります。

好きなところに好きに貼れるという自由度がある!ともいいます。

仕上がりはなかなかキレイで、大変気に入っています。

ここまでは、主にビジターがサイト回遊する際の支援になります。
ユーザーフレンドリーってやつですね。

パンくずリストでSEO対策、rdf形式のメタデータ

サーチコンソールの構造化データ > Breadcrumb(マークアップ: rdf.data-vocabulary.org)にガシガシ追加されて行っています。

Google検索での"パンくずリスト"のスニペット
Google検索でのパンくずリストのスニペット

Yoastでは、rdf形式で構造化データとしての記述が出来ているので、検索結果のスニペットにバッチリ反映されていました。

他のブログサービスのパンくずリストは、JSON-LD形式で自作のコードを書いてきたのですが、Yoastのおかげで手抜き・時短、かつ完璧で、大満足です!

コメントを残す

メールアドレスが公開されることはありません。