パンくずリストとは？ — サイト内の現在地を示すナビゲーション
パンくずリストの定義
パンくずリスト（英語：Breadcrumb Navigation）とは、Webサイト内でユーザーが現在閲覧しているページの位置を、サイトの階層構造に沿って表示するナビゲーション要素です。
ページの上部に以下のような形式で表示されます。
ホーム > カテゴリ名 > サブカテゴリ名 > 現在のページ
パンくずリストの名前の由来
「パンくずリスト」という名称は、グリム童話「ヘンゼルとグレーテル」に由来します。森で迷わないようにパンくずを落としながら歩いたエピソードから、「来た道をたどれる仕組み」という意味で名付けられました。英語では「Breadcrumb」と呼ばれ、Web業界の世界共通用語です。
パンくずリストの基本的な構成要素
|
構成要素 |
役割 |
例 |
|
ルート（起点） |
サイトのトップページ |
ホーム |
|
中間階層 |
カテゴリやサブカテゴリ |
SEO対策 > テクニカルSEO |
|
現在地 |
ユーザーが今いるページ |
canonicalタグの設定方法 |
|
区切り文字 |
階層の区切りを示す記号 |
> / / / → |
どのサイトにパンくずリストは必要か
|
サイトタイプ |
必要性 |
理由 |
|
ECサイト |
★★★★★ |
商品カテゴリの階層が深い |
|
メディアサイト |
★★★★★ |
記事カテゴリが多岐にわたる |
|
コーポレートサイト |
★★★☆☆ |
ページ数が多い場合に有効 |
|
LP（ランディングページ） |
★☆☆☆☆ |
単一ページのため不要な場合が多い |
|
ポートフォリオサイト |
★★☆☆☆ |
階層が浅い場合は優先度低 |
パンくずリストの3つの種類 — 位置型・属性型・パス型
パンくずリストには大きく3つの種類があります。
3種類の比較表
|
種類 |
表示内容 |
適したサイト |
実装の複雑さ |
使用割合 |
|
位置型（Location-based） |
サイトの階層構造に基づく位置 |
ほぼすべてのサイト |
低 |
約80% |
|
属性型（Attribute-based） |
ページの属性（カテゴリ・タグ等） |
ECサイト |
中 |
約15% |
|
パス型（Path-based） |
ユーザーの閲覧履歴 |
ほぼ使われない |
高 |
約5% |
位置型（Location-based）パンくずリスト
最も一般的なタイプです。サイトの階層構造をそのまま反映します。
ホーム > SEO対策 > テクニカルSEO > canonicalタグの設定方法
ユーザーがどのページから訪問しても、常に同じパンくずリストが表示されます。つまり、サイト構造を正確に伝える点で最も直感的であり、SEOにも最適です。
属性型（Attribute-based）パンくずリスト
ページの属性情報（カテゴリ、ブランド、サイズ等）に基づいて表示するタイプです。ECサイトで多く使われます。
ホーム > メンズ > アウター > ジャケット > Lサイズ
パス型（Path-based）パンくずリスト
ユーザーが実際にたどったページ履歴を表示するタイプです。なぜなら、ブラウザの「戻る」ボタンと同じ機能になるため、パンくずリストとしての価値が低いのです。現在ではほとんど使われていません。
パンくずリストのSEO効果 — クロール促進・UX向上・構造化データ
SEO効果の一覧
|
効果 |
説明 |
重要度 |
|
内部リンク構造の強化 |
上位階層ページにリンクジュースを送る |
★★★★★ |
|
クロールの促進 |
Googlebotがサイト構造を理解しやすくなる |
★★★★☆ |
|
UX（ユーザー体験）の向上 |
ナビゲーション改善で直帰率が低下 |
★★★★☆ |
|
リッチリザルトの表示 |
検索結果にパンくずリストが表示される |
★★★★☆ |
|
サイト構造の明確化 |
トピッククラスター構造をGoogleに伝える |
★★★☆☆ |
内部リンク構造の強化
パンくずリストは、全ページから上位階層ページへの内部リンクを自動生成します。たとえば、100本の記事がすべてパンくずリストで「SEO対策」カテゴリページにリンクしている場合、そのカテゴリページには100本の内部リンクが集まります。つまり、カテゴリページのSEO評価が大幅に向上するのです。
リッチリザルトとしての表示
構造化データを正しくマークアップすると、Google検索結果にパンくずリストが表示されます。
通常の検索結果：
https://example.com/seo/technical-seo/canonical
パンくずリスト付きの検索結果：
example.com > SEO対策 > テクニカルSEO
つまり、検索結果での視認性が向上し、CTR改善が期待できるのです。
UX向上と直帰率への影響
パンくずリストがあると、ユーザーは以下の行動を取りやすくなります。
・現在地の把握 — 「サイトのどこにいるか」がわかります
・上位階層への移動 — ワンクリックでカテゴリページに戻れます
・関連コンテンツの発見 — 同カテゴリの他記事を探しやすくなります
パンくずリストの正しい設置方法 — HTML実装とCSS
HTMLの基本実装
パンくずリストは<nav>要素と<ol>（順序付きリスト）で実装します。
<nav aria-label="パンくずリスト">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="/">ホーム</a>
</li>
<li class="breadcrumb-item">
<a href="/seo/">SEO対策</a>
</li>
<li class="breadcrumb-item">
<a href="/seo/technical/">テクニカルSEO</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
canonicalタグの設定方法
</li>
</ol>
</nav>
実装時のポイント
|
項目 |
推奨 |
理由 |
|
HTML要素 |
<nav> + <ol> |
セマンティックHTMLとして適切 |
|
aria-label |
aria-label="パンくずリスト" |
アクセシビリティ対応 |
|
現在地のリンク |
リンクなし（テキストのみ） |
自分自身へのリンクは不要 |
|
aria-current |
aria-current="page" |
スクリーンリーダーに現在地を伝える |
|
区切り文字 |
CSSの::before擬似要素で表示 |
HTMLに直接記号を入れない |
CSSの実装例
.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.active {
color: #333333;
}
WordPressでの設置方法
|
方法 |
難易度 |
推奨度 |
|
Yoast SEO（組み込みパンくずリスト機能） |
★☆☆☆☆ |
★★★★★ |
|
Breadcrumb NavXTプラグイン |
★★☆☆☆ |
★★★★☆ |
|
Rank Math（組み込み機能） |
★☆☆☆☆ |
★★★★☆ |
|
テーマの組み込み機能 |
★☆☆☆☆ |
★★★☆☆ |
|
自前で実装（functions.php） |
★★★★☆ |
★★☆☆☆ |
テクニカルSEOの実装スキルをより体系的に学びたい方は → 第4章 テクニカルSEO入門
パンくずリストの構造化データマークアップ — JSON-LDコード例
構造化データの重要性
パンくずリストの構造化データをマークアップすると、Google検索結果にリッチリザルトとして表示されます。Googleが推奨するフォーマットはJSON-LDです。
JSON-LDの実装例
<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": "テクニカルSEO",
"item": "https://example.com/seo/technical/"
},
{
"@type": "ListItem",
"position": 4,
"name": "canonicalタグの設定方法"
}
]
}
</script>
マークアップ形式の比較
|
形式 |
Googleの推奨度 |
実装の容易さ |
管理のしやすさ |
|
JSON-LD |
★★★★★（最も推奨） |
★★★★☆ |
★★★★★ |
|
Microdata |
★★★☆☆ |
★★★☆☆ |
★★★☆☆ |
|
RDFa |
★★☆☆☆ |
★★☆☆☆ |
★★☆☆☆ |
JSON-LDはHTMLの構造とは独立して<script>タグ内に記述できます。つまり、既存HTMLを変更せずに構造化データを追加できるのです。
Microdataでの実装例（参考）
<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="/seo/">
<span itemprop="name">SEO対策</span>
</a>
<meta itemprop="position" content="2" />
</li>
</ol>
</nav>
構造化データのテスト方法
|
ツール |
URL |
用途 |
|
Googleリッチリザルトテスト |
https://search.google.com/test/rich-results |
リッチリザルト表示可否の確認 |
|
Schema.orgバリデーター |
https://validator.schema.org/ |
構造化データの文法チェック |
|
Google Search Console |
「拡張」セクション |
サイト全体のエラー確認 |
パンくずリスト設計のベストプラクティス — チェックリストとモバイル対応
設計時のチェックリスト
|
チェック項目 |
推奨 |
NG例 |
|
起点はトップページか |
ホーム（トップ）を起点にする |
カテゴリを起点にする |
|
階層数は適切か |
2〜5階層が理想 |
7階層以上は深すぎる |
|
現在地を含んでいるか |
最後の要素に現在ページ名を表示 |
現在地が省略されている |
|
現在地はリンクか |
テキスト表示（リンクなし） |
自分自身へのリンクを設定 |
|
モバイル対応しているか |
省略表示やスクロール対応 |
デスクトップと同じ表示 |
|
区切り文字は適切か |
> › / → |
テキストが見づらい文字 |
モバイルでの表示対応
モバイル端末では画面幅が狭いため、パンくずリストの表示が崩れやすいです。
・中間階層の省略 — ホーム > … > 現在のページ のように省略します
・横スクロール対応 — overflow-x: auto でスクロール可能にします
・フォントサイズの調整 — デスクトップより小さめに設定します
複数のパンくずリストが必要なケース
1つのページが複数カテゴリに属する場合、複数のパンくずリストの設置も可能です。
ホーム > SEO対策 > テクニカルSEO > canonicalタグ
ホーム > Web制作 > HTML/CSS > metaタグ > canonicalタグ
Googleは複数のパンくずリストを認識し、最も適切なものを検索結果に表示します。
【実践事例】scale-basics.comでのパンくずリスト最適化
施策前の課題と実施内容
scale-basics.comでは、パンくずリストの改善を実施しました。
施策前の課題：
・パンくずリストが一部ページにしか設置されていませんでした
・構造化データのマークアップがありませんでした
・カテゴリ構造が不明確で、階層が統一されていませんでした
実施した施策：
|
施策 |
内容 |
対応工数 |
|
全ページへの設置 |
記事・カテゴリページすべてに設置 |
約3日 |
|
JSON-LDマークアップ追加 |
BreadcrumbList構造化データを全ページに実装 |
約2日 |
|
カテゴリ構造の整理 |
3階層に統一（ホーム > カテゴリ > 記事） |
約1週間 |
|
デザインの改善 |
視認性の高いデザインに変更 |
約1日 |
成果（3ヶ月後）：
|
指標 |
施策前 |
施策後 |
変化 |
|
リッチリザルト表示率 |
0% |
68% |
+68pt |
|
検索結果のCTR（平均） |
2.8% |
3.9% |
+39% |
|
直帰率 |
72% |
61% |
-11pt |
|
ページ/セッション |
1.8 |
2.4 |
+33% |
|
Googlebotのクロール頻度 |
1日約50回 |
1日約80回 |
+60% |
成功のポイント
1. 構造化データの実装が最も効果的だった — リッチリザルト表示によるCTR向上が顕著でした
2. カテゴリ構造の整理が前提 — パンくずリストの品質はサイト構造の品質に依存します
3. 全ページへの一括設置 — 一部ページだけでは効果が限定的です
パンくずリストに関するよくある質問
Q. パンくずリストはどこに設置すべき？
A. ページ上部（ヘッダー直下、メインコンテンツの直前）が最も一般的です。なぜなら、ユーザーがページを開いた直後に現在地を把握できるからです。
Q. パンくずリストの区切り文字は何が最適？
A. 最も一般的なのは「>」です。「›」「/」「→」も使用されます。サイト全体で統一することが重要です。
Q. ページ数が少ないサイトでも必要？
A. 10ページ以下の小規模サイトでは必要性は低いです。ただし、構造化データによるリッチリザルト表示のメリットを考慮すると、設置して損はありません。
Q. パンくずリストに「ホーム」は含めるべき？
A. はい、含めることを推奨します。Googleの公式ドキュメントでもトップページを起点とする例が示されています。
Q. グローバルナビゲーションとは別物？
A. はい、別物です。グローバルナビゲーションはサイト全体の主要セクションへのリンクです。パンくずリストは現在ページの階層的な位置を示します。両方設置するのがベストプラクティスです。
まとめ — パンくずリストはUXとSEOを同時に向上させる基本施策
パンくずリストは、ユーザー体験の向上とSEO効果の両方を実現する基本的なナビゲーション要素です。
・パンくずリストは位置型・属性型・パス型の3種類があります。位置型が最も一般的です
・SEO効果として、内部リンク強化・クロール促進・リッチリザルト表示・UX向上が期待できます
・HTMLは<nav> + <ol>で実装し、アクセシビリティ属性も設定します
・構造化データはJSON-LD形式が最も推奨されます
・全ページに一貫したパンくずリストを設置し、サイト構造と整合させることが重要です
参考リンク：
・Google 検索セントラル — パンくずリスト（BreadcrumbList）構造化データ
・Schema.org — BreadcrumbList