← PC・IT用語集へ戻る

パンくずリスト

Breadcrumbs
web development beginner
Webサイト内でユーザーが現在どこの階層にいるかを階層順に示したリンクの一覧。
パンくずリスト (Breadcrumbs)

概要（サマリー）

パンくずリスト（Breadcrumbs）は、Webサイトを訪れたユーザーが「現在、サイト内のどの階層（ページ）にいるのか」を視覚的に示した、誘導用のテキストリンクパーツである。

通常、ページの上部に「ホーム ＞ ブログ ＞ 記事タイトル」のように、トップページから現在地までのルートが階層順に左から右へ並べて配置される。ユーザーの利便性を高めるだけでなく、検索エンジンにサイトの構造を伝える役割も持つ。

詳細解説

パンくずリストとは何か

パンくずリストは、大規模なWebサイトやブログ、ECサイトにおいて、ユーザーが迷子にならないようにするためのナビゲーション補助（ユーザーインターフェース）である。各階層がクリック可能なリンク（現在地を除く）になっており、ユーザーは1クリックで上の階層のページに簡単に戻ることができる。

名前の由来とユーザビリティ上の役割

このユニークな名前は、童話『ヘンゼルとグレーテル』に由来している。

主人公の兄妹が、森の中で迷子にならないように自分たちが歩いた道に「パンくず（Breadcrumbs）」を少しずつ落として目印にしたエピソードから、Webサイト内で「自分が辿ってきた道筋（または現在いる位置までの階層構造）」を指し示すナビゲーションの名称として使われるようになった。

SEO（検索エンジン最適化）におけるメリット

パンくずリストは、Googleなどの検索エンジン対策（SEO）においても非常に重要な役割を果たす。

  1. 内部リンクの提供：検索エンジンの巡回ロボット（クローラー）が上位階層へのリンクをたどりやすくなる。ただし、設置だけで検索順位が上がるとは限らない。
  2. 検索結果で使われる可能性：適切な構造化データを提供すると、Googleが検索結果のURL部分にパンくず情報を利用する可能性がある。表示は保証されない。

パンくずリストのHTMLマークアップ

ウェブアクセシビリティを考慮し、検索エンジンやスクリーンリーダー（音声読み上げソフト）に「これがパンくずリストである」と正しく伝えるための、セマンティックなHTMLマークアップの例を以下に示す。

<nav aria-label="パンくずリスト">
  <ol class="breadcrumbs-list">
    <li><a href="/">ホーム</a></li>
    <li><a href="/blog/">ブログ</a></li>
    <li aria-current="page">IT用語集の書き方</li>
  </ol>
</nav>

このコード例では、全体を<nav>タグで囲み、箇条書きリスト（<ol>、<li>）を使って構造化している。現在地を示す最後の項目には aria-current="page" 属性を付与し、リンク化しないことで、現在のページであることを明確に示している。

検索結果に反映させる「構造化データ（JSON-LD）」

Googleなどの検索エンジンへパンくずの階層を明示する方法として、「構造化データ（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/blog/"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "IT用語集の書き方"
  }]
}

構造化データはリッチリザルトテストなどで検証する。正しく記述しても検索結果への反映は保証されない。

AIコーディングとの関係

AIを使うとHTMLやJSON-LDの雛形を作りやすいが、URL、階層、構文が正しいとは限らないため検証が必要である。

特に、手動で書くと記述ミス（カンマの抜けなど）が起きやすいJSON-LD構造化データは、AIに「このURL構成用のパンくずリストのJSON-LDを書いて」と頼むのが最も簡単で安全な方法である。

また、WordPressなどのCMS（コンテンツ管理システム）において、現在表示しているカテゴリや親ページの設定をプログラムで読み込み、自動的にパンくずリストを生成するコード（PHPやJavaScript）を書かせる場合にも、以下のように指示を出すことで瞬時に実用的なテンプレートを作成してくれる。

プロンプト例：
「WordPressで、表示中の投稿の親カテゴリや階層を自動的に取得し、セマンティックなHTML構造（nav, ol, li）で出力するパンくずリスト用のPHP関数（functions.php用）を作成してください。」

注意点として、AIが生成したパンくずリストのURLが、実際のサイトのディレクトリ構造（ドメイン直下なのか、サブディレクトリがあるのか）と一致しているか、最後の現在地ページに誤ってリンクが張られていないかを確認することが重要である。

よくある勘違い

パンくずリストとサイトマップは同じものである？

明確に異なる。サイトマップは、Webサイト内に存在するすべてのページへのリンクを1つのページに網羅した「サイト全体の地図（一覧表）」である。一方、パンくずリストは、いまユーザーが開いているそのページまでの「縦の階層関係（一本道）」を示すものである。

パンくずリストはすべてのページへ手動で静的に記述しなければならない？

そんなことはない。数ページしかないサイトであれば手動でも問題ないが、数百〜数千ページあるサイトやブログでは、CMS（WordPressなど）の機能や、JavaScriptで現在のURLのパス（/blog/category/post-id など）を分解して、動的にパンくずリストを自動生成するのが一般的である。

スマホ表示では横幅が狭く邪魔なので、CSSで非表示にしてしまっても良い？

これはSEO的にもユーザビリティ的にも非推奨である。スマホのように画面が狭い場合でも、フォントサイズを小さくしたり、「ホーム ＞ ... ＞ 現在地」のように中間を省略表示したり、あるいははみ出た部分を横スクロールできるようにCSS（overflow-x: auto）で調整し、機能自体はスマホ画面でも残しておくのが正しい設計である。

まとめ

  • パンくずリストは、トップページから現在地までの階層構造を示すナビゲーションリンクである。
  • ユーザーがサイト内での現在地を把握し、上の階層に戻りやすくする（ユーザビリティ向上）。
  • 検索エンジンのクローラーにサイトの構造を伝えるため、SEO対策として極めて重要である。
  • HTMLのセマンティックなマークアップに加え、JSON-LDによる構造化データの記述が推奨される。
  • AIコーディングでは、記述ミスの起きやすいJSON-LDの生成や、CMS用の動的自動生成プログラムの作成を容易に依頼できる。

情報ソース

より詳しくAIに聞いてみよう

  • WordPressのプラグインを使わずに、テーマのPHPコードだけでカテゴリ階層に対応したパンくずリストを自作する方法を教えてください。
  • Next.js（App Router）環境において、現在のパス（pathname）を取得し、動的にパンくずリストのHTMLとJSON-LDを生成するコンポーネントコードを書いてください。
  • パンくずリストの構造化データをGoogleに認識させた後、正しくインデックスされているかを確認する方法を教えてください。
  • レスポンシブ対応のCSSを用いて、スマートフォン表示時のみパンくずリストを横スクロール（はみ出しスクロール）させる方法を教えてください。
  • 1つの記事が「ブログ」と「製品紹介」など、複数の異なるカテゴリに属している場合、パンくずリストはどのように設計・表示すべきですか？