パンくずリストとは？SEO効果と作り方・設定方法

パンくずリストとは、Webサイト内で現在のページがどの階層にあるかを示すナビゲーションです。たとえば「ホーム ＞ SEO対策 ＞ パンくずリスト」のように表示され、訪問者がサイト内の現在地を把握したり、上位のカテゴリページへ戻ったりする際に役立ちます。

SEOの観点でも、パンくずリストは重要な設計要素の一つです。ただし、設置しただけで検索順位が上がるわけではなく、画面上のナビゲーションと検索エンジン向けの構造化データを区別して適切に設計する必要があります。

本記事では、パンくずリストの意味や種類、SEOへの影響から、HTML・WordPressでの設置方法、構造化データの書き方、公開後の確認方法まで具体例を交えて解説します。

この記事の監修者

WINDOM株式会社 代表取締役

青柳 純也 Junya Aoyagi（あおやぎ じゅんや）

青柳純也

「費用対効果に特化したWebマーケティング」を掲げ、決まったパッケージや特定の施策を当てはめるのではなく、企業の事業目標・課題・予算・社内体制に合わせて提案型の支援を実施。
YouTube：「WINDOMのWebマーケ実践術」
X： @aowd_marketing

パンくずリストとは？役割と表示例

パンくずリスト（breadcrumb navigation）は、Webサイトのトップページから閲覧中のページまでの位置関係を示すリンクの並びです。一般的にはページの上部、見出しやメインコンテンツの近くに設置されます。

たとえば、SEO関連の記事を閲覧している場合は、次のような形式です。

上記の「ホーム」「Webマーケティング」「SEO対策」をクリックできるようにすれば、訪問者はブラウザの戻るボタンに頼らず、上位階層へ移動できます。パンくずという名称は、道しるべとしてパンくずを落とす童話のエピソードに由来します。

パンくずリストとグローバルナビ・サイトマップの違い

パンくずリストは、サイト内の移動を支援するという点でグローバルナビゲーションやサイトマップと似ていますが、役割は異なります。

パンくずリストがあるからグローバルナビやXMLサイトマップが不要になるわけではありません。それぞれの目的に応じて併用することが基本です。

パンくずリストの3つの種類

代表的な形式は「階層型」「属性型」「履歴型」の3種類です。

• 階層型：ホーム ＞ サービス ＞ SEOコンサルティング。サイト内のカテゴリ・親子関係を表現します。
• 属性型：ホーム ＞ パソコン ＞ ノート型 ＞ 軽量モデル。ECサイトの分類属性や絞り込み条件を示す形式です。
• 履歴型：直前に閲覧したページをたどる形式。ユーザーごとに経路が変わります。

一般的な企業サイトやオウンドメディアでは、ページごとの階層が安定している階層型が採用しやすい形式です。ECサイトでは属性型に近い設計が有効な場合もありますが、絞り込み条件をそのまま検索エンジン向けの階層として扱うかどうかは別途検討しましょう。

パンくずリストを設置するメリットとSEOへの影響

パンくずリストには、訪問者の使いやすさ、内部リンク、検索エンジンへのサイト構造の伝達という3つの面でメリットがあります。一方、Googleは「パンくずリストを置くだけで検索順位が上がる」とは案内していません。直接的な順位保証と、サイト改善による間接的な効果は分けて考える必要があります。

ユーザーが現在地と上位階層を把握しやすくなる

検索結果から記事の途中に直接流入した訪問者は、その記事がサイト全体のどこに位置するのかを把握できないことがあります。パンくずリストがあれば、閲覧中の記事が「SEO対策」カテゴリに属していると一目でわかります。

上位のカテゴリへ戻れることで、関連する記事を探しやすくなる点もメリットです。ただし、直帰率や滞在時間が必ず改善するとは限らないため、導入後は実際のユーザー行動を確認しましょう。

カテゴリページへの内部リンクを設けられる

パンくずリストは、記事からカテゴリページや上位のまとめページへつながる内部リンクにもなります。記事ごとに関連する親カテゴリへのリンクを設ければ、訪問者と検索エンジンの双方がサイトの関連ページをたどりやすくなります。

ただし、内部リンクの本数を増やすためだけに不要な階層を追加したり、実態に合わないカテゴリへリンクさせたりするのは避けてください。まず優先すべきなのは、利用者にとって自然なサイト構造です。

検索エンジンにページの位置関係を伝えやすくなる

パンくずリストの構造化データ「BreadcrumbList」を適切に記述すると、Googleにページの階層的な位置関係を伝えられます。Googleはパソコン版の検索結果で、条件に応じてパンくずリスト情報をURL表示に利用する場合があります。

ただし、構造化データが正しくても検索結果への表示は保証されません。また、2025年1月以降、Googleのモバイル検索結果ではパンくずリストが表示されない仕様になっています。詳しくはGoogle検索セントラルの公式ガイドを参照してください。

パンくずリストの正しい設計方法

パンくずリストの実装前には、ページの分類と到達経路を整理することが重要です。コードだけ整えても、階層の選び方が不自然では訪問者にとって使いづらいナビゲーションになります。

ユーザーに自然な階層を優先して作る

たとえば、SEOの記事であれば「ホーム ＞ Webマーケティング ＞ SEO対策 ＞ 記事名」のように、上位へ進むごとに対象範囲が広がる形が理解しやすいでしょう。

なお、パンくずリストの階層はURLのディレクトリ構造と完全一致させる必要はありません。Googleも、URLを機械的に写すのではなく、ユーザーが一般的にたどる経路を表現することを推奨しています。URLが「/column/123/」であっても、記事の内容に基づき適切なカテゴリ経路を示せます。

各階層の名称とリンク先を統一する

各項目のテキストには、「カテゴリA」のような曖昧な表現ではなく、移動先がわかる名称を使いましょう。リンク先は公開されている適切なURLを指定し、404エラーや不要なリダイレクトが生じていないかを確認します。

同じカテゴリを記事ごとに「SEO」「SEO対策」「検索対策」と異なる呼び名で表示すると、サイト内での分類が伝わりにくくなります。コンテンツ管理時のカテゴリ名と表示ラベルに運用ルールを設けるとよいでしょう。

複数カテゴリに属するページの経路を決める

一つの記事が「SEO対策」と「Webサイト制作」の両方に関係する場合、パンくずリストの経路に迷うことがあります。その際は、記事の主題やユーザーが探す場面を踏まえて代表的な経路を決めます。

GoogleのBreadcrumbList仕様では、複数のパンくず経路を構造化データとして表現することもできます。ただし、関係の薄いカテゴリを無理に追加する必要はありません。まずはサイト全体で一貫した経路を設計してください。

パンくずリストの設置方法【HTML・WordPress】

設置方法は利用しているサイトの仕組みによって異なります。HTMLで管理しているサイトはコードを追加し、WordPressの場合はテーマやプラグインの既存機能を確認するところから始めます。

HTMLでパンくずリストを作成する

HTMLでは、ナビゲーション領域を表す<nav>と、順序付きリストを表す<ol>を使う方法がわかりやすい実装例です。以下は架空のドメインを使用したサンプルです。

<nav aria-label="パンくずリスト">
  <ol>
    <li><a href="https://example.com/">ホーム</a></li>
    <li><a href="https://example.com/seo/">SEO対策</a></li>
    <li aria-current="page">パンくずリストとは</li>
  </ol>
</nav>

この例では「ホーム」と「SEO対策」はリンクにし、現在閲覧中のページはリンクを設けずに表示しています。aria-labelやaria-current="page"は、支援技術にナビゲーションの意味を伝えるための属性です。

なお、上記は表示用のHTMLです。Google向けのBreadcrumbList構造化データを追加する場合は、後述のJSON-LDも別途設定してください。

CSSで見やすい表示に整える

HTMLのままでは縦方向の箇条書きになることがあるため、CSSで横並びにします。

/* クラスを付けたパンくずリストのみを装飾する例 */
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 0.9rem;
}
.breadcrumb-list li + li::before {
  content: "›";
  margin-right: 0.4em;
  color: #666;
}
.breadcrumb-list a {
  text-decoration: underline;
}

このCSSを利用する場合は、先ほどのHTMLの<ol>を<ol class="breadcrumb-list">に変更します。スマートフォンでは長い階層名が折り返されるため、実機での見え方も確認してください。文字サイズやリンクのタップ領域を極端に小さくしないことも大切です。

WordPressのテーマ機能・プラグインで設置する

WordPressの場合は、まず利用中のテーマにパンくずリスト表示機能があるか確認します。テーマによっては管理画面のカスタマイザーやテーマ設定から有効化できる場合があります。また、SEOプラグインにパンくず機能が用意されていることもあります。

1. テーマの設定画面でパンくずリスト機能の有無を確認する。
2. 既存のSEOプラグインがパンくずリストや構造化データを出力していないか確認する。
3. テーマ・プラグインの公式手順に従って表示を有効にする。
4. 記事ページ・カテゴリページ・固定ページで階層が正しいか確認する。
5. ページのソースを見て、同じ表示やJSON-LDが意図せず重複していないか確認する。

具体的な設定場所やショートコードはテーマ・プラグインの種類とバージョンによって異なります。インターネット上の古いコードをそのまま追加せず、利用製品の公式マニュアルを優先しましょう。

パンくずリストの構造化データ（BreadcrumbList）の書き方

構造化データとは、ページの情報を検索エンジンに機械的に伝えるためのマークアップです。パンくずリストでは、BreadcrumbListとListItemを用いて、各階層の順番と名称、URLを記述します。

JSON-LDの基本コードと必須項目

Googleが推奨する形式の一つがJSON-LDです。以下のコードは、トップページ・SEO対策カテゴリ・記事ページの3階層を表した架空URLの例です。

<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": "SEO対策",
      "item": "https://example.com/seo/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "パンくずリストとは"
    }
  ]
}
</script>

実装時はexample.comを自社サイトの正しいURLに置き換えます。最終項目のitemはGoogleの仕様上、省略可能です。省略した場合、Googleはマークアップが置かれたページのURLを利用します。

Google公式のBreadcrumbList仕様では、サイトのトップ階層や現在のページを必ず含める必要はないとされています。一方、対象となるパンくず経路には2つ以上のListItemが必要です。

HTML表示と構造化データの内容を整合させる

構造化データだけを設定して、ユーザー向けのページではまったく別の階層を表示する運用は避けましょう。たとえば、画面上は「ホーム ＞ SEO対策 ＞ 記事名」なのに、JSON-LDでは「ホーム ＞ 採用情報 ＞ 記事名」となっていたら、情報が矛盾します。

確認するポイントは、階層の順序、表示名、実在するページURL、記事の分類です。特にWordPressでは、カテゴリ変更や記事移動後も古い構造化データが残っていないか確認してください。

パンくずリストが正しく設置できているか確認する方法

パンくずリストは「ページ上に見えている」だけでは設定完了とはいえません。見た目の表示、リンク先、構造化データ、Googleによる認識の4段階に分けて確認すると、原因を切り分けやすくなります。

ページ表示とリンク先を目視で確認する

最初にパソコンとスマートフォンの両方で対象ページを開きます。階層が正しく表示されているか、リンク先が意図したカテゴリになっているか、タップしやすいかを確認してください。

特に、同じ記事を複数カテゴリに登録しているサイトでは、パンくずリストのカテゴリが記事ごとに意図せず変化することがあります。公開済みの記事を複数ページ抽出して比較すると、テンプレート側の問題を見つけやすくなります。

リッチリザルトテストで構造化データを検証する

Googleのリッチリザルトテストに対象ページのURL、またはテストしたいコードを入力します。検出されたパンくずリストの項目数やエラーの有無を確認し、必要に応じて修正します。

テストで有効と判定されても、Google検索結果への表示は保証されません。また、テスト対象が公開ページの場合、実際に出力されているコードが最新かどうかも確認しましょう。

Search ConsoleのURL検査で公開後に確認する

公開後はGoogle Search ConsoleのURL検査ツールで対象ページを確認します。インデックス登録状況を確認し、必要に応じて公開URLをテストしてください。構造化データ関連のレポートが利用できる場合は、検出件数やエラーの推移も確認します。

修正が反映されるまでにはクロール・再処理が必要です。公開直後に検索結果の見た目が変わらなくても、すぐに実装ミスと判断せず、まずページ上のコードとGoogleの取得状況を切り分けましょう。

パンくずリストでよくある設定ミスと注意点

運用中によく見られるのは、階層やリンクの誤り、複数機能による重複出力、検索結果での表示仕様に関する誤解です。

現在地と階層・リンク先が一致していない

記事を別カテゴリへ移したのにパンくずリストが以前のカテゴリを指したままだったり、リンク先が削除済みのページになっていたりすると、使いやすさを損ないます。

カテゴリを再編する際は、記事のパンくずリストだけでなく、内部リンク、リダイレクト、canonicalの指定先なども併せて確認しましょう。なお、canonicalとパンくずリストは別の仕組みであり、常にURLを完全一致させなければならないという意味ではありません。

テーマとプラグインが重複して出力される

WordPressでは、テーマがパンくずリストを表示し、SEOプラグインも同じ機能を出力しているケースがあります。画面上に二重表示されていないか、同一ページに矛盾する構造化データが複数生成されていないかを確認してください。

ただし、Googleが認めている複数経路のBreadcrumbListと、設定ミスによる重複は別です。複数の経路が実際のコンテンツ分類を適切に表している場合まで、機械的にエラー扱いしないようにします。

モバイル検索結果に表示されると誤解している

Googleは2025年1月23日、モバイル検索結果におけるパンくずリスト表示を廃止する変更を発表しました。パソコン版の検索結果でのサポートは継続されています。

これはGoogleのモバイル検索結果に表示されるURL部分の仕様変更であり、自社サイト内のパンくずリストをスマートフォンで非表示にすべきという意味ではありません。サイト上のナビゲーションとしては、モバイルユーザーにもわかりやすく提供することが重要です。詳しくはGoogleの公式発表を参照してください。

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

まとめ｜パンくずリストは設計・設置・確認をセットで行う

パンくずリストを設置・更新する際は、次の項目を確認してください。

• ページの主題に合った階層・カテゴリが設定されている
• 各階層の名称が明確で、記事間で表記が統一されている
• 上位階層のリンクが正しい公開ページを指している
• HTMLのナビゲーションがPC・スマートフォンで利用できる
• 必要に応じてBreadcrumbListの構造化データを適切に設定している
• リッチリザルトテストとSearch Consoleで公開後の状態を確認している

なお、パンくずリストの追加だけを目的にカテゴリを増やすのではなく、既存のページ構成とユーザーの移動経路が自然につながっていることを優先してください。