パンくずリストとは？ 10分でわかりやすく解説

UnsplashのUrban Gyllströmが撮影した写真

パンくずリストは、Webサイト上でユーザーの現在位置と上位階層への経路を示すナビゲーションです。ページ数が多いサイト、カテゴリ階層が深いECサイト、記事や製品ページを多く持つメディアでは、上位カテゴリへ戻る動線を明示し、サイト構造を検索エンジンに伝える補助にもなります。一方、1ページ完結型や階層の浅いサイトでは、設置しても効果は限定的です。

導入判断では、ユーザーの移動支援とSEO上の表示・構造理解を分けて評価します。2025年1月以降、Googleのモバイル検索結果ではURL表示がドメイン中心に簡略化されていますが、デスクトップ検索結果と構造化データのサポートは継続しています。検索結果の見た目だけでなく、サイト内の回遊、内部リンク、情報設計を含めて設計することが前提になります。

パンくずリストとは何か

パンくずリストの定義

パンくずリストとは、ホーム、カテゴリ、下位カテゴリ、現在のページといった階層を順に並べ、ユーザーが自分の位置を把握できるようにするナビゲーション要素です。一般にはページ上部、ヘッダー直下、記事タイトル付近などに配置されます。

表示例は「ホーム > コラム > SEO > パンくずリスト」のような形です。現在のページに到達するまでの階層が見えるため、ユーザーはブラウザの戻るボタンに頼らず、上位カテゴリや関連する一覧ページへ移動できます。

名前の由来

「パンくずリスト」という名称は、グリム童話『ヘンゼルとグレーテル』で、主人公たちが森で道をたどるためにパンくずを残した話に由来します。Webサイトでは、物理的な道ではなく、ページ階層と移動経路を示す目印として使われています。

主な種類

パンくずリストには、設計の考え方によって複数の種類があります。多くの企業サイトやメディアサイトでは、サイト構造を反映する階層型が基本になります。

導入判断の目安

パンくずリストのメリット

ユーザーが現在位置を把握しやすくなる

パンくずリストを設置すると、ユーザーは現在のページがサイト全体のどこにあるかを確認できます。特に、検索エンジンや外部リンクから下層ページへ直接流入した場合、トップページから順にたどっていないため、現在位置を示す情報が役立ちます。

この効果は、ユーザーエクスペリエンスの改善にもつながります。上位階層や関連カテゴリに移動しやすくなることで、ユーザーは別の商品、関連記事、関連サービスを探しやすくなります。

ユーザビリティとアクセシビリティを補強できる

パンくずリストは、ユーザビリティを高めるナビゲーションです。ページの階層と移動先が明示されるため、ユーザーは余計な探索を減らし、目的の情報へ移動しやすくなります。

アクセシビリティの観点では、<nav>要素にaria-labelを付け、現在ページにaria-current="page"を付与することで、スクリーンリーダーなどの支援技術にもナビゲーションの意味が伝わりやすくなります。

内部リンクとサイト構造を整理しやすい

パンくずリストは、下層ページから上位階層へ戻る内部リンクとしても機能します。すべての下層ページで同じルールに基づいて表示すれば、カテゴリページや上位一覧へのリンクが安定し、サイト構造の把握もしやすくなります。

ただし、内部リンク目的だけでパンくずリストを増やすと、情報設計と合わないリンクが生まれます。カテゴリ名、URL、ページタイトル、グローバルナビゲーションの分類をそろえたうえで、パンくずリストを生成する設計が適しています。

検索結果での表示補助になる場合がある

Googleは、パンくずリストの構造化データとしてBreadcrumbListをサポートしています。適切に実装すれば、デスクトップ検索結果でページ階層が表示される場合があります。

ただし、Googleは2025年1月23日に、モバイル検索結果ではパンくず表示をやめ、URL表示をドメイン中心に簡略化すると公表しています。したがって、パンくずリストを「検索結果で目立たせるためだけのSEO施策」と捉えるのは不正確です。サイト内のナビゲーション、構造化データ、内部リンクを整える施策として扱う方が妥当です。

パンくずリストの実装方法

HTMLの基本構造

HTMLでは、パンくずリスト全体を<nav>で囲み、階層を<ol>と<li>で表現します。現在ページはリンクにしないか、リンクにする場合でもaria-current="page"で現在位置を明示します。

<nav aria-label="パンくずリスト">
  <ol>
    <li><a href="/">ホーム</a></li>
    <li><a href="/column/">コラム</a></li>
    <li><a href="/column/seo/">SEO</a></li>
    <li aria-current="page">パンくずリストとは</li>
  </ol>
</nav>

区切り記号の「>」やスラッシュは、HTMLのテキストとして各項目に混ぜるより、CSSの擬似要素で表示する設計が管理しやすくなります。読み上げ時に不要な記号が混ざりにくく、見た目の変更もCSS側で調整できます。

CSSでの表示調整

CSSでは、横並び、折り返し、区切り記号、現在ページの見た目を調整します。モバイル表示では、横幅が足りない場合に折り返す、先頭側を省略する、スクロール表示にするなど、サイトのデザインに合わせて決めます。

.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  padding: 0;
  margin: 0;
}

.breadcrumb li:not(:last-child)::after {
  content: ">";
  margin-left: 0.4em;
}

.breadcrumb [aria-current="page"] {
  font-weight: 700;
}

スマートフォンで完全に非表示にすると、検索やSNSから下層ページへ直接来たユーザーが現在位置を把握しにくくなります。表示領域が狭い場合でも、主要な上位階層だけを残す、省略記号を使う、横スクロールにするなど、位置情報を残す設計を検討します。

構造化データを追加する

検索エンジンへ階層を伝える場合は、schema.orgのBreadcrumbListを使います。Googleのドキュメントでは、itemListElementを必須プロパティとして示しています。

<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/column/"
    }
  ]
}
</script>

構造化データは、画面に表示されるパンくずリストと矛盾しない内容にします。表示上はカテゴリが「SEO」なのに、構造化データでは「マーケティング」とするような不一致があると、ユーザーにも検索エンジンにもページの位置づけが伝わりにくくなります。

CMSやJavaScriptで自動生成する

ページ数が多いサイトでは、手作業でパンくずリストを管理すると更新漏れが起きやすくなります。CMSのカテゴリ情報、テンプレート、プラグイン、フレームワークのルーティング情報を使うと、更新漏れを抑えながら自動生成できます。

JavaScriptだけで生成する場合は、検索エンジンや支援技術が内容を取得できるかを確認します。可能であれば、サーバーサイドレンダリングや静的生成でHTMLに出力し、表示後の補助的な処理としてJavaScriptを使う構成が安定します。

設計時の注意点

サイト構造と一致させる

パンくずリストの階層は、サイトの情報構造と一致している必要があります。部署別、製品別、用途別など複数の分類軸がある場合は、どの軸をパンくずリストに採用するかを先に決めます。

同じページに複数の親カテゴリを持たせると、パンくずリストの表示がページによって揺れます。ECサイトのように複数カテゴリ所属が避けられない場合でも、正規の親カテゴリや優先カテゴリを決めておくと、ユーザーに一貫した位置情報を示せます。

現在ページの扱いを統一する

現在ページは、リンクにしない表示がよく使われます。リンクにする場合でも、現在ページであることが分かるようにaria-current="page"を設定します。サイト内で「現在ページをリンクにするページ」と「リンクにしないページ」が混在すると、操作の予測可能性が下がります。

区切り記号とラベルを読みやすくする

区切り記号は「>」「/」「›」などが使われます。どれを採用する場合でも、サイト内で統一します。カテゴリ名は短く、ページの位置づけが分かる表記にします。長すぎるタイトルをそのまま入れると、モバイル表示で折り返しが増え、現在位置を把握しにくくなります。

グローバルナビゲーションやサイトマップと矛盾させない

パンくずリストは単独の部品ではなく、グローバルナビゲーション、サイドナビゲーション、サイトマップ、URL設計と連動する要素です。たとえば、グローバルナビゲーションでは「製品」と分類しているページを、パンくずリストでは「コラム」配下に置くと、ユーザーはページの位置づけを判断しにくくなります。

レスポンシブデザインでは、PCとモバイルで表示量が変わります。表示を短縮する場合でも、階層順、リンク先、現在ページの扱いは変えないようにします。

よくある失敗と改善策

カテゴリ設計が曖昧なまま表示している

カテゴリ設計が曖昧なままパンくずリストを設置すると、ページごとに階層が変わり、ユーザーが現在位置を把握しにくくなります。改善するには、カテゴリの親子関係、URL、一覧ページ、テンプレートの対応を先に整理します。

すべての階層を機械的に表示している

URLのディレクトリをそのまま表示すると、ユーザーに意味のない階層まで出る場合があります。たとえば、管理上のディレクトリ名や年月だけが表示されても、ユーザーの判断材料になりません。パンくずリストには、ユーザーが移動先として理解できる階層だけを表示します。

構造化データだけを実装している

検索エンジン向けのBreadcrumbListだけを入れ、画面上のパンくずリストを表示しない設計は、ユーザーの移動支援になりません。SEOを目的にする場合でも、画面上のナビゲーション、内部リンク、構造化データをそろえて扱う方が安全です。

リンク切れやリダイレクトが放置されている

パンくずリストのリンク先がリンク切れ、不要なリダイレクト、旧カテゴリのままになっていると、サイト内移動の信頼性が下がります。サイトリニューアル、カテゴリ統合、記事移管のタイミングでは、パンくずリストのリンクも確認対象に含めます。

まとめ

パンくずリストは、現在位置、上位階層、関連ページへの移動経路を示すナビゲーションです。階層が深いサイトやページ数が多いサイトでは、ユーザーの移動支援、内部リンクの整理、検索エンジンへの構造伝達に役立ちます。

ただし、設置するだけで成果が出る部品ではありません。カテゴリ設計、URL設計、グローバルナビゲーション、サイトマップ、構造化データと整合している場合に機能します。階層が浅いサイトや1ページ完結型のページでは、表示しても効果が限定されるため、ナビゲーション全体の設計から判断します。

導入時は、まずサイト構造を整理し、次に表示ルールとリンク先を決め、最後にHTMLと構造化データの実装を確認します。すでに設置済みのサイトでは、モバイル表示、リンク切れ、カテゴリ変更後の不整合、検索結果での扱いを定期的に確認してください。

一次資料・参考資料

• Google Search Central「Breadcrumb structured data」
• Google Search Central Blog「Simplifying the visible URL element on mobile search results」
• WAI-ARIA Authoring Practices Guide「Breadcrumb Pattern」