ウェブサイトを使っているとき、ページの上部に「トップ > サービス > 制作事例」といった表示を見かけたことはありませんか？これが「パンくずリスト（breadcrumb）」です。
現在見ているページがサイトのどの位置にあるかを示すナビゲーションのことで、ユーザーの使いやすさ（UX）とSEOの両方に大きく貢献します。名前の由来は、童話「ヘンゼルとグレーテル」でパンくずを落として帰り道を見つけたエピソードから来ています。
この記事では、パンくずリストの基本的な意味から具体的な設置方法、SEOへの効果まで、Web制作の発注者やマーケティング担当者の方にも分かりやすく解説します。
パンくずリストとはどんなものか
パンくずリストとは、ウェブページの上部に表示される「現在地を示す階層ナビゲーション」のことです。
一般的には次のような形式で表示されます。
トップ > カテゴリページ > サブカテゴリ > 現在のページ
たとえばショッピングサイトで「スニーカー」のページを見ているとき、
ホーム > シューズ > スニーカー
という表示があれば、ユーザーは自分がいまどこにいるかを瞬時に把握できます。
パンくずリストは見た目こそシンプルですが、サイトの構造を視覚的に伝えるとても重要な要素です。ユーザーが「上の階層に戻りたい」と思ったとき、パンくずリストをクリックするだけで簡単に移動できます。
パンくずリストが必要になる場面
パンくずリストは、すべてのサイトで必須というわけではありません。ただし、以下のような状況では特に効果を発揮します。
階層が深いサイト
ページ数が多く、階層が複数にわたるサイトでは、ユーザーが迷子になりやすくなります。ECサイトや大規模なコーポレートサイト、メディアサイトなどでは、パンくずリストがあることで「いまどこにいるか」が一目で分かります。
検索エンジンからの流入が多いサイト
検索エンジンから直接記事ページや商品ページへ流入したユーザーは、サイト全体の構造を知らない状態で来訪します。パンくずリストがあれば、そのユーザーも自然にサイト内を回遊してくれます。
コンテンツが複数カテゴリに分かれているサイト
商品ジャンルや記事カテゴリが多い場合、パンくずリストがあることでユーザーは「関連するほかのコンテンツ」にも気づきやすくなります。
逆に、1ページ完結型のランディングページや、ページ数が少ないシンプルなサイトには、必ずしも必要ではありません。
SEOへの効果：なぜGoogleも評価するのか
パンくずリストは、ユーザーのためだけでなく、検索エンジンにとっても有益なナビゲーション要素です。
サイト構造を検索エンジンに伝えられる
Googleのクローラー（ロボット）はサイトを巡回しながら構造を学習しています。パンくずリストがあると、各ページの位置関係や親子関係が分かりやすくなり、サイト全体のインデックス（登録）がスムーズになります。
内部リンクの強化につながる
パンくずリストはそれ自体が内部リンクの役割を持ちます。トップページやカテゴリページへのリンクが自然な形で各ページに設置されるため、リンクの評価が分散され、サイト全体のSEO強化につながります。
検索結果に階層が表示される
構造化データ（Schema.org）を使って適切にパンくずリストをマークアップすると、Google検索の結果画面にURLではなく階層表示が出るようになります。
通常のURL表示ではなく、
sinciate.co.jp › サービス › SEO対策
のような形で表示されるため、ユーザーの目に留まりやすくなり、クリック率（CTR）の向上も期待できます。
ユーザーの直帰率を下げる効果も
SEOの観点では、パンくずリストが間接的にバウンス率（直帰率）にも影響します。ユーザーが目的のページ以外にもアクセスしやすくなるため、サイト内の滞在時間や閲覧ページ数が増える傾向があります。Googleはユーザー行動のシグナルも参考にしているため、これはSEO評価の向上にも貢献します。
UX（ユーザー体験）への効果
SEO以上に重要なのが、ユーザー体験への貢献です。
「今どこにいるか」が一目で分かる
サイトのなかで自分がどこにいるかを把握できると、ユーザーは安心感を感じます。特に初めて訪れたサイトでは、構造が分からずに迷ってしまうことも多いですが、パンくずリストがあることでストレスが軽減されます。
上の階層への移動が楽になる
「このページを見たけど、ほかの商品も見たい」「関連記事を探したい」というときに、パンくずリストをクリックするだけで上の階層に戻れます。ブラウザの「戻る」ボタンを何度も押す手間が省けます。
スマートフォン利用でも効果的
スマートフォンでは画面が狭く、グローバルナビゲーション（ヘッダーメニュー）が見えにくいことがあります。パンくずリストはコンパクトにまとまっているため、スマホでも使いやすい補助ナビとして機能します。
パンくずリストの設置方法
パンくずリストの設置方法は、使用しているCMSや技術環境によって異なります。
WordPressの場合
WordPressで最もよく使われるのは、Yoast SEOやRank MathなどのSEOプラグインを使う方法です。これらのプラグインはパンくずリストの表示機能を内蔵しており、設定をオンにするだけで自動的に表示されます。
また、Breadcrumb NavXTのような専用プラグインを使う方法もあります。表示する階層や区切り文字（「>」や「/」など）をカスタマイズしやすいのが特徴です。
HTMLで直接記述する場合
シンプルなサイトであれば、HTMLとCSSで手書きすることもできます。
<nav aria-label="パンくずリスト">
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="/service/">サービス</a></li>
<li>SEO対策</li>
</ol>
</nav>
ol（順序付きリスト）を使って階層を表現し、CSSで見た目を整えます。
構造化データ（Schema.org）のマークアップ
検索結果に階層を表示させるには、構造化データの追加が必要です。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": "サービス",
"item": "https://example.com/service/"
},
{
"@type": "ListItem",
"position": 3,
"name": "SEO対策",
"item": "https://example.com/service/seo/"
}
]
}
</script>
WordPressのSEOプラグインを使っている場合は、この構造化データも自動で出力してくれるものが多いため、手動での記述は不要なことがほとんどです。
設置するときに気をつけたいポイント
パンくずリストを設置するだけでなく、正しく使うためのポイントも押さえておきましょう。
現在のページはリンクにしない
パンくずリストの末尾（現在表示しているページ）は、リンクにする必要はありません。クリックしても同じページに留まるだけなので、テキストのみ表示するのが一般的です。
トップページへのリンクを必ず含める
パンくずリストの先頭は「ホーム」や「トップ」としてトップページへのリンクを必ず含めます。これにより、ユーザーはどこからでもサイトのスタート地点に戻れます。
スタイルを整えて分かりやすくする
区切り文字（「>」や「/」）と各リンクのスタイルを整えることで、見た目の分かりやすさが増します。文字サイズは本文より少し小さめにして、ページのメインコンテンツより目立ちすぎないようにするのが一般的です。
モバイルでも確認する
スマートフォンで表示したときに横幅が足りず、テキストが折り返されて見にくくなることがあります。レスポンシブデザインに対応したスタイル設定を行い、モバイルでの見た目も必ずチェックしてください。
まとめ：パンくずリストはUXとSEOを同時に高める
パンくずリストは地味な存在に見えますが、ユーザー体験とSEOの両方を底上げしてくれる、コストパフォーマンスの高いナビゲーション要素です。
特に、ページ数が多いサイトや検索エンジンからの流入を重視しているサイトでは、パンくずリストの設置は必須と言っても過言ではありません。WordPressを使っている場合は、SEOプラグインを活用すれば比較的簡単に導入できます。
「なんとなくあるもの」ではなく、「意図を持って設計するナビゲーション」として捉えることで、サイト全体のクオリティが上がります。
関連用語
- 内部リンク：パンくずリストも内部リンクの一種です。サイト内の回遊性を高める重要な施策として合わせて理解しておきましょう。
- 構造化データ：パンくずリストをGoogleの検索結果に表示させるために必要なマークアップ形式です。
- SEO：検索エンジン最適化の総称。パンくずリストはSEOの基本施策のひとつです。
- UX（ユーザーエクスペリエンス）：ユーザーの使いやすさや体験の質を高めるための考え方。パンくずリストはUX改善の代表的な手法です。
- サイトマップ：サイト全体の構造を一覧で示すページ。パンくずリストと組み合わせることでサイトの回遊性をさらに高められます。