Yoast SEOでパンくずリストを表示する方法【WordPress】

こんにちは、ゆきまるです。

パンくずリスト(通称breadcrumb)はWebサイトでよく見かけますね。

ユーザーが回遊しやすくなるのはもちろん、Googleの検索結果でもリッチリザルト(リッチスニペット)という形で表示されるようになり、他の検索結果より気を引きやすくなるかもしれません。

今回は、いろいろとSEOの機能が詰まったYoast SEOというWordPressのプラグインで、パンくずリストを表示する方法を紹介します。

  1. Yoast SEOのインストール
  2. Yoast SEOの設定
    1. 有効にする
    2. 最低限設定すべき項目
  3. パンくずリストをブログに表示させる
    1. 表示させるコード
    2. うまくいかないとき
    3. カスタマイズ
  4. 構造化データが埋め込まれているか確認
    1. 確認する方法
  5. まとめ

Yoast SEOのインストール

プラグインの新規追加で「Yoast SEO」と検索しましょう。さくっとインストールしましょう。

Yoast SEOの設定

有効にする

今回は、パンくずリストに関するもののみ解説します。

管理画面 > SEO > Search Appearance と進むと、上にメニューが出てきます。

その中の右から2番目の「パンくずリスト」をクリックしましょう。

まずは、「パンくずリストを有効にする」を「有効」に変更します。

実は、これだけではまだ表示されませんテンプレートファイルに書き込む必要があるので、後で説明します。

最低限設定すべき項目

有効にすると、項目が出てきます。

最低限設定すべきなのは、以下の3つですかね。

①は、区切りの文字をどうするかです。「>」や「/」など、自由に設定してください。

②は、表示するホームページ(最初のページ)の名前をどうするかです。ブログの名前にしておくのがいいと思ったのでそうしています。

③は、訳すと、

コンテントタイプに応じて、パンくずリストになんのタクソノミーを表示するか

といった感じです。ちょっとわからないと思うので下の画像を見てください。投稿ページにおいて、以下の部分になにを出すか選択できます。

「カテゴリー」を選んでいて、この記事のカテゴリーは「WordPress」なので、「WordPress」という項目が、ホームページ名と投稿ページ名の間に表示されています。

パンくずリストをブログに表示させる

表示させるコード

投稿を表示しているテンプレート(例えばsingle.php)に以下のようなコードを書き足すことで、パンくずリストを表示させることができます。

<?php
if(function_exists( 'yoast_breadcrumb' )){
  yoast_breadcrumb( '<p id="breadcrumbs">', '</p>');
}
?>

うまくいかないとき

これで表示されるようになりましたか?

もし表示されない場合は、

  • 設定が「有効」になっているか。
  • 書き込んだテンプレートはそれであっているか
  • 「<?php」や、「?>」などのタグが入れ子になったりしてないか

など一度確認してみてください。

カスタマイズ

p要素とspan要素で構成されているので、そのままでも横並びになっていますが、
CSSで見え方を自分なりに変えてみるといいでしょう。

これらの情報は設定の下部にあるリンク先に詳しく載っています。

ナレッジベース記事

構造化データが埋め込まれているか確認

確認する方法

Yoast SEOはJSON-LDの埋め込みも自動でやってくれます。

Googleの以下のツールできちんとできているか確認できます。

構造化データ テストツール – Google

上記サイトで、自分のブログのURLを入力して確認してみましょう。検出できていればたぶんオッケーです。

まとめ

今回は、パンくずリストにしか触れていませんが、Yoast SEOは他にもいろいろな機能があります。

構造化データでサイトの情報をサーチエンジンに正しく伝え、正しい評価を得るために、構造化データは大事だなと思いました(小並感)

最近の記事