WordPressパンくずリストの作り方｜SEO効果と簡単な設定方法

はじめに

WordPressでブログやサイトを運営していると、「パンくずリスト」という言葉を目にすることがあります。パンくずリストは、ユーザーが今どのページを見ているのかをわかりやすく示すナビゲーションの一種です。

たとえば、記事上部に「ホーム > WordPress > パンくずリストの作り方」のように表示されているリンクを見たことがある方も多いでしょう。これがパンくずリストです。

WordPressのパンくずリストは、ユーザーの利便性を高めるだけでなく、SEO対策の面でも重要な役割を持っています。サイト構造を検索エンジンに伝えやすくなり、内部リンクの整理にもつながるため、ブログやメディアサイトではぜひ設置しておきたい要素です。

この記事では、WordPressでパンくずリストを作る方法を、テーマ機能・プラグイン・自作コードの3つに分けて解説します。さらに、SEO効果や構造化データの設定、表示されないときの対処法までわかりやすく紹介します。

1. WordPressのパンくずリストとは

WordPressのパンくずリストとは、ユーザーがサイト内のどの階層にいるのかを示すナビゲーションリンクのことです。主に記事ページやカテゴリーページの上部に表示され、トップページから現在のページまでの道順を示します。

パンくずリストは、英語では「Breadcrumb」と呼ばれます。童話『ヘンゼルとグレーテル』で、主人公が森で迷わないようにパンくずを落として道しるべにした話が由来です。

Webサイトにおいても、パンくずリストは「現在地を示す道しるべ」として機能します。

1-1. パンくずリストの意味と役割

パンくずリストの主な役割は、ユーザーに現在のページ位置をわかりやすく伝えることです。

たとえば、WordPressに関する記事を読んでいるユーザーが、次のようなパンくずリストを見たとします。

ホーム > WordPress > SEO対策 > WordPressパンくずリストの作り方

この表示を見ることで、ユーザーは「今見ている記事は、WordPressカテゴリーの中のSEO対策に関する記事なのだ」と理解できます。

また、パンくずリスト内の「WordPress」や「SEO対策」をクリックすれば、関連するカテゴリーページへ移動できます。つまり、パンくずリストは現在地の表示だけでなく、サイト内回遊を促す内部リンクとしても役立ちます。

1-2. WordPressサイトで表示されるパンくずリストの例

WordPressサイトでよく見られるパンくずリストには、次のようなパターンがあります。

ブログ記事の場合は、以下のような形が一般的です。

ホーム > ブログ > WordPress > パンくずリストの作り方

カテゴリーページの場合は、次のように表示されます。

ホーム > WordPress

固定ページの場合は、親ページと子ページの関係に応じて表示されます。

ホーム > サービス一覧 > WordPress制作

ECサイトや商品紹介サイトでは、さらに細かい階層になることもあります。

ホーム > 商品一覧 > WordPressテーマ > 初心者向けテーマ

このように、パンくずリストはサイトの構造に合わせて表示内容が変わります。WordPressでは、テーマやプラグインを使うことで、このようなパンくずリストを比較的簡単に設置できます。

1-3. グローバルナビ・サイトマップとの違い

パンくずリストと混同されやすいものに、グローバルナビやサイトマップがあります。それぞれ役割が異なるため、違いを理解しておきましょう。

グローバルナビは、サイト上部に表示される主要メニューです。「ホーム」「サービス」「ブログ」「お問い合わせ」など、サイト内の重要ページへ移動するために使われます。

一方、パンくずリストは、現在のページがどの階層にあるかを示すナビゲーションです。グローバルナビが「主要ページへの入り口」だとすれば、パンくずリストは「現在地までの道順」といえます。

サイトマップは、サイト全体のページ一覧をまとめたものです。ユーザー向けのHTMLサイトマップと、検索エンジン向けのXMLサイトマップがあります。パンくずリストはページごとに表示されるナビゲーションであり、サイトマップのように全ページ一覧を表示するものではありません。

つまり、グローバルナビ・パンくずリスト・サイトマップは、それぞれ異なる目的でサイトの使いやすさやSEOを支えています。

2. WordPressにパンくずリストを設置するSEO効果

WordPressにパンくずリストを設置すると、ユーザーにも検索エンジンにもサイト構造が伝わりやすくなります。直接的に検索順位が必ず上がるわけではありませんが、SEOに良い影響を与える要素の一つです。

特に記事数が多いブログや、カテゴリーページを重視しているサイトでは、パンくずリストを設置するメリットが大きくなります。

2-1. ユーザーが現在地を把握しやすくなる

パンくずリストを設置すると、ユーザーは自分がサイト内のどこにいるのかをすぐに把握できます。

検索エンジンから直接記事ページに訪問したユーザーは、トップページやカテゴリーページを経由せずにサイトへ入ってきます。そのため、何のカテゴリーの記事なのか、他に関連する情報があるのかを把握しにくい場合があります。

そこでパンくずリストが表示されていれば、ユーザーは記事の位置づけを理解しやすくなります。

たとえば、WordPress初心者が「WordPress パンくずリスト」と検索して記事にたどり着いた場合、パンくずリストに「WordPress > SEO対策」と表示されていれば、同じカテゴリー内の関連記事も探しやすくなります。

2-2. 内部リンク構造が整理される

パンくずリストは、サイト内の上位階層へリンクを設置する役割もあります。そのため、内部リンク構造を自然に整理できます。

内部リンクは、SEOにおいて重要な要素です。関連するページ同士が適切につながっていると、ユーザーが情報を探しやすくなり、検索エンジンもサイト内の重要なページを理解しやすくなります。

たとえば、すべての記事ページからカテゴリーページへパンくずリストでリンクされていれば、カテゴリーページに内部リンクが集まりやすくなります。その結果、カテゴリーページの重要性を検索エンジンに伝えやすくなります。

WordPressでは、記事数が増えるほど内部リンクの管理が複雑になりがちです。パンくずリストを設置することで、サイト全体のリンク構造をわかりやすく保てます。

2-3. クローラーがサイト構造を理解しやすくなる

検索エンジンのクローラーは、リンクをたどってサイト内のページを巡回します。パンくずリストがあると、クローラーがページ同士の階層関係を理解しやすくなります。

特に、トップページ・カテゴリーページ・記事ページの関係が明確になっているサイトでは、クローラーがサイト構造を把握しやすくなります。

たとえば、以下のような階層があるとします。

ホーム > WordPress > プラグイン > パンくずリスト設定方法

このようなパンくずリストが各記事に表示されていれば、検索エンジンは「このページはWordPressカテゴリー内のプラグインに関する記事である」と理解しやすくなります。

サイト構造が整理されていることは、SEOの土台づくりとして重要です。

2-4. 検索結果でパンくずが表示される可能性がある

パンくずリストに構造化データを設定すると、検索結果にパンくず形式でURL階層が表示される可能性があります。

通常、検索結果にはページタイトルや説明文、URLなどが表示されます。パンくずリストの構造化データが適切に設定されていると、URLの代わりに「ホーム > WordPress > SEO対策」のような階層表示になることがあります。

検索結果で階層がわかりやすく表示されると、ユーザーはページ内容を理解しやすくなります。その結果、クリック率の改善につながる可能性があります。

ただし、構造化データを設定したからといって、必ず検索結果にパンくずが表示されるわけではありません。最終的にどのように表示されるかは、検索エンジン側の判断によります。

2-5. 離脱率の改善や回遊率アップにつながる

パンくずリストは、ユーザーが他のページへ移動する導線にもなります。

記事を読み終えたユーザーが「このカテゴリーの記事をもっと読みたい」と感じたとき、パンくずリストからカテゴリーページへ移動できます。これにより、1ページだけ見て離脱するのではなく、複数ページを閲覧してもらいやすくなります。

回遊率が上がると、ユーザーがサイト内で必要な情報を見つけやすくなります。結果として、サイト全体の満足度向上にもつながります。

SEOでは、単に検索エンジンに評価されることだけでなく、ユーザーにとって使いやすいサイトを作ることが重要です。パンくずリストは、そのための基本的な改善策の一つです。

3. WordPressでパンくずリストを作る主な方法

WordPressでパンくずリストを作る方法は、大きく分けて3つあります。

1つ目は、テーマに標準搭載されているパンくずリスト機能を使う方法です。2つ目は、プラグインを使って設置する方法です。3つ目は、PHPコードを使って自作する方法です。

それぞれメリットとデメリットがあるため、サイトの運営方針やスキルに合わせて選ぶことが大切です。

3-1. テーマ標準機能で設定する方法

WordPressテーマの中には、パンくずリスト機能が最初から用意されているものがあります。

たとえば、Cocoon、SWELL、AFFINGERなどの人気テーマでは、管理画面からパンくずリストの表示を設定できる場合があります。テーマ機能を使えば、追加のプラグインを入れずにパンくずリストを表示できるため、初心者にも扱いやすい方法です。

テーマ標準機能を使うメリットは、デザインとの相性が良いことです。テーマ側で用意されている機能なので、サイト全体の見た目に自然になじみやすく、余計な調整が少なくて済みます。

一方で、テーマを変更するとパンくずリストの設定も変わる可能性があります。また、表示位置や階層ルールを細かくカスタマイズしたい場合には、テーマ機能だけでは不十分なこともあります。

3-2. プラグインで簡単に設置する方法

WordPressでパンくずリストを設置する最も簡単な方法は、プラグインを使うことです。

代表的なプラグインには、Breadcrumb NavXT、Yoast SEO、Rank Mathなどがあります。これらのプラグインを使えば、コードを書かなくてもパンくずリストを設定できます。

特に初心者の場合、プラグインを使う方法がおすすめです。設定画面から表示内容を変更できるため、PHPやHTMLに詳しくなくても導入しやすいからです。

ただし、プラグインによってはテーマファイルに表示用コードを追加する必要があります。また、すでにテーマ側でパンくずリストを出力している場合、プラグインを追加すると重複表示になることがあります。

3-3. PHPコードを使って自作する方法

WordPressの知識がある場合は、PHPコードを使ってパンくずリストを自作することもできます。

自作するメリットは、表示内容やHTML構造を自由に調整できることです。たとえば、投稿ページ、固定ページ、カテゴリーページ、タグページなど、ページの種類ごとに表示内容を細かく制御できます。

また、不要なプラグインを増やさずに済むため、サイトを軽量に保ちやすいというメリットもあります。

一方で、PHPの知識が必要であり、記述ミスをするとサイトが表示されなくなるリスクがあります。特にfunctions.phpを編集する場合は、必ずバックアップを取ったうえで作業する必要があります。

初心者がいきなり本番サイトで自作するのは避け、子テーマやテスト環境で確認してから導入するのがおすすめです。

3-4. どの方法を選ぶべきかの判断基準

どの方法を選ぶべきかは、WordPressサイトの状況によって異なります。

初心者で、できるだけ簡単に設定したい場合は、テーマ機能またはプラグインがおすすめです。使用中のテーマにパンくずリスト機能があるなら、まずはテーマ標準機能を確認しましょう。

テーマに機能がない場合や、SEOプラグインとあわせて管理したい場合は、Breadcrumb NavXT、Yoast SEO、Rank Mathなどのプラグインを使うと便利です。

一方、HTML構造やデザインを細かく調整したい場合、またはプラグインを増やしたくない場合は、自作コードを検討するとよいでしょう。

判断基準をまとめると、以下のようになります。

初心者はテーマ機能またはプラグインがおすすめです。中級者以上でカスタマイズ性を重視するなら、自作コードも選択肢になります。サイトの表示速度を重視する場合は、不要なプラグインを増やさず、テーマ機能や自作で対応する方法もあります。

4. プラグインでWordPressパンくずリストを設定する方法

WordPressのパンくずリストは、プラグインを使うと比較的簡単に設定できます。特に、コード編集に不安がある初心者にはプラグインでの設定がおすすめです。

ここでは、代表的なプラグインであるBreadcrumb NavXT、Yoast SEO、Rank Mathを使った設定方法を解説します。

4-1. 初心者にはプラグイン設定がおすすめな理由

初心者にプラグイン設定がおすすめな理由は、管理画面から設定できる項目が多く、コードの知識が少なくても導入しやすいからです。

パンくずリストを自作する場合、PHPやWordPressのテンプレートタグを理解する必要があります。記述ミスがあると、サイト全体にエラーが出る可能性もあります。

一方、プラグインであれば、インストールして有効化し、必要な項目を設定するだけでパンくずリストを表示できます。構造化データに対応しているプラグインも多く、SEO面でも安心です。

また、プラグインによっては投稿タイプごとにパンくずリストの表示ルールを変更できるため、ブログ記事・固定ページ・カテゴリーページなどに柔軟に対応できます。

4-2. Breadcrumb NavXTで設定する手順

Breadcrumb NavXTは、WordPressでパンくずリストを設置する代表的なプラグインです。細かい設定ができるため、多くのサイトで利用されています。

設定手順は以下の流れです。

まず、WordPress管理画面にログインし、「プラグイン」から「新規追加」をクリックします。検索欄に「Breadcrumb NavXT」と入力し、プラグインをインストールして有効化します。

有効化後、管理画面の「設定」内に「Breadcrumb NavXT」が追加されます。ここからパンくずリストの表示形式を設定できます。

ただし、Breadcrumb NavXTは有効化しただけではテーマ上に表示されない場合があります。その場合は、テーマファイルの表示したい場所に以下のようなコードを追加します。

PHP
<?php if ( function_exists('bcn_display') ) : ?>
  <nav class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php bcn_display(); ?>
  </nav>
<?php endif; ?>

一般的には、single.php、page.php、header.php、またはテーマのテンプレートパーツに追加します。設置場所はテーマによって異なるため、作業前にバックアップを取っておきましょう。

4-3. Yoast SEOで設定する手順

Yoast SEOは、SEO対策用の有名なWordPressプラグインです。パンくずリスト機能も備えており、SEO設定とあわせて管理できます。

Yoast SEOでパンくずリストを使うには、まずプラグインをインストールして有効化します。その後、管理画面からYoast SEOの設定に進み、パンくずリスト機能を有効化します。

テーマ側に表示するには、以下のようなコードをテンプレートファイルへ追加します。

PHP
<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<nav class="breadcrumbs">', '</nav>' );
}
?>

Yoast SEOのパンくずリストは、構造化データとの連携がしやすい点が特徴です。すでにYoast SEOを使っているサイトであれば、別のパンくずリスト専用プラグインを追加せずに対応できる場合があります。

ただし、テーマによってはコードを追加しないと表示されないことがあります。設定を有効化したあと、実際の投稿ページで表示されているか確認しましょう。

4-4. Rank Mathで設定する手順

Rank Mathも、WordPressのSEO対策でよく使われるプラグインです。パンくずリスト機能があり、SEO設定とまとめて管理できます。

Rank Mathを使う場合は、プラグインをインストールして有効化したあと、管理画面のRank Math設定からパンくずリスト機能を有効にします。

表示するには、テーマファイルに以下のようなコードを追加します。

PHP
<?php if ( function_exists('rank_math_the_breadcrumbs') ) rank_math_the_breadcrumbs(); ?>

Rank Mathでは、パンくずリストの区切り文字やホームページ名などを設定できる場合があります。サイトに合わせて表示内容を調整しましょう。

すでにRank MathをSEOプラグインとして使っている場合は、パンくずリストもRank Mathで統一すると管理しやすくなります。

4-5. プラグイン設定後に表示位置を確認する方法

プラグインでパンくずリストを設定したら、必ず実際のページで表示位置を確認しましょう。

確認すべきポイントは、記事タイトルの上に表示されているか、ヘッダー下に自然に配置されているか、スマホ表示で崩れていないか、パンくずリストが重複していないかです。

特に注意したいのは、テーマ機能とプラグイン機能の重複です。テーマ側ですでにパンくずリストが表示されている状態で、プラグインでも表示すると、同じページに2つのパンくずリストが出てしまいます。

また、CSSの影響で文字が小さすぎたり、横幅からはみ出したりする場合もあります。パソコンだけでなく、スマートフォンでも見やすいか確認しましょう。

5. テーマ機能でパンくずリストを設定する方法

WordPressテーマによっては、標準機能としてパンくずリストを表示できます。テーマ機能を使えば、プラグインを追加せずに済むため、シンプルに運用できます。

特に有料テーマや国内向けの人気テーマでは、パンくずリスト機能が用意されていることが多いです。

5-1. 使用中テーマにパンくず機能があるか確認する

まずは、現在使用しているWordPressテーマにパンくずリスト機能があるか確認しましょう。

確認する場所は、主に以下のような管理画面です。

WordPress管理画面の「外観」から「カスタマイズ」を開きます。その中に「投稿・固定ページ」「SEO設定」「パンくずリスト」「ページ表示設定」などの項目がないか確認します。

テーマ独自の管理画面がある場合は、そこにパンくずリストの設定が用意されていることもあります。たとえば、テーマ設定、カスタマイズ、SEO設定、投稿ページ設定などの中に表示切り替え項目があるケースです。

見つからない場合は、テーマの公式マニュアルで「パンくずリスト」「breadcrumb」などのキーワードを検索して確認しましょう。

5-2. WordPress管理画面から表示を有効化する

テーマにパンくずリスト機能がある場合、多くは管理画面から表示を有効化できます。

一般的な流れは以下の通りです。

WordPress管理画面にログインし、「外観」から「カスタマイズ」またはテーマ独自の設定画面を開きます。パンくずリストに関する項目を探し、「表示する」「有効にする」などにチェックを入れます。

その後、投稿ページや固定ページを開き、パンくずリストが表示されているか確認します。

テーマによっては、表示場所を選べる場合があります。たとえば、「ヘッダー下に表示」「記事タイトル上に表示」「メインカラム上部に表示」などです。ユーザーが見やすく、記事本文の邪魔にならない位置を選びましょう。

5-3. Cocoon・SWELL・AFFINGERなど主要テーマの確認ポイント

Cocoon、SWELL、AFFINGERなどの人気WordPressテーマでは、パンくずリスト機能が用意されていることがあります。ただし、設定場所や表示条件はテーマによって異なります。

Cocoonの場合は、Cocoon設定の中にパンくずリストや投稿ページの表示に関する項目があります。表示位置や表示対象を確認しましょう。

SWELLの場合は、カスタマイズ画面やテーマ設定内でパンくずリストの表示を管理できることがあります。投稿ページ、固定ページ、アーカイブページなど、どのページに表示するかを確認します。

AFFINGERの場合は、テーマ管理画面にSEO関連や投稿ページ表示に関する設定が用意されている場合があります。パンくずリストの表示有無やデザイン設定を確認しましょう。

いずれのテーマでも、バージョンによって設定場所が変わることがあります。正確な手順は、使用中テーマの公式マニュアルを確認するのが確実です。

5-4. テーマ機能で表示されないときの対処法

テーマ機能でパンくずリストを有効化しても表示されない場合は、いくつかの原因が考えられます。

まず、表示対象ページを確認しましょう。テーマによっては、投稿ページには表示されるものの、固定ページやトップページには表示されない設定になっていることがあります。

次に、キャッシュを削除します。キャッシュ系プラグインやサーバーキャッシュが残っていると、設定変更がすぐに反映されない場合があります。

また、カスタマイズしたテンプレートファイルが影響している可能性もあります。子テーマでsingle.phpやpage.phpを編集している場合、テーマ標準のパンくずリスト出力部分が削除されていないか確認しましょう。

CSSで非表示になっている場合もあります。ブラウザの検証ツールを使い、パンくずリストのHTMLが出力されているか、display:noneなどが指定されていないか確認すると原因を特定しやすくなります。

6. プラグインなしでパンくずリストを自作する方法

WordPressでは、プラグインを使わずにパンくずリストを自作することもできます。PHPコードを使えば、投稿ページ、固定ページ、カテゴリーページなどに応じて表示内容を切り替えられます。

ただし、自作にはWordPressのテンプレート構造やPHPの知識が必要です。作業前には必ずバックアップを取り、できれば子テーマで編集しましょう。

6-1. functions.phpにコードを追加する前の注意点

functions.phpは、WordPressテーマの機能を追加・変更するための重要なファイルです。ここに記述ミスがあると、サイト全体が表示されなくなる可能性があります。

そのため、編集前には必ず次の点を確認してください。

まず、現在のテーマファイルをバックアップします。FTPやサーバーのファイルマネージャーからfunctions.phpをダウンロードしておくと安心です。

次に、親テーマではなく子テーマを使って編集します。親テーマを直接編集すると、テーマ更新時に変更内容が上書きされる可能性があります。

また、コードを追加する場合は、閉じタグの直前や既存コードの途中に不用意に貼り付けないよう注意しましょう。エラーが起きたときにすぐ戻せるよう、作業前の状態を保存しておくことが大切です。

6-2. 投稿ページ用のパンくずリストを作る

投稿ページ用のパンくずリストを自作する場合、ホーム、カテゴリー、現在の記事タイトルを順番に表示する形が一般的です。

以下は、シンプルなパンくずリスト関数の例です。

PHP
function my_breadcrumb() {
  if ( is_front_page() ) {
    return;
  }

  echo '<nav class="breadcrumbs">';
  echo '<a href="' . esc_url( home_url('/') ) . '">ホーム</a>';

  if ( is_single() ) {
    $categories = get_the_category();
    if ( ! empty( $categories ) ) {
      $category = $categories[0];
      echo ' &gt; <a href="' . esc_url( get_category_link( $category->term_id ) ) . '">';
      echo esc_html( $category->name );
      echo '</a>';
    }
    echo ' &gt; <span>' . esc_html( get_the_title() ) . '</span>';
  }

  echo '</nav>';
}

このコードを子テーマのfunctions.phpに追加し、表示したいテンプレートファイルに以下を記述します。

PHP
<?php if ( function_exists('my_breadcrumb') ) my_breadcrumb(); ?>

これで、投稿ページに「ホーム > カテゴリー > 記事タイトル」という形式のパンくずリストを表示できます。

ただし、複数カテゴリーを設定している記事では、最初に取得されたカテゴリーが表示されます。表示ルールを明確にしたい場合は、メインカテゴリーを指定する仕組みを別途用意するとよいでしょう。

6-3. 固定ページ用のパンくずリストを作る

固定ページでは、親ページと子ページの関係をパンくずリストに反映させることが重要です。

たとえば、「サービス一覧」という親ページの下に「WordPress制作」という子ページがある場合、以下のように表示します。

ホーム > サービス一覧 > WordPress制作

固定ページに対応させるには、先ほどの関数にis_page()の条件を追加します。

PHP
if ( is_page() ) {
  global $post;

  if ( $post->post_parent ) {
    $ancestors = array_reverse( get_post_ancestors( $post->ID ) );

    foreach ( $ancestors as $ancestor ) {
      echo ' &gt; <a href="' . esc_url( get_permalink( $ancestor ) ) . '">';
      echo esc_html( get_the_title( $ancestor ) );
      echo '</a>';
    }
  }

  echo ' &gt; <span>' . esc_html( get_the_title() ) . '</span>';
}

このコードを追加することで、親ページがある固定ページでも階層を表示できます。

固定ページを多く使うコーポレートサイトでは、パンくずリストによってユーザーがページ構造を理解しやすくなります。特にサービスページ、会社情報、採用情報などを階層化している場合は有効です。

6-4. カテゴリーページ・タグページに対応させる

カテゴリーページやタグページにもパンくずリストを表示すると、アーカイブページの位置づけがわかりやすくなります。

カテゴリーページの場合は、以下のように表示できます。

PHP
if ( is_category() ) {
  echo ' &gt; <span>' . esc_html( single_cat_title('', false) ) . '</span>';
}

タグページの場合は、以下のように表示できます。

PHP
if ( is_tag() ) {
  echo ' &gt; <span>' . esc_html( single_tag_title('', false) ) . '</span>';
}

さらに、検索結果ページや404ページにも対応させる場合は、以下のような条件を追加できます。

PHP
if ( is_search() ) {
  echo ' &gt; <span>検索結果: ' . esc_html( get_search_query() ) . '</span>';
}

if ( is_404() ) {
  echo ' &gt; <span>ページが見つかりません</span>';
}

このように、WordPressの条件分岐タグを使うことで、ページの種類に応じたパンくずリストを作成できます。

6-5. CSSでデザインを整える

パンくずリストを設置したら、CSSで見た目を整えましょう。パンくずリストは補助的なナビゲーションなので、記事タイトルや本文より目立ちすぎないデザインにするのが基本です。

以下はシンプルなCSSの例です。

CSS
.breadcrumbs {
  font-size: 13px;
  color: #666;
  margin: 16px 0;
  line-height: 1.6;
}

.breadcrumbs a {
  color: #666;
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs span {
  color: #333;
}

スマートフォンでは、パンくずリストが横に長くなりすぎることがあります。その場合は、折り返しを許可したり、文字サイズを調整したりしましょう。

CSS
.breadcrumbs {
  word-break: break-word;
  overflow-wrap: anywhere;
}

デザインを整える際は、見やすさを優先することが大切です。装飾を強くしすぎると、メインコンテンツより目立ってしまうため注意しましょう。

6-6. 子テーマを使って安全に編集する

WordPressでパンくずリストを自作する場合は、必ず子テーマを使って編集することをおすすめします。

親テーマを直接編集すると、テーマのアップデート時に変更内容が消えてしまう可能性があります。せっかく追加したパンくずリストのコードも、更新によって上書きされることがあります。

子テーマを使えば、親テーマの機能を引き継ぎながら、独自のカスタマイズを安全に管理できます。

特にfunctions.phpやsingle.php、page.phpなどを編集する場合は、子テーマ側にファイルを用意して作業しましょう。また、編集前にはバックアップを取り、エラーが出た場合にすぐ復旧できる状態にしておくことが重要です。

7. パンくずリストの構造化データを設定する方法

パンくずリストをSEOに活かすには、見た目の表示だけでなく、構造化データを設定することも重要です。構造化データを設定すると、検索エンジンにパンくずリストの意味を正しく伝えやすくなります。

WordPressでは、プラグインを使えば構造化データを自動出力できる場合があります。自作する場合は、JSON-LD形式で記述する方法が一般的です。

7-1. 構造化データとは

構造化データとは、ページの内容を検索エンジンにわかりやすく伝えるための記述です。

通常のHTMLだけでもページ内容は伝えられますが、構造化データを使うことで「これはパンくずリストです」「これは記事タイトルです」「これは商品情報です」といった意味を明確にできます。

パンくずリストの場合は、BreadcrumbListという形式を使います。これにより、検索エンジンはページ階層をより正確に理解できます。

構造化データはユーザーの画面に直接表示されるものではなく、主に検索エンジン向けにページ内へ記述します。

7-2. BreadcrumbListを設定するメリット

BreadcrumbListを設定するメリットは、検索エンジンにパンくずリストの構造を明確に伝えられることです。

正しく設定されていれば、検索結果にパンくず形式の階層が表示される可能性があります。これにより、ユーザーは検索結果上でページの位置づけを理解しやすくなります。

また、サイト内の階層関係が明確になるため、検索エンジンがページ同士の関連性を把握しやすくなります。

ただし、BreadcrumbListを設定したからといって、検索順位が必ず上がるわけではありません。あくまで検索エンジンがページを理解しやすくするための補助的なSEO施策として考えましょう。

7-3. JSON-LDでパンくずリストを記述する方法

JSON-LDは、構造化データを記述する方法の一つです。パンくずリストの構造化データを自作する場合、以下のようなコードをページ内に出力します。

HTML
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "ホーム",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "WordPress",
      "item": "https://example.com/wordpress/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "WordPressパンくずリストの作り方",
      "item": "https://example.com/wordpress-breadcrumb/"
    }
  ]
}
</script>

実際に使う場合は、example.comの部分を自分のサイトURLに置き換えます。また、ページごとにカテゴリー名や記事タイトル、URLが変わるため、WordPressのテンプレートタグを使って動的に出力する必要があります。

初心者の場合、JSON-LDを手動で管理するのは難しいため、構造化データに対応したSEOプラグインを使う方が安全です。

7-4. プラグインで構造化データを自動出力する方法

Yoast SEOやRank MathなどのSEOプラグインでは、パンくずリストの構造化データを自動出力できる場合があります。

プラグインを使うメリットは、ページごとに手動でJSON-LDを作成しなくてよいことです。記事タイトル、カテゴリー、URLなどを自動で取得し、適切な形式で出力してくれます。

また、投稿ページだけでなく、固定ページやカテゴリーページにも対応しやすい点が便利です。

すでにSEOプラグインを導入している場合は、パンくずリストの設定画面で構造化データが出力されているか確認しましょう。複数のプラグインで同じ構造化データを出力すると重複する可能性があるため、使用するプラグインはできるだけ絞ることが大切です。

7-5. リッチリザルトテストでエラーを確認する方法

パンくずリストの構造化データを設定したら、リッチリザルトテストでエラーがないか確認しましょう。

確認方法は、対象ページのURLをテストツールに入力し、検出された構造化データを確認する流れです。BreadcrumbListが検出され、エラーが出ていなければ基本的には問題ありません。

エラーが出る場合は、URL、name、positionなどの項目に不備がある可能性があります。特にJSON-LDを自作している場合は、カンマの付け忘れやURLの間違いなどに注意が必要です。

構造化データは、設置して終わりではありません。テーマ変更やプラグイン変更を行ったあとにも、再度チェックすることをおすすめします。

8. WordPressパンくずリストの正しい設置場所

パンくずリストは、設置場所によって使いやすさが変わります。ユーザーが自然に現在地を確認できる位置に表示することが大切です。

一般的には、記事タイトルの上やヘッダー下に設置されることが多いです。

8-1. 記事タイトル上に設置する

WordPressブログで最も一般的なのは、記事タイトルの上にパンくずリストを設置する方法です。

記事タイトルの上に表示すると、ユーザーは本文を読む前にページの位置づけを確認できます。検索エンジンから直接記事に訪れたユーザーにも、どのカテゴリーの記事なのかが伝わりやすくなります。

たとえば、以下のような配置です。

ホーム > WordPress > SEO対策
WordPressパンくずリストの作り方

この位置であれば、パンくずリストが自然に目に入り、記事本文の邪魔にもなりにくいです。

8-2. ヘッダー下に設置する

ヘッダー下にパンくずリストを設置する方法もあります。

ヘッダーやグローバルナビのすぐ下に表示すれば、サイト全体で統一感のあるナビゲーションになります。投稿ページだけでなく、固定ページやカテゴリーページでも同じ位置に表示しやすい点がメリットです。

ただし、ヘッダー下に大きく表示しすぎると、ファーストビューが圧迫されることがあります。特にスマートフォンでは画面が狭いため、パンくずリストが長いと記事タイトルまでの距離が遠くなる場合があります。

ヘッダー下に設置する場合は、文字サイズや余白を控えめにし、コンテンツの邪魔にならないよう調整しましょう。

8-3. トップページには基本的に表示しない

パンくずリストは、トップページには基本的に表示しないのが一般的です。

トップページはサイトの最上位階層にあたるため、「ホーム」とだけ表示してもユーザーにとってあまり意味がありません。パンくずリストは、下層ページで現在地を示すために使うものです。

そのため、WordPressで自作する場合は、is_front_page()やis_home()を使ってトップページでは出力しないように設定します。

PHP
if ( is_front_page() || is_home() ) {
  return;
}

プラグインやテーマ機能を使う場合も、トップページでパンくずリストが表示されていないか確認しておきましょう。

8-4. スマホ表示でも見やすい位置に調整する

現在はスマートフォンからサイトを閲覧するユーザーが多いため、パンくずリストもスマホ表示を意識して設置する必要があります。

スマホでは横幅が狭いため、パンくずリストが長いと複数行に折り返されます。階層が深すぎる場合や記事タイトルが長い場合は、見づらくなることがあります。

対策として、文字サイズを小さめにする、余白を調整する、長いタイトルは省略する、横スクロールにならないようにする、といった方法があります。

ただし、スマホだからといってパンくずリストを完全に非表示にする必要はありません。ユーザーがサイト内を移動しやすくなる要素なので、見やすい形で表示するのがおすすめです。

9. SEOに強いパンくずリストを作るポイント

WordPressでパンくずリストを設置するだけでなく、SEOに強い形で運用することも大切です。パンくずリストはサイト構造と深く関係しているため、カテゴリー設計や内部リンクの考え方も重要になります。

ここでは、SEO効果を高めるために意識したいポイントを紹介します。

9-1. サイト階層をシンプルにする

SEOに強いパンくずリストを作るには、サイト階層をシンプルにすることが大切です。

階層が深すぎると、ユーザーにも検索エンジンにもサイト構造がわかりにくくなります。

たとえば、以下のようなパンくずリストは少し複雑です。

ホーム > ブログ > Web制作 > WordPress > SEO > 内部対策 > パンくずリスト

このように階層が多すぎると、ユーザーはどこに戻ればよいのか迷いやすくなります。

理想は、トップページから2〜3階層程度で主要なページに到達できる構造です。パンくずリストも、できるだけシンプルでわかりやすい形にしましょう。

9-2. カテゴリー名に重要キーワードを含める

パンくずリストにはカテゴリー名が表示されることが多いため、カテゴリー名の付け方も重要です。

たとえば、WordPressに関する記事を多く扱うサイトであれば、「ノウハウ」よりも「WordPress」のように具体的なカテゴリー名にした方が、ユーザーにも検索エンジンにも内容が伝わりやすくなります。

ただし、キーワードを詰め込みすぎるのは避けましょう。

「WordPress SEO プラグイン 設定 初心者」のように不自然なカテゴリー名にすると、ユーザーにとってわかりにくくなります。カテゴリー名は、検索キーワードを意識しながらも、自然で理解しやすい名前にすることが大切です。

9-3. カテゴリー構造を頻繁に変更しない

カテゴリー構造を頻繁に変更すると、パンくずリストの表示も変わります。これにより、ユーザーの混乱や内部リンク構造の変化が起こる可能性があります。

特に、記事数が多いサイトでは、カテゴリー変更によって多くの記事のパンくずリストが一斉に変わります。カテゴリーページのURLを変更している場合は、リダイレクト設定も必要になることがあります。

SEOを考えるなら、カテゴリー設計はサイト立ち上げ時や大幅リニューアル時にしっかり考えておくことが重要です。

あとから変更する場合は、検索流入が多いページへの影響を確認しながら慎重に進めましょう。

9-4. アンカーテキストをわかりやすくする

パンくずリストのリンク部分は、アンカーテキストとしても機能します。

アンカーテキストとは、リンクに使われる文字列のことです。パンくずリストでは、「ホーム」「WordPress」「SEO対策」などがアンカーテキストになります。

アンカーテキストは、リンク先の内容がわかりやすいものにしましょう。

たとえば、「カテゴリ1」「その他」「未分類」のような名前では、リンク先に何があるのか伝わりにくくなります。一方、「WordPress」「ブログ運営」「SEO対策」のように具体的な名前であれば、ユーザーも検索エンジンもリンク先の内容を理解しやすくなります。

9-5. 現在ページにはリンクを付けない

パンくずリストでは、現在表示しているページにはリンクを付けないのが一般的です。

たとえば、以下のようなパンくずリストがあるとします。

ホーム > WordPress > WordPressパンくずリストの作り方

この場合、「ホーム」と「WordPress」にはリンクを付けますが、最後の「WordPressパンくずリストの作り方」にはリンクを付けない方が自然です。

現在ページにリンクを付けても、同じページを再読み込みするだけで、ユーザーにとって大きな意味がありません。現在地を示すテキストとして表示し、他の階層だけリンクにするのがおすすめです。

9-6. 複数カテゴリーの記事の表示ルールを決める

WordPressでは、1つの記事に複数のカテゴリーを設定できます。しかし、パンくずリストに表示するカテゴリーは基本的に1つに絞ることが多いです。

複数カテゴリーを設定している場合、どのカテゴリーをパンくずリストに表示するか決めておかないと、記事ごとに表示がバラバラになる可能性があります。

たとえば、ある記事に「WordPress」と「SEO対策」の両方を設定している場合、パンくずリストを次のどちらにするか決める必要があります。

ホーム > WordPress > 記事タイトル
ホーム > SEO対策 > 記事タイトル

サイト全体でルールを統一することが大切です。メインカテゴリーを設定できるSEOプラグインを使う、親カテゴリーを優先する、最初に登録したカテゴリーを表示するなど、運用ルールを決めておきましょう。

10. パンくずリストが表示されないときの原因と対処法

WordPressでパンくずリストを設定したのに表示されない場合、テーマ設定、プラグイン設定、コードの設置場所、CSS、キャッシュなどが原因になっている可能性があります。

ここでは、よくある原因と対処法を解説します。

10-1. テーマ設定が無効になっている

テーマ機能でパンくずリストを表示する場合、テーマ設定が無効になっていると表示されません。

まず、WordPress管理画面からテーマ設定やカスタマイズ画面を開き、パンくずリストの表示が有効になっているか確認しましょう。

テーマによっては、投稿ページ、固定ページ、カテゴリーページごとに表示設定が分かれている場合があります。投稿ページでは表示されているのに固定ページでは表示されない場合は、ページごとの設定を確認してください。

設定を変更したあとは、ページを再読み込みして表示を確認します。キャッシュがある場合は、キャッシュ削除も行いましょう。

10-2. プラグイン設定が完了していない

プラグインを使っている場合、インストールして有効化しただけではパンくずリストが表示されないことがあります。

Breadcrumb NavXT、Yoast SEO、Rank Mathなどは、設定画面でパンくずリストを有効化する必要がある場合があります。また、テーマファイルに表示用コードを追加しないと画面に表示されないこともあります。

プラグインの設定画面で、パンくずリスト機能がオンになっているか、表示形式が正しく設定されているか確認しましょう。

さらに、テーマ側で出力コードが必要なプラグインの場合は、single.phpやheader.phpなどに正しくコードが追加されているか確認します。

10-3. 表示用コードの設置場所が間違っている

パンくずリストの表示用コードを追加している場合、設置場所が間違っていると意図したページに表示されません。

たとえば、投稿ページに表示したいのにpage.phpにコードを追加している場合、固定ページには表示されても投稿ページには表示されません。投稿ページにはsingle.php、固定ページにはpage.php、サイト全体のヘッダー下に表示したい場合はheader.phpやテンプレートパーツを確認します。

ブロックテーマを使用している場合は、従来のPHPテンプレートではなく、サイトエディターやテンプレートパーツで管理されていることもあります。

テーマ構造によって編集場所が異なるため、使用中テーマのテンプレート構成を確認することが大切です。

10-4. CSSで非表示になっている

HTML上ではパンくずリストが出力されているのに、画面に表示されない場合は、CSSで非表示になっている可能性があります。

よくある原因は、以下のようなCSSです。

CSS
.breadcrumbs {
  display: none;
}

また、文字色が背景色と同じになっている、position指定で画面外に移動している、z-indexの影響で他の要素に隠れている、といったケースもあります。

ブラウザの検証ツールを使って、パンくずリストのHTMLが存在するか確認しましょう。HTMLが存在するのに見えない場合は、CSSが原因である可能性が高いです。

10-5. キャッシュが残っている

設定を変更してもパンくずリストが表示されない場合、キャッシュが残っている可能性があります。

WordPressでは、キャッシュ系プラグイン、サーバーキャッシュ、ブラウザキャッシュ、CDNキャッシュなどが影響することがあります。

まず、キャッシュ系プラグインを使っている場合は、プラグインの管理画面からキャッシュを削除します。次に、サーバー側のキャッシュ機能がある場合は、サーバー管理画面から削除します。

ブラウザのキャッシュが影響している場合もあるため、シークレットウィンドウで確認したり、別のブラウザで表示を確認したりするとよいでしょう。

10-6. 構造化データにエラーが出ている

画面上のパンくずリストは表示されていても、構造化データにエラーがある場合があります。

この場合、ユーザーには問題なく見えていても、検索エンジンに正しく伝わっていない可能性があります。

リッチリザルトテストで対象ページを確認し、BreadcrumbListにエラーが出ていないかチェックしましょう。よくあるエラーとして、positionの番号が重複している、itemのURLが正しくない、nameが空になっている、といったものがあります。

SEOプラグインを複数使っている場合、構造化データが重複して出力されることもあります。必要に応じて、どのプラグインでパンくずリストの構造化データを出力するかを統一しましょう。

11. WordPressパンくずリスト設置時の注意点

WordPressにパンくずリストを設置する際は、ただ表示すればよいわけではありません。重複表示や階層の深さ、カテゴリーの関連性などに注意しないと、かえってユーザーにとって使いにくくなる場合があります。

ここでは、パンくずリスト設置時に気をつけたいポイントを解説します。

11-1. パンくずリストを重複表示させない

テーマ機能とプラグインを同時に使うと、パンくずリストが重複表示されることがあります。

たとえば、テーマ標準のパンくずリストがすでに表示されている状態で、Yoast SEOやRank Mathのパンくずリストも表示すると、同じようなナビゲーションが2つ並んでしまいます。

これはユーザーにとってわかりにくく、デザイン上も不自然です。また、構造化データが重複する原因になることもあります。

パンくずリストは、基本的に1ページに1つ表示されていれば十分です。テーマ機能を使うのか、プラグインを使うのか、自作するのかを決め、出力元を統一しましょう。

11-2. 階層を深くしすぎない

パンくずリストの階層が深すぎると、かえって見づらくなります。

特にスマートフォンでは、長いパンくずリストが複数行に折り返され、記事タイトルや本文が下に押し下げられてしまうことがあります。

サイト構造はできるだけシンプルにし、ユーザーが迷わない階層設計にしましょう。

目安としては、トップページから目的のページまで2〜3クリック程度でたどり着ける構造が理想です。カテゴリーやタグを増やしすぎると、パンくずリストも複雑になりやすいため注意が必要です。

11-3. 関連性の低いカテゴリーを設定しない

パンくずリストにはカテゴリー名が表示されることが多いため、記事と関係の薄いカテゴリーを設定すると、ユーザーに誤解を与える可能性があります。

たとえば、WordPressのパンくずリストに関する記事なのに、「雑記」や「日記」のようなカテゴリーが表示されていると、記事の専門性が伝わりにくくなります。

カテゴリーは、記事内容と関連性が高いものを選びましょう。SEOを意識する場合も、単にキーワードを入れるのではなく、記事内容に合った自然な分類にすることが大切です。

11-4. デザインを目立たせすぎない

パンくずリストは便利なナビゲーションですが、メインコンテンツではありません。そのため、デザインを目立たせすぎないようにしましょう。

大きすぎる文字、派手な背景色、強い装飾などを使うと、記事タイトルや本文より目立ってしまいます。

パンくずリストは、控えめで読みやすいデザインが適しています。文字サイズは本文より少し小さめにし、余白も適度に設定すると自然に見えます。

ユーザーが必要なときに確認できる程度の存在感にすることがポイントです。

11-5. プラグインの入れすぎに注意する

WordPressでは、プラグインを使えば簡単に機能を追加できます。しかし、パンくずリストのためだけに複数のプラグインを入れるのは避けましょう。

SEOプラグイン、パンくずリスト専用プラグイン、構造化データプラグインなどを同時に使うと、機能が重複することがあります。場合によっては、表示崩れや構造化データの重複、サイト速度への影響が出る可能性もあります。

すでにYoast SEOやRank Mathを使っている場合は、それらのパンくずリスト機能で対応できないか確認しましょう。テーマ機能で十分な場合は、追加プラグインを入れない選択も有効です。

12. WordPressパンくずリストに関するよくある質問

ここでは、WordPressのパンくずリストに関するよくある質問に回答します。設置するか迷っている方や、プラグインと自作のどちらがよいか悩んでいる方は参考にしてください。

12-1. パンくずリストは必ず設置すべき？

WordPressサイトでは、パンくずリストを設置することをおすすめします。

特に、記事数が多いブログ、カテゴリーページを重視しているサイト、固定ページが階層化されているサイトでは、パンくずリストの効果が大きくなります。

一方、1ページ完結型のランディングページや、階層構造がほとんどない小規模サイトでは、必須ではない場合もあります。

ただし、ユーザーの使いやすさやSEOの土台づくりを考えると、多くのWordPressサイトで設置しておいて損はありません。

12-2. パンくずリストを設置すると検索順位は上がる？

パンくずリストを設置しただけで、検索順位が必ず上がるわけではありません。

しかし、パンくずリストはユーザーが現在地を把握しやすくなり、内部リンク構造を整理し、検索エンジンがサイト構造を理解しやすくなる要素です。そのため、SEOに良い影響を与える可能性があります。

検索順位を上げるには、パンくずリストだけでなく、良質なコンテンツ、適切なキーワード設計、内部リンク、ページ表示速度、モバイル対応なども重要です。

パンくずリストは、SEO施策の一部として考えるとよいでしょう。

12-3. プラグインと自作ではどちらがおすすめ？

初心者にはプラグインがおすすめです。

プラグインを使えば、コードを書かずにパンくずリストを設定できる場合が多く、構造化データにも対応しやすいです。Breadcrumb NavXT、Yoast SEO、Rank Mathなどを使えば、比較的簡単に導入できます。

一方で、PHPやWordPressテーマの知識がある場合は、自作も選択肢になります。自作なら、HTML構造や表示条件を細かく調整できます。

ただし、保守性や安全性を考えると、初心者が無理に自作する必要はありません。まずはテーマ機能やプラグインで対応し、必要に応じてカスタマイズを検討するのがおすすめです。

12-4. 固定ページにもパンくずリストは必要？

固定ページにもパンくずリストを設置するのがおすすめです。

特に、親ページと子ページの階層がある場合は、パンくずリストによってページ構造がわかりやすくなります。

たとえば、以下のような固定ページ構造があるとします。

ホーム > サービス一覧 > WordPress制作
ホーム > 会社情報 > 代表メッセージ
ホーム > 採用情報 > 募集要項

このように表示されていれば、ユーザーは現在のページがどの情報に属しているのかを理解しやすくなります。

ただし、トップページや単独のランディングページなど、階層を示す必要がないページでは表示しなくても問題ありません。

12-5. パンくずリストを削除しても問題ない？

パンくずリストを削除しても、サイトがすぐに大きな問題を起こすわけではありません。

しかし、ユーザーの利便性や内部リンク構造、検索エンジンへのサイト構造の伝達という面では、削除するデメリットがあります。

特に、記事数が多いブログやカテゴリー構造が重要なサイトでは、パンくずリストを削除するとユーザーが関連ページへ移動しにくくなる可能性があります。

削除する場合は、グローバルナビ、関連記事、カテゴリーページへのリンクなど、他の導線が十分に整っているか確認しましょう。

基本的には、デザイン上どうしても不要な場合を除き、パンくずリストは残しておくことをおすすめします。

まとめ

WordPressのパンくずリストは、ユーザーが現在地を把握しやすくするための重要なナビゲーションです。さらに、内部リンク構造の整理や検索エンジンへのサイト構造の伝達にも役立つため、SEO対策の面でも設置する価値があります。

パンくずリストを作る方法には、テーマ機能を使う方法、プラグインを使う方法、PHPコードで自作する方法があります。初心者は、まず使用中テーマにパンくずリスト機能があるか確認し、なければBreadcrumb NavXT、Yoast SEO、Rank Mathなどのプラグインを使うのがおすすめです。

より細かくカスタマイズしたい場合は、自作コードで対応することもできます。ただし、functions.phpやテンプレートファイルを編集する際は、必ずバックアップを取り、子テーマを使って安全に作業しましょう。

また、SEO効果を高めるには、見た目のパンくずリストだけでなく、BreadcrumbListの構造化データも意識することが大切です。設定後はリッチリザルトテストでエラーがないか確認しましょう。

WordPressのパンくずリストは、サイトの使いやすさとSEOの両方を支える基本的な機能です。まだ設置していない場合は、テーマ機能やプラグインを活用して、早めに導入しておきましょう。