パンくずリストとは？ — サイト内の現在地を示すナビゲーション
パンくずリストの定義
パンくずリスト（英語：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への移行運用の実体験に基づいて執筆しています。効果の数値は環境により変動するため、断定的な数値表現は用いていません。
