パンくずリストとは？SEO効果と設置方法・構造化データ【2026年最新】

この記事でわかること

パンくずリストとは？ — サイト内の現在地を示すナビゲーション

パンくずリストの定義

パンくずリスト（英語：Breadcrumb Navigation）とは、Webサイト内でユーザーが現在閲覧しているページの位置を、サイトの階層構造に沿って表示するナビゲーション要素です。多くの場合、ページ上部に次のような形式で表示されます。

ホーム ＞ カテゴリ名 ＞ サブカテゴリ名 ＞ 現在のページ

「パンくずリスト」という名称は、グリム童話「ヘンゼルとグレーテル」で森に迷わないようパンくずを落としながら歩いたエピソードに由来します。英語の「Breadcrumb」がそのままWeb業界の共通用語になりました。「来た道をたどれる仕組み」というニュアンスが、階層構造をたどれるこのナビゲーションによく合っています。

パンくずリストの基本的な構成要素

構成要素	役割	例
ルート（起点）	サイトのトップページ	ホーム
中間階層	カテゴリやサブカテゴリ	SEO対策 ＞ テクニカルSEO
現在地	ユーザーが今いるページ	パンくずリストの設置方法
区切り文字	階層の区切りを示す記号	＞ ／ › ／ →

どのサイトにパンくずリストが必要か

階層が深く、ページ数が多いサイトほどパンくずの価値は高まります。一方、単一ページで完結するランディングページのように階層のないページでは、無理に設置する必要はありません。

サイトタイプ	必要性	理由
ECサイト	非常に高い	商品カテゴリの階層が深く、比較・回遊が多い
メディア・ブログ	非常に高い	記事カテゴリが多岐にわたり、関連記事への回遊を促せる
コーポレートサイト	中程度	ページ数が多い場合に現在地把握で有効
ポートフォリオサイト	やや低い	階層が浅ければ優先度は下がる
ランディングページ	低い	単一ページで階層がなく不要なことが多い

パンくずリストの3つの種類 — 位置型・属性型・パス型

パンくずリストは、何を基準に階層を示すかによって大きく3種類に分かれます。SEO実務で使うのはほぼ位置型で、ECの絞り込み画面などで属性型が併用される程度です。

種類	表示内容	適したサイト	実装の複雑さ
位置型（Location-based）	サイトの階層構造上の位置	ほぼすべてのサイト（標準）	低
属性型（Attribute-based）	ページの属性（カテゴリ・ブランド・サイズ等）	ECサイトの絞り込みページ	中
パス型（Path-based）	ユーザーがたどった閲覧履歴	ほぼ使われない	高

位置型（Location-based）

最も一般的なタイプで、サイトの階層構造をそのまま反映します。どのページから流入しても常に同じパンくずが表示されるため、サイト構造を正確に伝えられ、SEOにも最も適しています。

ホーム ＞ SEO対策 ＞ テクニカルSEO ＞ パンくずリストの設置方法

属性型（Attribute-based）

ページの属性情報（カテゴリ、ブランド、サイズ等）に基づいて表示するタイプです。ECサイトの絞り込み結果ページなどで使われます。

ホーム ＞ メンズ ＞ アウター ＞ ジャケット ＞ Lサイズ

パス型（Path-based）

ユーザーが実際にたどったページ履歴を表示するタイプです。ブラウザの「戻る」ボタンと機能が重複し、同じページでも人によって表示が変わるため、ナビゲーションとしての価値が低く、現在ではほとんど使われていません。

パンくずリストのSEO効果 — 内部リンク・クロール・リッチリザルト・UX

パンくずリストのSEO効果は、大きく「内部リンクの強化」「クロールの促進」「検索結果での見え方（リッチリザルト）」「UXの改善」の4つに整理できます。

効果	説明	重要度
内部リンク構造の強化	全ページから上位階層ページへ一貫したリンクが集まる	高
クロールの促進	Googlebotが階層構造をたどりやすくなる	中〜高
リッチリザルトの表示	検索結果にパンくず表示が出る場合がある	中〜高
UX（ユーザー体験）の向上	現在地の把握と上位階層への移動が容易になる	中〜高
サイト構造の明確化	トピッククラスター構造を検索エンジンに伝えやすい	中

内部リンク構造の強化

パンくずリストは、全ページから上位階層ページへの内部リンクを自動生成します。100本の記事がすべて「テクニカルSEO」カテゴリページへパンくずでリンクしていれば、そのカテゴリページには100本の内部リンクが集まり、サイト内での重要度がクローラーに伝わりやすくなります。アンカーテキストにカテゴリ名という文脈語が入る点も、テーマ性を伝えるうえで有利です。パンくずを起点にしたリンク階層の設計や、アンカーテキストの最適化といった踏み込んだ設計手法はSEO内部リンク戦略の設計と実装で詳しく扱っています。

クロールの促進

階層に沿った一貫したリンクがあることで、Googlebotはサイトの構造を把握しやすくなります。パンくずは、サイトマップと並んで「どのページがどの階層に属するか」をクローラーへ伝える補助線として機能します。両者は役割が重なる部分もあるため、XMLサイトマップの作成方法とあわせて整えると、クロールとインデックスの土台が安定します。

リッチリザルトとしての表示

BreadcrumbListの構造化データを正しくマークアップすると、Google検索結果のURL部分がパンくず表示に置き換わる場合があります。

通常の表示： https://example.com/technical-seo/breadcrumb/
パンくず表示： example.com ＞ テクニカルSEO ＞ パンくずリスト

階層が視覚的に示されることで、検索結果でのわかりやすさが増します。ただし、構造化データを実装したからといって必ずパンくず表示になるわけではなく、表示可否はGoogleの判断に委ねられます。なお構造化データがなくても、GoogleはURLの構造から推測してパンくず表示を生成することがあります。より確実に、意図した階層で表示させるために構造化データを用意する、と理解しておくとよいでしょう。

UX向上と回遊性

パンくずがあると、ユーザーは次の行動を取りやすくなります。

• 現在地の把握 — サイトのどこにいるかがひと目でわかります
• 上位階層への移動 — ワンクリックでカテゴリページへ戻れます
• 関連コンテンツの発見 — 同カテゴリの他記事を探しやすくなります

ナビゲーションが改善すれば、直帰や離脱を減らし回遊を促す方向に働きます。数字での効果は環境によって変わるため断定はできませんが、「迷わせない導線」を用意すること自体がユーザー体験の底上げになります。

パンくずリストの正しい設置方法 — HTML実装とアクセシビリティ

HTMLの基本実装

パンくずリストは、ナビゲーションであることを示すnav要素と、順序のある階層を表すol（順序付きリスト）で実装するのがセマンティックに適切です。現在地は自分自身へのリンクになるため、リンクにせずテキストで示します。

<nav aria-label="パンくずリスト">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">ホーム</a></li>
    <li class="breadcrumb-item"><a href="/technical-seo/">テクニカルSEO</a></li>
    <li class="breadcrumb-item" aria-current="page">パンくずリストの設置方法</li>
  </ol>
</nav>

ポイントは、区切り文字（＞など）をHTMLに直接書かず、後述するCSSの擬似要素で描画することです。区切り記号はあくまで装飾であり、スクリーンリーダーに読み上げさせる必要がないためです。

項目	推奨	理由
HTML要素	nav ＋ ol	順序のある階層ナビとしてセマンティックに適切
ナビの識別	aria-label="パンくずリスト"	複数のnavを区別し、支援技術に役割を伝える
現在地	リンクなし（テキストのみ）	自分自身へのリンクは不要
現在地の明示	aria-current="page"	スクリーンリーダーに現在地であることを伝える
区切り文字	CSSの::before擬似要素	装飾はHTMLに入れず読み上げ対象から外す

CSSの実装例

区切り文字は、2つ目以降の項目の直前に擬似要素で挿入します。横幅が足りないときに折り返せるようflex-wrapを指定しておくと、レイアウト崩れを防げます。

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0.75rem 0;
  margin: 0;
  list-style: none;
  font-size: 0.875rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  padding: 0 0.5rem;
  color: #6c757d;
}
.breadcrumb-item a {
  color: #0066cc;
  text-decoration: none;
}
.breadcrumb-item a:hover {
  text-decoration: underline;
}
.breadcrumb-item[aria-current="page"] {
  color: #333;
}

WordPressでの設置方法

WordPressでは、多くの場合プラグインやテーマの機能でパンくずを出力できます。JSON-LDのBreadcrumbListも同時に出力されるものを選ぶと、HTMLと構造化データの二度手間を避けられます。

方法	難易度	向いているケース
Yoast SEO（組み込み機能）	低	プラグインで手早く、構造化データ込みで出したい
Rank Math（組み込み機能）	低	同上。設定画面でパンくずを管理したい
Breadcrumb NavXT	中	表示や区切りを細かくカスタマイズしたい
テーマの組み込み機能	低	テーマ標準で出力できる場合
自前実装（functions.php）	高	出力を完全に制御したい・軽量に保ちたい

BreadcrumbList構造化データの実装 — JSON-LDコード例

なぜBreadcrumbListを実装するのか

パンくずのリッチリザルト表示や、検索エンジンへの階層伝達を確実にするために使うのがBreadcrumbListスキーマです。GoogleはJSON-LD形式を推奨しています。JSON-LDは既存HTMLとは独立してscriptタグ内に記述できるため、本文のマークアップを変えずに構造化データだけを追加・修正できます。JSON-LDが推奨される理由やMicrodata・RDFaとの比較といった構造化データの前提は構造化データマークアップ完全ガイドで詳しく扱っています。

JSON-LDの実装例

各項目はListItemで表し、positionで並び順、nameで表示名、itemでリンク先URLを指定します。最後の項目（現在地）は自分自身なので、itemを省略できます。

<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/technical-seo/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "パンくずリストの設置方法"
    }
  ]
}
</script>

実装時に外しやすいポイントを押さえておきましょう。

• 画面のパンくずと一致させる — 構造化データの階層は、ページに実際に表示されているパンくずと同じ順序・同じ名称にします。表示と食い違うと、リッチリザルトの対象から外れることがあります。
• itemには正規化済みの絶対URLを指定する — itemはhttps://から始まる絶対URLで、canonicalと同じ正規URLを指定します。URL正規化の考え方はcanonicalタグの設定ガイドを参照してください。
• positionは1から連番 — 起点（ホーム）を1とし、飛びや重複がないようにします。

JSON-LDはHTMLの上部に置く

Googleは2026年3月の公式解説で、Googlebotが取得するHTMLにはサイズ上限（HTMLは2MB）があり、上限を超えた部分は処理されないと説明しました。あわせて、title・meta・canonical・構造化データといった重要な要素はHTMLの早い位置に置くことを推奨しています。詳細はGooglebotが処理する「2MBの壁」の解説にまとめています。BreadcrumbListのJSON-LDも、本文より後ろに埋もれないようhead付近や本文冒頭で出力しておくのが安全です。

Microdataでの実装例（参考）

既存HTMLに直接マークアップするMicrodataでも実装できますが、HTMLとデータが密結合になり保守が重くなるため、特別な理由がなければJSON-LDを選びます。

<nav aria-label="パンくずリスト">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/"><span itemprop="name">ホーム</span></a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/technical-seo/"><span itemprop="name">テクニカルSEO</span></a>
      <meta itemprop="position" content="2" />
    </li>
  </ol>
</nav>

検証と、公開後のエラー監視

マークアップしたら、公開前後で必ず検証します。文法とリッチリザルト対象の確認には次のツールを使います。

ツール	URL	用途
Googleリッチリザルトテスト	search.google.com/test/rich-results	リッチリザルト表示可否の確認
Schema Markup Validator	validator.schema.org	構造化データの文法チェック
Google Search Console	「拡張」＞パンくずリスト	サイト全体のエラー・警告の継続監視

公開後は、Search Consoleの「拡張（パンくずリスト）」レポートでエラーの有無を継続的に確認します。テンプレート起因のエラーを修正したときは、問題タイプ全体を直したうえで「Validate Fix（修正を検証）」で再クロールを促せます。ただしこのボタンは問題タイプ全体の修正が前提で、1URLだけの対応にはURL検査ツールが適切です。使い分けの詳細はGSCのValidate Fixを使うべき場面の解説を参照してください。

パンくずリスト設計のベストプラクティス — チェックリストとモバイル対応

設計時のチェックリスト

チェック項目	推奨	NG例
起点はトップページか	ホーム（トップ）を起点にする	カテゴリを起点にする
階層数は適切か	おおむね2〜5階層に収める	7階層以上で深すぎる
現在地を含んでいるか	最後の要素に現在ページ名を表示	現在地が省略されている
現在地はリンクか	テキスト表示（リンクなし）	自分自身へのリンクを設定
表示と構造化データは一致するか	画面とJSON-LDで同じ階層・名称	表示と構造化データが食い違う
モバイル対応しているか	折り返し・省略・横スクロールで対応	デスクトップと同じ幅で崩れる

モバイルでの表示対応

モバイルは画面幅が狭く、階層が深いとパンくずが崩れがちです。次のいずれかで整えます。

• 折り返し表示 — flex-wrap: wrapで2行以上に折り返す（最もシンプル）
• 横スクロール — overflow-x: autoで1行のままスクロール可能にする
• 中間階層の省略 — 「ホーム ＞ … ＞ 現在のページ」のように中間をまとめる

省略表示にする場合でも、構造化データ（JSON-LD）には省略前の完全な階層を記述しておくと、検索エンジンには正しい階層が伝わります。

1ページが複数カテゴリに属する場合

1つのページが複数のカテゴリに属するときは、複数のパンくずを設置することもできます。BreadcrumbListも複数記述でき、Googleは最も適切なものを選んで検索結果に反映します。ただし運用が複雑になりやすいため、まずは主要な1系統に絞り、必要に応じて追加するのが現実的です。

当サイトの実装 — 全ページで自動出力する設計

scale-basics.comでは、テーマ側でパンくずリストとBreadcrumbListのJSON-LDを全ページに自動出力しています。記事ごとに手作業でマークアップするのではなく、「ホーム ＞ カテゴリ ＞ 記事」という3階層をテンプレートで統一して生成する設計です。この方針にしている理由は、パンくずの品質はサイト構造の一貫性に左右されるためで、個別対応に頼るとページごとに階層や名称がぶれ、構造化データのエラーも発生しやすくなります。

また当サイトは2026年7月にNext.js（SSG）で作った教材サイトからWordPressメディアへ移行しましたが、その際も/blog/xxx/から/xxx/への301リダイレクトで評価を引き継ぎ、パンくずの階層も新URL体系に合わせて再定義しました。構造化データの自動生成やコーディング面での実測データ（TTFBの計測値など）はSEOに強いコーディングの実装ガイドにまとめています。全ページ一貫の自動出力にしておくと、Search Consoleの「拡張」レポートでの監視も一括で回せるため、テンプレート単位でエラーを潰せるのが運用上の利点です。

AI検索時代のパンくずの位置づけ

AI OverviewsやAI Modeといった生成AI検索が広がるなかでも、パンくずのような構造化データの役割は変わりません。Googleは2026年5月に公開した生成AI最適化の公式ガイドで、生成AI機能は既存の検索ランキング・品質システムに根ざしており、特別な最適化は不要で、従来のSEOの基本が土台になり続けると明言しています（Googleの生成AI検索最適化ガイドの解説）。パンくずとBreadcrumbListでサイトの階層と各ページの位置づけを正確に伝えることは、その「従来からの基本」の一つとして引き続き有効です。

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

Q. パンくずリストはどこに設置すべき？

ページ上部（ヘッダー直下、メインコンテンツの直前）が最も一般的です。ユーザーがページを開いた直後に現在地を把握でき、支援技術でも早い段階でナビゲーションを認識できます。

Q. 区切り文字は何が最適？

「＞」が最も一般的で、「›」「／」「→」も使われます。どれを選んでもよいので、サイト全体で統一することが大切です。区切り記号はCSSの擬似要素で描画し、HTMLには入れないようにします。

Q. ページ数が少ないサイトでも必要？

10ページ以下の小規模サイトでは必要性は下がります。ただしBreadcrumbListによる検索結果での見え方のメリットを考えると、設置して損はありません。

Q. パンくずに「ホーム」は含めるべき？

含めることを推奨します。Googleの公式ドキュメントでもトップページを起点とする例が示されています。起点を統一しておくと、構造化データの階層も一貫させやすくなります。

Q. グローバルナビゲーションとは別物？

別物です。グローバルナビゲーションはサイト全体の主要セクションへのリンク、パンくずは現在ページの階層的な位置を示すものです。役割が異なるため、両方を設置するのがベストプラクティスです。

まとめ — パンくずリストはUXとSEOを同時に底上げする基本施策

パンくずリストは、ユーザー体験の向上とSEOの土台づくりを同時に進められる基本的なナビゲーション要素です。要点を整理します。

• 種類は位置型・属性型・パス型の3つ。SEO実務で使うのはほぼ位置型です
• SEO効果は、内部リンクの強化・クロール促進・リッチリザルト表示・UX向上の4方向
• HTMLはnav＋olで実装し、aria-label・aria-currentでアクセシビリティも担保します
• 構造化データはBreadcrumbListのJSON-LDが推奨。画面表示と一致させ、itemは正規化済み絶対URLで指定します
• 公開後はSearch Consoleの「拡張」レポートでエラーを監視し、テンプレート単位で品質を保ちます

パンくず単体で順位が大きく動く施策ではありませんが、サイト構造を正確に伝える基盤として、全ページに一貫して設置する価値があります。

本記事は、Googleの公式ドキュメント（パンくずリスト構造化データ）およびSchema.orgのBreadcrumbList仕様を一次情報として参照し、scale-basics.comでの全ページ自動出力（パンくず＋BreadcrumbList）およびNext.jsからWordPressへの移行運用の実体験に基づいて執筆しています。効果の数値は環境により変動するため、断定的な数値表現は用いていません。

無料ダウンロード資料

はじめてのSEO 完全ガイド

Web担当になった人が、90日で自走するための実務書

検索エンジンの仕組みから、キーワード選定・記事づくり・技術対応・効果測定、 そしてAI検索時代の打ち手まで。専門用語の知識ゼロの状態から読み始められるよう、用語はすべて本文中で説明しています。

体裁	PDF／A4縦・全109ページ
収録	図解21点、チェックリスト120項目、90日実行プラン、用語集56語

※フォーム送信後、ご入力のメールアドレス宛にダウンロードリンクをお送りいたします。

資料の詳細と目次を見る

こちらのフォームにご記入ください

入力は1分ほどで終わります。

Website

会社名必須

部署名任意

お名前必須

メールアドレス必須

電話番号必須

従業員規模必須 選択してください 1〜9名 10〜49名 50〜99名 100〜299名 300〜999名 1,000名以上

SEOの検討状況必須 選択してください 何から始めるべきか検討中 自社で運用しているが成果が出ていない 外部への委託を検討している 現在の委託先を見直したい 情報収集のみ

プライバシーポリシーに同意する必須

資料をダウンロードする

ご入力いただいた情報は、資料のご送付および当社サービスのご案内のために利用します。