パンくずリストとは、Webページ上部などに表示される、サイト内の現在位置をトップページから階層順のリンクで示すナビゲーションのことです。ユーザーが迷わずページ間を移動できるようにする役割と、検索エンジンにサイト構造を伝える役割の両方を持ちます。種類は位置型・属性型・パス型の3つに分かれ、ECサイトなら属性型、情報量の多い大規模メディアなら位置型が向いていると言われています。本記事では定義から種類の使い分け、SEO効果、正しい設置位置、HTML・WordPressでの実装方法、構造化データ（BreadcrumbList）のマークアップまで、図解イメージを交えて解説します。
- パンくずリストの定義と3つの種類の違い
- SEO効果と正しい設置位置・デザイン
- HTML・WordPress・構造化データでの実装方法
種類は位置型・属性型・パス型の3つがあり、サイト構造に合わせて選びます。設置位置はページ上部が基本で、モバイルでは下部設置も検討します。構造化データはBreadcrumbListで実装し、絶対URL・表示名の一致・position連番の3点に注意します。
パンくずリストとは？サイト内の現在地を示す道しるべ
パンくずリストとは、ユーザーが現在サイト内のどの位置にいるかをWebページの階層順にリンクで示したナビゲーションのことで、通常はページ上部に設置されます。特にECサイトのようにカテゴリから商品詳細へ階層が深くなるサイトや、ページ数の多い大規模サイトほど設置の必要性が高いと言われています（出典）。
定義：階層順のリンクで現在位置を示すナビゲーション
MDNの用語解説では、パンくずリスト（breadcrumb trail）はウェブサイトの各ページのヘッダーと本文の間に置かれることが多い構成要素で、トップから見た現在ページの階層や、たどってきたリンクの順番を知ることができるものと定義されています（出典）。パンくずリストは単なる装飾ではなく、ユーザーと検索エンジンの両方にサイトの階層構造を伝える実用的なナビゲーション要素です。トップページ、カテゴリページ、現在のページという順にリンクが並ぶのが一般的な形です。
名前の由来と英語表記
パンくずリストという名前は、童話『ヘンゼルとグレーテル』で兄妹が帰り道の目印としてパンくずを道に落としたエピソードに由来すると言われています。英語では一般に「Breadcrumbs」と呼ばれ、「ナビゲーションパス」や「階層ナビゲーション」と呼ばれることもあります（出典）。この由来を知っておくと、パンくずリストが「元の場所に戻るための目印」という本来の役割を持つことが直感的に理解できます。
どんなサイトに必要か
パンくずリストは全てのサイトに必須というわけではありませんが、階層が深いサイトほど効果を発揮します。以下の表に、パンくずリストの必要性が特に高いサイトタイプを整理しました。
| サイトタイプ | 階層の深さ | パンくずリストの必要性 | 向いている種類 |
|---|---|---|---|
| ECサイト | 深い（カテゴリ→商品詳細） | 高い | 属性型 |
| 大規模メディア・ブログ | 中〜深い | 高い | 位置型 |
| 企業サイト（数十ページ） | 浅い〜中 | 中程度 | 位置型 |
| 小規模なランディングページ | 浅い | 低い | 設置不要な場合も |
TechSuite株式会社の「AI検索パートナーズ」は、自社サイトにおいてAI Share of Voiceが高水準を維持しており、支援先でもAI Overviewの引用率を改善した実績があります。パンくずリストによる明確なサイト構造は、こうしたLLMO対策の観点でも、AIがサイト全体のテーマやページ同士の関係性を把握しやすくなる要素の一つと考えられます。
パンくずリストは「サイト内の道しるべ」。由来を知れば役割もすっと理解できますね
パンくずリストの3つの種類と使い分け方
パンくずリストの主な種類は位置型・属性型・パス型の3つで、サイトの構造や更新頻度に応じて使い分けます。結論としては、大規模メディアは位置型、ECサイトは属性型が向いており、パス型は現在ほとんど使われていません。
位置型：階層構造上の現在位置を示す最も一般的なタイプ
位置型は、そのページがサイトのどの階層に属しているかを固定的に示すタイプで、ユーザーがどの経路から来ても表示されるパンくずは同じになります（出典）。3種類の中で最も採用例が多く、多くのCMSやテーマが標準対応しているのも位置型です。カテゴリ構造がしっかり設計された大規模メディアやコーポレートサイトに適しています。
属性型：カテゴリ・タグなど属性で分類
属性型は、商品が持つカテゴリやタグといった「属性」に基づいてパンくずを表示するタイプです。1つの商品が複数のカテゴリに属する場合、ユーザーがどのカテゴリ経由でアクセスしたかによって表示内容が変わることがあります。ECサイトのように商品が複数のカテゴリを横断して分類されるサイトで多く採用されています。
パス型：閲覧履歴を示す（現在はほぼ非推奨）
パス型は、ユーザーが実際にたどってきた閲覧履歴の順にパンくずを表示するタイプです。同じページでも訪問経路によって表示が変わるため、SEO上の効果が薄く、実務上はほとんど採用されなくなっているのが現状です。上位記事を見ても位置型・属性型を中心に解説されており、パス型は歴史的な分類として紹介される程度に留まっています。
自サイトはどれを選ぶ？判断フロー
種類選定に迷う場合は、サイトの目的とコンテンツ構造から逆算して判断するのが実務的です。以下のチェックリストを参考にしてください。
パンくずリストの種類を選ぶ際のチェックポイントです。
- カテゴリ構造が1系統に固定されているか（固定なら位置型が向く）
- 商品やコンテンツが複数カテゴリに属するか（属する場合は属性型を検討）
- ページ数が多く階層が深いか（深い場合はパンくず設置の効果が大きい）
- 使用中のCMS・テーマが標準対応している種類は何か
3種類の違いを一覧化すると次のようになります。
| 種類 | 表示の基準 | 表示の一貫性 | 向いているサイト |
|---|---|---|---|
| 位置型 | 階層構造上の位置 | 常に同じ | 大規模メディア・コーポレートサイト |
| 属性型 | カテゴリ・タグ属性 | アクセス経路により変化しうる | ECサイト |
| パス型 | 閲覧履歴 | 訪問経路により変化する | 現在は採用例が少ない |
TechSuite株式会社の「AI検索パートナーズ」は、コンサルティングという性質上、業種や商材、サイト規模に応じてパンくずリストの種類選定から階層設計までを顧客ごとに個別に設計しており、テンプレート的な一律提案ではなく、サイト構造上のボトルネックを踏まえた最適な設置方法を提示しています。
種類選びに迷ったら、まずサイトのカテゴリ構造が1系統か複数系統かを確認しましょう
AI検索パートナーズでは、
AIに”選ばれる”ための戦略設計から実行まで支援！
パンくずリストのSEO効果・メリットとは？
パンくずリストのメリットは、ユーザーが迷子にならず快適に回遊できる点と、Googleのクロールを助けサイト構造を明確に伝える点の2系統に分けて整理できます。どちらも離脱率の低減や検索エンジンからの評価につながる要素です。
ユーザー向けメリット：迷子防止・回遊性向上
ユーザーはパンくずリストを使うことで、前のカテゴリやトップページへワンクリックで戻れるため、目的のコンテンツにたどり着きやすくなります。現在位置が視覚的にわかることで、サイト内での迷子状態を防ぎ離脱率の低減につながると言われています（出典）。特にスマートフォンのような小さな画面では、戻る操作の手間を減らせる点が有効です。
検索エンジン向けメリット：クロール促進とサイト構造の明確化
パンくずリストは内部リンクの一種であり、アンカーテキストとして対策キーワードをクローラーに伝える役割も持ちます。これによりGoogleのクロールを助け、サイト全体の階層構造を明確に伝えることができるとされています（出典）。実際にGoogleは公式の「SEOスターターガイド」でも、パンくずリストがサイト構造の整理に役立つとし、表示する場合は構造化データのマークアップを推奨しています（出典）。
検索結果（リッチリザルト）での表示強化
構造化データを正しく実装すると、検索結果のURL部分がパンくず形式で表示されるリッチリザルトの対象になることがあります。これは表示保証ではありませんが、視覚的な情報量が増え、検索結果上での見え方が変わる可能性がある点は覚えておきたいポイントです。
以下にメリットを整理したチェックリストを示します。
パンくずリストの主なメリットです。
- 現在位置がわかり迷子になりにくい
- 前のカテゴリやトップへ素早く戻れる
- クローラーにサイト構造を伝えやすい
- リッチリザルトで検索結果の見え方が変わりうる
| 観点 | メリット | 効果 |
|---|---|---|
| ユーザー向け | 迷子防止・回遊性向上 | 離脱率の低減 |
| 検索エンジン向け | クロール促進・構造明確化 | サイト全体の評価向上 |
| 検索結果表示 | リッチリザルト対象 | 視認性の向上 |
TechSuite株式会社の「AI検索パートナーズ」では、AI検索経由での受注率が従来のSEO経由の約3倍に達しているというデータを持っており、パンくずリストのような基礎的なサイト構造改善についても、露出や順位だけでなく最終的な受注につながる施策として位置づけて支援しています。
メリットはユーザー向けと検索エンジン向けの2軸で覚えると整理しやすいですよ
AI検索パートナーズでは、AIに”選ばれる”ための戦略設計から実行まで一気通貫で支援！
AI検索パートナーズでは、AI検索の専門知識と支援実績を持つ専任コンサルタントが、AIに“引用される・選ばれる”ための戦略設計からコンテンツ最適化、効果測定・改善まで一気通貫でご支援いたします。
ご興味のある方は、ぜひ資料をダウンロードして詳細をご確認ください。
パンくずリストの正しい設置位置とデザインは？
パンくずリストの設置位置は、PCではヘッダー直下からメインコンテンツ前のページ上部が基本で、モバイルでは上部設置に加え下部設置や横スクロールが検討されます。デザインはフォントサイズ・カラー・区切り記号の3点で整えるのが一般的です。
PC上部：ヘッダー直下〜コンテンツ前
最も一般的な設置位置は、ページ上部のヘッダーナビゲーション直下から、メインコンテンツが始まる直前までの領域です（出典）。ページタイトル（h1）の直後にパンくずリストを置くことで、ユーザーは本文を読み始める前に現在位置を確認できます。この位置は視認性が高く、多くのCMSテーマでも標準的に採用されています。
モバイルの設置とデジタル庁DADSの仕様
モバイルではパンくずリストが長くなりやすいため、改行で表示するか、改行なしの横スクロールで表示するかの2パターンが検討されます。デジタル庁のデザインシステム（DADS）では、パンくずリストはヘッダーとページ見出しの間に配置し、コンテンツ幅より長くなる場合は改行する仕様を前提としつつ、モバイルでは改行または横スクロールを併用し、横スクロールを採用する場合はページ下部（フッター上部）にも改行仕様のパンくずを配置するとされています（出典）。
デザインの基本とアクセシビリティ配慮
望ましいデザインの観点はフォントサイズ・カラー・区切り記号（「＞」や「/」など）の3点で整理できます（出典）。加えて、アクセシビリティの観点では、パンくずリスト全体をnav要素で囲みaria-labelで役割を明示し、区切り記号はCSSの装飾として扱ってスクリーンリーダーに読み上げさせないようにする配慮も有効です。
設置位置の比較を以下にまとめます。
| デバイス | 設置位置 | 特徴 |
|---|---|---|
| PC | ヘッダー直下〜コンテンツ前 | 視認性が高く最も一般的 |
| PC | h1直後 | 読み始め前に現在位置を確認できる |
| モバイル | 上部（改行） | 階層が深いと縦に長くなる |
| モバイル | 上部（横スクロール）＋下部併用 | DADS推奨仕様に近い形 |
デザインチェックの観点は以下の通りです。
設置位置・デザインのチェックポイントです。
- ヘッダー直下〜コンテンツ前に配置しているか
- モバイルで改行または横スクロールが機能しているか
- 区切り記号・フォントサイズ・カラーが本文と区別できているか
- nav要素とaria-labelでマークアップされているか
TechSuite株式会社の「AI検索パートナーズ」は、技術実装を担う人材とコンテンツ制作を担う人材が同じチームで連携する体制をとっており、パンくずリストの設置位置やデザインの検討から実装、効果測定までを一気通貫で伴走できる点が特徴です。
設置位置とデザインは公式ガイドラインを参考にしつつ、モバイル表示は必ず実機で確認したいところです
パンくずリストの設置方法（HTML・WordPress）
パンくずリストの実装方法は、HTMLを直接記述する方法と、WordPressの対応テーマやプラグインを利用する方法に大きく分かれます。ゼロから構築するか既存の仕組みを使うかで、開発コストと自由度のバランスが変わります。
HTMLでの実装例
HTMLでパンくずリストを実装する場合は、ol要素またはul要素をnav要素で囲み、各リンクをli要素として並べる構成が基本です。階層構造をそのまま反映するのではなく、ユーザーが辿る一般的な経路をわかりやすく示すことが重視されます。アンカーテキストにはページ内容を表すキーワードを含めることで、SEOの観点からも意味を持たせやすくなります。
WordPress：対応テーマを使う
WordPressでは、パンくずリスト機能を標準搭載したテーマを利用する方法があります（出典）。テーマ標準機能を使う場合、追加のプラグインなしで階層に応じたパンくずが自動表示されるため、実装の手間が少ないのが利点です。ただしテーマによって表示位置やデザインの調整幅が異なるため、事前にカスタマイズ性を確認しておくとよいでしょう。
WordPress：プラグインを使う
テーマが標準対応していない場合は、Breadcrumb NavXTのような専用プラグインを利用する方法があります（出典）。プラグインを使うと、カテゴリ構造やカスタム投稿タイプにも柔軟に対応しやすく、構造化データの出力に対応したプラグインを選べば、後述するBreadcrumbListの実装工数も抑えられます。
実装方法ごとの特徴を比較します。
| 方法 | 実装の手間 | カスタマイズ性 | 向いているケース |
|---|---|---|---|
| HTML直書き | 高い（自前で構築） | 非常に高い | 独自デザイン・非WordPress |
| 対応テーマ | 低い | テーマ依存 | 手早く標準的に導入したい場合 |
| プラグイン | 中程度 | 高い | カテゴリ構造が複雑な場合 |
TechSuite株式会社の「AI検索パートナーズ」は、AIを活用したコンテンツ制作の仕組みを「バクヤスAI記事代行」事業で培ってきており、その制作エンジンとナレッジを応用することで、多数のページテンプレートに一貫したパンくずリストを効率よく展開する設計にも対応しています。
実装方法はサイトの規模と更新頻度で選ぶと、後の運用がぐっと楽になります
構造化データ（BreadcrumbList）の実装方法と注意点
構造化データのBreadcrumbListは必須ではありませんが、リッチリザルト表示に有効とされており、実装する場合は絶対URL・表示名の一致・positionの連番という3つの注意点を守ることが重要です。実装後はリッチリザルトテストとSearch Consoleで継続的に検証します。
BreadcrumbListの基本構造
BreadcrumbListには最低2つのListItemを含める必要があり、各ListItemはposition・name・item（URL）のプロパティを持ちます。最終ページのitemは省略可能とされています（出典）。Google公式ガイドラインでは、パンくずにはURL構造をそのまま反映するのではなく、ユーザーが辿る一般的な経路を示すことが推奨されています。ドメインや自ページ自体のListItemは含める必要がないとされている点も実装時に見落としやすいポイントです。なお、旧来のdata-vocabulary.orgによるマークアップは、Googleのリッチリザルトで既にサポートが終了しています（同出典）。1ページに複数のパンくず経路がある場合は、複数のBreadcrumbListを指定することも可能です（同出典）。
3大注意点：絶対URL・表示名の一致・positionの連番
構造化データ実装でよくあるミスは、itemに「https://」から始まる絶対URLを使っていない、画面表示のパンくずと名称が異なっている、positionが1からの連番になっていないという3点です（出典）。特にURLの表記ゆれは正規URLを曖昧にし、SEO評価が分散する恐れがあると言われているため注意が必要です。
設置後の検証：リッチリザルトテストとSearch Console
構造化データが正しく実装されているかは、リッチリザルトテストなどのツールで確認できます。デプロイ後やテンプレート更新後、そして定期的にSearch Consoleでリッチリザルトのレポートを監視することも推奨されています（出典）。こうした検証プロセスは、AI検索対策を含めたサイト全体の構造整理の一環として位置づけると運用が続けやすくなります。
よくある失敗と回避策
設置時によくある失敗として、カテゴリ名がわかりづらい・重複している、リンク切れや誤ったURLが設定されているといったケースが挙げられます（出典）。こうした失敗は、階層構造の設計そのものを見直すことで防ぎやすくなります。
注意点をチェック表として整理します。
| 注意点 | よくあるミス | 回避策 |
|---|---|---|
| URLの形式 | 相対URL・表記ゆれ | 絶対URLに統一する |
| 表示名の一致 | 画面表示と構造化データの名称が異なる | 同一の名称に統一する |
| positionの連番 | 1から始まっていない・欠番がある | 1から連番で振り直す |
| カテゴリ名 | わかりづらい・重複している | 階層設計を見直す |
| リンク先 | リンク切れ・誤ったURL | 定期的にリンクチェックを行う |
検証時に確認したいチェックリストです。
構造化データ設置後の検証チェックリストです。
- リッチリザルトテストでエラーが出ていないか
- Search Consoleのリッチリザルトレポートを定期確認しているか
- テンプレート更新後に再検証しているか
TechSuite株式会社の「AI検索パートナーズ」は、構造化データやエンティティ認識、意味的文脈といった生成AIが引用・推薦する仕組みを技術的に捉えて施策に落とし込んでおり、BreadcrumbListのような基本的な構造化データの実装から、LLMOとは何かを踏まえた一次情報設計まで踏み込んで支援しています。
構造化データは細部の設定ミスが起きやすいので、実装後の検証まで含めて習慣化しましょう
よくある質問
- パンくずリストは下部だけの設置でも問題ない？
下部だけの設置でも表示自体は可能ですが、視認性の面ではページ上部への設置が基本とされています。モバイルで横スクロール表示を採用する場合は、上部の横スクロール表示に加えて、ページ下部（フッター上部）に改行仕様のパンくずを併用する形が推奨されています（出典）。上部・下部のどちらか一方に限定するより、デバイスや文脈に応じて併用を検討するとよいでしょう。
- 構造化データは必須？入れないとどうなる？
構造化データのマークアップは必須ではありません。入れなくてもパンくずリスト自体はユーザー向けのナビゲーションとして機能します。ただし構造化データを実装するとリッチリザルト表示の対象になることがあり、Googleも表示する場合はマークアップを推奨しています（出典）。見た目の変化に直結するものではありませんが、実装しておく価値はあると言えます。
- パス型と位置型はどちらを使うべき？
現在は位置型が主流で、パス型は実務上ほとんど採用されていません。パス型は訪問経路によって表示が変わり一貫性が低いため、SEOやユーザビリティの観点で位置型または属性型を選ぶのが実務的な判断とされています。
- パンくずリストの区切り記号はどれが正解？
決まった正解はありませんが、「＞」や「/」といった記号が一般的に使われます。区切り記号はデザインの一部として本文と区別できる大きさ・色にすることが望ましく、アクセシビリティの観点ではCSSの装飾として扱い、読み上げ対象から外す配慮も有効です。
まとめ
パンくずリストとは、ユーザーとGoogleの両方にサイト内の現在位置を伝えるナビゲーションで、位置型・属性型・パス型の3種類があります。自サイトの構造に合わせて種類と設置位置を選び、HTMLやWordPressで実装した上で、必要に応じてBreadcrumbListの構造化データを追加するのが基本の流れです。
構造化データを実装する際は、絶対URL・表示名の一致・positionの連番という3点に注意し、リッチリザルトテストやSearch Consoleで設置後の状態を継続的に検証することが大切です。カテゴリ名の重複やリンク切れといった細かなミスも、階層構造の見直しによって防ぎやすくなります。
参考にした情報源
