はじめに
目的
本ドキュメントは、WordPressの人気プラグイン「Yoast SEO」を使ってパンくずリスト（breadcrumb）を作成・設定し、サイトに正しく表示する手順をわかりやすく解説します。初心者の方でも設定できるよう、画面操作とコードの挿入方法を丁寧に説明します。
対象読者
- WordPressでサイト運営をしている方
- Yoast SEOを導入済み、または導入を検討している方
- パンくずリストのSEO効果や表示方法を知りたい方
本書の構成と使い方
全7章で、基礎知識から具体的な設定、コードの挿入、階層表現の工夫、無効化の方法、実装時の注意点まで順を追って説明します。各章は独立して読めるようにしていますが、初めての方は第2章から順に読むと理解が深まります。
準備として、WordPressの管理画面にアクセスできることと、Yoast SEOがインストールされていることを確認してください。後の章で実際の画面例やコードを示しますので、それをコピーして利用できます。
パンくずリストの概要とSEO効果
パンくずリストとは
パンくずリストは、現在のページがサイト内のどの位置にあるかを示すナビゲーション要素です。例として「ホーム > 商品一覧 > 家電 > 冷蔵庫 > 商品名」のように、上位ページへたどれるリンクを並べます。ユーザーが現在位置を直感的に理解できるようになります。
種類と具体例
- 階層型（最も一般的）：サイトのカテゴリ構造を示します。例：ホーム > カテゴリ > サブカテゴリ > 記事
- 属性型：製品の属性で分類します。例：ホーム > ランキング > カラー別 > 赤
- 履歴型：ユーザーの閲覧経路を表示します（あまり使われません）。
ユーザビリティへの効果
パンくずリストは迷いを減らし、内部ページへの移動を促します。結果として滞在時間が伸び、直帰率が下がることがあります。特に階層の深いサイトで効果が高く、訪問者が目的のページへ戻りやすくなります。
SEOへの効果（分かりやすい例付き）
- クローラーがサイト構造を理解しやすくなります。たとえば、検索エンジンが「カテゴリ→サブカテゴリ→商品」の関係を把握できれば、インデックス精度が上がります。
- 内部リンクが増え、重要ページへ評価が伝わりやすくなります。これは検索順位の改善につながる可能性があります。
- 構造化データ（schema.orgのBreadcrumbList）を付けると、Googleの検索結果にパンくずが表示される場合があります。表示例：検索結果でURLの代わりに「ホーム > カテゴリ > 商品名」が出ることがあります。
Yoast SEOとの関係（簡潔に）
Yoast SEOを使うと、パンくずリスト用の構造化データを自動生成できます。設定を有効にすると、schema.org準拠のデータが出力され、Googleのリッチリザルト対応がしやすくなります。導入後はGoogleのリッチリザルトテストで確認してください。
実装上の注意点（概要）
- 常にホームへ戻れるよう最初にリンクを入れてください。
- 表示は短めにし、長いカテゴリ名は省略や短縮を検討してください。
- 同じページに重複するパンくずを作らないよう構造を整理してください。
（この章ではまとめを設けません）
Yoast SEOでのパンくずリスト設定手順
ステップ1：プラグインのインストール
WordPressのダッシュボードにログインし、プラグイン→新規追加で「Yoast SEO」を検索してインストールします。インストール後に有効化してください。初心者でも迷わない流れです。
ステップ2：パンくずリストの有効化
ダッシュボードの「SEO」メニューを開き、「検索での見え方」または「一般」→「機能」からパンくずリスト（Breadcrumbs）を探して有効化します。スイッチをオンにして保存します。
ステップ3：詳細設定の調整
区切り文字：パンとパンの間に表示する記号を選びます（例：> や /）。
ホームページ用アンカーテキスト：トップページに表示する名前を入力します（例：「ホーム」）。
接頭辞：パンくずの前に表示する文（例：「現在地：」）を設定できます。必要なければ空欄で構いません。
表示するタクソノミー：投稿の階層に表示する要素を選びます。おすすめは「カテゴリー」です。親ページの表示設定：親ページを含めるかどうかを決めます。
テーマのパンくず有効化設定：一部テーマは独自のパンくずがあるため、テーマ側と重複しないよう確認します。
ステップ4：設定の保存
全て調整したら「変更を保存」で設定を確定します。設定が反映されない場合はキャッシュをクリアしてください。
パンくずリストの表示コードの挿入方法
どこに挿入するか
通常は header.php のメインナビの下、あるいは footer.php のメインコンテンツ直前に置きます。テーマの更新で消えないように、子テーマ（child theme）で編集してください。テンプレートパーツを使う場合は、parts/breadcrumb.php を作り get_template_part() で読み込む方法が安全です。
基本のコード
以下を表示したい場所に追加します（Yoastが有効な前提）。
<?php if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>
id や class を付けて CSS で見た目を整えてください。
フロントページを除外して表示する場合
フロントページに表示させたくないときは、条件分岐を使います。
<?php if ( !is_front_page() && function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<nav aria-label="Breadcrumb"><ol id="breadcrumbs">','</ol></nav>');
} ?>
aria-label を付けてアクセシビリティを向上させます。
その他の注意点
・キャッシュを使っている場合は追加後にキャッシュをクリアしてください。
・HTML構造（nav/ol/li）にするとスクリーンリーダーで分かりやすくなります。
・複数テンプレートで使う場合は共通パーツ化して管理すると後で楽になります。
階層的なパンくずリストの設定方法
目的
サブカテゴリーを含む階層的なパンくずを表示して、訪問者が今どの階層にいるか分かりやすくします。例：トップ > カテゴリー > サブカテゴリー > 記事。
設定前の確認
- 投稿に親カテゴリーとサブカテゴリーを正しく設定しているか確認します。
- カテゴリーが親子関係で登録されていることを確認してください。
Yoastでの設定手順
- WordPress管理画面で「SEO（Yoast）」→「検索の外観」を開きます。
- 「コンテンツタイプ」タブを選択します。
- 表示させたい投稿タイプ（例：投稿）の項目で「パンくずリストを表示」を確認します。
- カテゴリーの扱いに関するオプションで「親カテゴリーを表示」や「階層を含める」を有効にします。
カスタム分類（カスタムタクソノミー）の扱い
カスタム分類を使う場合は、同じ「検索の外観」内の該当タクソノミー設定を確認し、階層表示をオンにします。
表示の確認とトラブルシュート
- フロントで記事を開き、パンくずが親→子の順で表示されるか確認します。
- 表示されない場合はキャッシュをクリアし、プラグイン競合（キャッシュ・テーマ）を疑います。
- 必要なら子テーマのテンプレートでYoastのパンくず関数が呼ばれているか確認します。
よくあるケースと対処例
- 同じ投稿が複数カテゴリに属する場合は、Yoastの設定で優先カテゴリを指定すると表示が安定します。
- カスタムURL構造を使う場合は、リンクが正しく生成されているか確認してください。
その他のパンくずリスト設定オプションと無効化方法
リンクの有無
パンくず内の各項目をリンクにするかどうかは選べます。通常は親階層へ移動できるようリンクにしますが、現在のページだけリンクにしないなどは、テーマ側のテンプレートか簡単なCSSで対応できます（例: body .yoast-breadcrumb a.current {pointer-events:none;}）。
順序と表示基準の変更
パンくずはページ階層・投稿タイプ・カテゴリーなどを基準に並びます。順序を変えたい場合は、親ページの設定やカテゴリーの親子関係を編集してください。カスタム投稿やタクソノミーを使うと表示基準を切り替えられます。
フロントページでの非表示
ホーム（フロントページ）ではパンくずを表示しないのが一般的です。テーマの条件分岐で非表示にするか、CSSで body.home .yoast-breadcrumb {display:none;} と指定すると簡単に隠せます。
キャッシュ対策
キャッシュを使うサイトでは、パンくずの変更が反映されにくいことがあります。変更後はキャッシュをクリアしてください。必要ならキャッシュプラグインで該当ページを除外する設定を検討します。
無効化（完全に消す方法）
Yoast SEOの管理画面「Search Appearance（検索での見え方）」→「Breadcrumbs（パンくず）」タブでスイッチをオフにすると簡単に無効化できます。テーマに直接挿入したコードがある場合はテンプレートから該当コードを削除してください。
構造化データについて
パンくずの構造化データ（JSON‑LD）は検索結果に影響します。表示を止めると構造化データも出力されなくなるため、その点も確認してください。
パンくずリスト実装時の注意点
編集前のバックアップを必ず取る
コードやテーマファイルを編集する前に、必ずバックアップを作成してください。子テーマを使うか、ファイルのコピーをローカルに保存すると安全です。編集は自己責任で行ってください。
テスト環境で先に確認する
本番に反映する前にステージングやローカル環境で動作を確認します。リンクの階層や表示崩れ、リンク先が正しいかをチェックしてください。
スマホ表示とフォント
スマホでの見やすさを重視します。文字サイズ、行間、タップしやすいリンク間隔を確保してください。パンくずが画面を圧迫しない位置に配置しましょう。
アクセシビリティとリンク文言
リンクは短く具体的に書き、スクリーンリーダー向けにaria-labelやroleを適切に付けます。キーボード操作でも移動できるか確認してください。
構造化データと検証
JSON-LDなどで構造化データを出力する場合は、Googleのリッチリザルトテストなどで検証します。不一致があると検索結果に影響するため注意してください。
表示速度とパフォーマンス
余分なスクリプトや重いスタイルは避け、レンダリング遅延を招かないようにします。単純なHTMLと軽いCSSで実装するのが望ましいです。
トラブル発生時の対処
表示がおかしくなったらバックアップから復元し、エラーログやプラグインを順に確認します。問題が解決しない場合は開発者やホスティング業者に相談してください。
