パンくずリストは、Webサイトを訪れたユーザーがサイト内のどこにいるかをわかりやすくするためのナビゲーションです。
これを設置することでユーザビリティが向上し、回遊性や検索結果での表示改善といったメリットも期待できます。
ここでは、パンくずリストの基本から設置方法、注意点などについて、詳しく解説します。
SEOの基礎知識 TOPページへ目次
パンくずリストとは
パンくずリストとは、Webサイトの階層構造を示し、現在ページがサイト内のどの位置にあるかをユーザーにわかりやすく表示するナビゲーション機能のこと。
一般的に、サイトの上部やメインコンテンツの前に「ホーム > カテゴリ > 現在のページ」といった形式で表示され、Webサイトの階層構造を一目で把握できる形になっています。
「パンくず」という名前は、童話「ヘンゼルとグレーテル」のエピソードが由来。
森の中で道に迷わないように、パンくずを落としながら進んだことになぞらえて、ユーザーが現在地を把握できる目印という意味で使われています。
パンくずリストを設置することのメリット
パンくずリストを設置することで、主に次のようなメリットがあります。
＜パンくずリストのメリット＞
ユーザビリティの向上
パンくずリストによって、ユーザーは「自分が今、Webサイトのどの階層にいるのか」をすぐに把握できます。
＜パンくずリストの例＞
ホーム ＞ 商品情報 ＞ パソコン ＞ ノートパソコン ＞ 商品詳細ページ（※現在のページ）特に、検索エンジンや外部サイトから直接深い階層のページにアクセスしたケースでも、パンくずリストがあれば「自分がどこにいるのか」をすぐに把握でき、関連ページへの移動も簡単になるでしょう。
サイト構造の明確化
パンくずリストは、ユーザーだけでなく検索エンジンがWebサイトの構造を理解するためにも重要です。
検索エンジンのクローラーがWebサイトを巡回する際、パンくずリストによってページ同士の関係性や階層構造を正確に理解します。
これによって各ページの重要度や関連性を適切に評価でき、結果として検索順位の向上にもつながる可能性があります。
特に、大規模なECサイトや情報サイトでは、パンくずリストがないと検索エンジンがサイトの構造を正しく理解できず、重要なページが適切にインデックスされない可能性も考えられます。
離脱率の低減
パンくずリストがあることで、ユーザーは目的の情報に辿り着きやすくなり、Webサイト内で迷うことがなくなります。
つまり、「欲しい情報がどこにあるかわからない」といった不安やストレスが軽減されるため、ページを離れる理由が減るのです。
特に情報量の多いサイトでは、パンくずリストの有無が離脱率に大きく影響します。
例えば、ECサイトで商品を探している際に、カテゴリ間の移動がスムーズに行えれば、ユーザーは購入まで辿り着く可能性が高くなるでしょう。
構造化データによる検索結果表示の強化
パンくずリストは、構造化データとして検索エンジンに伝えることができます。
これにより、Googleの検索結果ではURLの代わりに「ホーム ＞ カテゴリ ＞ 記事タイトル」といった形でリッチスニペットが表示される可能性があります。
検索ユーザーにとってもページの位置づけがわかりやすくなり、クリック率の改善が期待できるでしょう。
詳しくはこの記事をチェック！
パンくずリストの種類
パンくずリストには、Webサイトの特性や目的に応じて「階層型」「属性型」という2つの種類があるため、自サイトに最適なタイプを選択しましょう。
各々の特徴について詳しく見ていきます。
階層型
階層型は、最も一般的で広く使われているタイプです。
Webサイトの階層構造に基づいて、現在のページがサイト全体のどの位置にあるかを示します。
＜階層型パンくずリストの表示例＞
ホーム > 商品カテゴリ > サブカテゴリ > 商品詳細ページホーム > 会社情報 > 採用情報 > 新卒採用
ホーム > ブログ > SEO > パンくずリストとは
階層型の特徴は、Webサイトの論理的な構造を直接反映している点。
ユーザーはどの階層にいるかが明確にわかり、上位階層への移動も簡単に行うことができます。
また、最もSEO効果が高く、検索エンジンがサイト構造を理解しやすいため、多くのWebサイトで採用されています。
＜階層型に適したサイト＞
- ECサイト：「商品カテゴリ > サブカテゴリ > 商品詳細」という商品分類に適している
- コーポレートサイト：「会社概要 > 事業内容 > サービス詳細」のような明確な階層がある
- 大規模な情報サイト：「カテゴリ > サブカテゴリ > 記事」のような構造で情報を整理できる
属性型
属性型パンくずリストは、現在のページがどのような属性や特徴を持っているかを示すタイプ。
主にECサイトの商品ページで使われることが多く、商品の分類や特性を表現します。
＜属性型パンくずリストの表示例＞
ホーム > メンズ > アウター > ダウンジャケット > 防水 > ブラックホーム > レディース > シューズ > スニーカー > ランニング > 25cm
ホーム > 家電 > キッチン家電 > 冷蔵庫 > 3ドア > 400L以上
属性型は、商品やコンテンツの特性を多角的に表現することが可能。
ユーザーは商品の詳細な属性を一目で把握でき、似たような属性を持つ商品を探しやすくなります。
ただ、属性型は便利な反面、階層が深くなりすぎると逆にユーザーを混乱させるリスクがあるので注意が必要。
さらに、SEOの観点では、階層型ほど明確な構造化の効果は期待できない場合もあります。
＜属性型に適したサイト＞
- ECサイトの商品検索：価格、ブランド、サイズ、色などの条件で絞り込んだ結果
- 不動産サイト：エリア、家賃、間取り、築年数などの検索条件
- 求人サイト：職種、勤務地、年収、雇用形態などの条件
- グルメサイト：エリア、ジャンル、予算、営業時間などの絞り込み条件
＜Webサイトの特徴別のおすすめタイプ＞
| サイトの特徴 | おすすめタイプ | 理由 |
|---|---|---|
| 明確な階層構造がある | 階層型 | サイト構造を直感的に理解してもらえる |
| 検索・絞り込み機能が中心 | 属性型 | 選択した条件をわかりやすく表示できる |
| 複雑な商品カテゴリがある | 階層型＋属性型の併用 | 構造理解と条件表示の両方が可能 |
| シンプルな構造 | 階層型 | 最も一般的で理解しやすい |
パンくずリストの階層構造の考え方
パンくずリストの効果を最大限に発揮するためには、適切な階層構造を設計してください。
階層の深さやカテゴリ分類の方法によって、ユーザビリティとSEO効果が異なります。
パンくずリストの階層は、ユーザーが迷わず理解できる深さ、一般的には3～5層程度が適切とされています。
＜3層の例＞
ホーム > カテゴリ > 現在のページホーム > SEO > パンくずリストとは
ホーム > 採用情報 > 新卒採用
＜4～5層の例＞
ホーム > 大カテゴリ > 小カテゴリ > サブカテゴリ > 現在のページホーム > メンズファッション > アウター > ジャケット > 商品詳細
ホーム > 企業情報 > IR情報 > 決算情報 > 2024年第3四半期
階層がそれ以上になってしまうと、ユーザーが現在位置を把握しにくくなったり、検索エンジン側からすると重要なページではないと判断されて評価が下がったりする可能性があります。
ただ、大規模サイトや複雑な商品カタログを持つECサイトなど、構造上どうしても階層が深くなってしまう場合は、表示方法を工夫しましょう。
＜階層が深いパンくずリストの表示例＞
- 省略表示：中間階層を省略して重要な階層のみを表示する
省略前：ホーム > 家電 > キッチン家電 > 調理家電 > 電子レンジ > オーブン機能付き > 商品詳細
省略後：ホーム > 家電 > ... > オーブン機能付き > 商品詳細 - 階層の統合：類似するカテゴリを統合して、階層数を減らす
統合前：ホーム > レディース > 服 > トップス > シャツ > 長袖シャツ > 商品詳細
統合後：ホーム > レディース > トップス・シャツ > 商品詳細 - モバイル専用の短縮表示：モバイルデバイスではデスクトップとは異なる短縮版を表示する
デスクトップ：ホーム > 大カテゴリ > 中カテゴリ > 小カテゴリ > 現在のページ
モバイル：ホーム > 中カテゴリ > 現在のページ
パンくずリストの効果的な設置位置
パンくずリストは、ただ設置すれば良いものではなく、ユーザーが素早く気づき、ストレスなく利用できることが大切です。
そのためには、ユーザーの視線の流れと行動パターンを考慮して決める必要があります。
中でも効果的な配置位置は「ページ上部」と「メインコンテンツの直前」です。
ページ上部
最も一般的で推奨される設置位置は、ページの上部エリアです。
具体的には、ヘッダーナビゲーションの直下から、ページのメインコンテンツが始まる前の領域に配置します。
＜ページ上部に配置するメリット＞
- 視認性が高い：ページを開いてすぐに目に入る位置にある
- ユーザーが見つけやすい：多くのWebサイトで採用している位置のため、ユーザーが見つけやすい
- 全ページ共通の位置：どのページでも同じ場所にあるため、一貫性がある
- 検索エンジンに評価されやすい：ページの上部にあることで、重要な要素として認識される
メインコンテンツ直前
もうひとつの効果的な配置場所は、ページタイトル（h1）の直後、メインコンテンツが始まる直前の位置です。
この配置にすることで、ユーザーがコンテンツを読み始める前に現在位置を確認できます。
＜メインコンテンツ直前に配置するメリット＞
- コンテンツとの関連性が明確：これから読むコンテンツの位置づけがすぐにわかる
- 広告と区別される：ヘッダー周辺に広告がある場合でも、コンテンツエリアとの境界が明確
- 上位階層への移動が容易：コンテンツを読みながら、必要に応じて上位階層への移動を検討できる
モバイルにおけるパンくずリスト設置のポイント
モバイルデバイスでは、画面サイズが限られているため、パンくずリストの配置にはより気を使う必要があります。
主に次のようなことを意識しましょう。
＜モバイルにおけるパンくずリスト設置のポイント＞
- スクロール不要な位置に置く
ファーストビューで確認できる位置に置くことで、ユーザーがスクロールする前に現在位置を把握できる。 - タップしやすいサイズ
指での操作を考慮し、各リンクに十分なタップ領域を確保する必要がある。
＜モバイルでのパンくずリストの配置例＞
パンくずリストの望ましいデザイン
パンくずリストは機能的な要素のため、デザインは控えめで視認性を重視しましょう。
ユーザーにとって邪魔にならず、必要なときにすぐに見つけられるデザインを心がけてください。
フォントサイズ
パンくずリストのフォントサイズは、メインコンテンツより小さくしつつも、読みやすさを維持できるサイズに設定します。
フォントサイズが小さすぎると視認性が悪くなり、大きすぎるとメインコンテンツより目立ってしまうため、適切なバランスを保つことが大切です。
＜推奨フォントサイズ＞
- デスクトップ：12〜14px（本文が16pxの場合）
- モバイル：14〜16px（タップ領域は44px以上確保）
- 比率の目安：メインテキストの75〜85%程度
カラー
パンくずリストのカラー設計は、視認性とWebサイト全体の調和を考慮しましょう。
＜推奨カラー設計＞
- 通常のリンク：サイトのセカンダリーカラーまたは中間色（グレー系）を使用
- 現在のページ：リンクではないため、より薄い色や通常のテキストカラーを使用
- ホバー時：マウスオーバー時に色が変わることで、クリック可能であることを明示
＜カラーの設定例＞※数字・アルファベットはカラーコード
○良い例
ホーム（#777777） ＞ カテゴリ（#777777） ＞ 現在のページ（#333333）
ホバー時：
ホーム（#0066cc + underline） ＞ カテゴリ（#0066cc + underline）
×避けたい例
- 派手な色（#ff0000）：メインコンテンツより目立ってしまう
- 薄すぎる色（#cccccc）：視認性が悪い
区切り記号
パンくずリストの階層を区切る記号も、ユーザビリティを意識してください。
＜推奨区切り記号＞
- 右向き矢印（＞）：最も一般的
- スラッシュ（/）
- 右向き矢印（→）
並列関係に見えるカンマ（,）、文章の終わりに見えるピリオド（.）、視認性を妨げる複雑な装飾は避けたほうがいいでしょう。
パンくずリストの設置方法
パンくずリストは、どのように設置するかによって工数が変わります。
ここでは、次の3つのタイプの設置方法を紹介。
Webサイトの規模や管理体制に合わせて最適な方法を選びましょう。
＜パンくずリストの設置方法＞
HTMLによる実装例
最も基本的なのは、HTMLでリストを記述する方法です。
次のように記述すると、リンク部分はクリックでき、最後の要素は「現在のページ」としてリンクなしで表示されます。
＜HTMLの記述例＞
<nav aria-label="breadcrumb">
<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/basic/">基礎知識</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
パンくずリストとは
</li>
</ol>
</nav>
CMS（WordPressなど）による活用
CMSを使っている場合、テーマファイルを編集することで、パンくずリストの設置が可能。
特に広く使われているWordPressで実装する場合は、functions.phpにカスタム関数を追加するのが一般的です。
次のような形でfunctions.phpに追加すると、Webサイト全体にパンくずが表示されます。
＜WordPressでの実装例＞
// functions.phpに追加するカスタム関数
function custom_breadcrumb() {
// ホームページでは表示しない
if (is_home() || is_front_page()) return;
echo '<nav aria-label="breadcrumb">';
echo '<ol class="breadcrumb">';
// ホームリンク
echo '<li class="breadcrumb-item"><a href="' . home_url('/') . '">ホーム</a></li>';
if (is_category() || is_single()) {
// カテゴリページまたは投稿ページの場合
if (is_single()) {
$categories = get_the_category();
if ($categories) {
$category = $categories[0];
echo '<li class="breadcrumb-item"><a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
}
echo '<li class="breadcrumb-item active" aria-current="page">' . get_the_title() . '</li>';
} else {
echo '<li class="breadcrumb-item active" aria-current="page">' . single_cat_title('', false) . '</li>';
}
} elseif (is_page()) {
// 固定ページの場合
$ancestors = get_post_ancestors(get_the_ID());
if ($ancestors) {
$ancestors = array_reverse($ancestors);
foreach ($ancestors as $ancestor) {
echo '<li class="breadcrumb-item"><a href="' . get_permalink($ancestor) . '">' . get_the_title($ancestor) . '</a></li>';
}
}
echo '<li class="breadcrumb-item active" aria-current="page">' . get_the_title() . '</li>';
}
echo '</ol>';
echo '</nav>';
}
プラグインやテーマの活用
もっと手軽に設置したい場合は、プラグインを利用するのがおすすめです。
WordPressであれば「Breadcrumb NavXT」「Yoast SEO」が代表的。
これらをインストールして設定するだけで、パンくずリストが自動生成されます。
また、最近の有料テーマや高機能テーマにはパンくず機能が標準搭載されているものが多く、デザインや構造化データ対応まで含めて一括で管理できるケースもあります。
パンくずリストを設置する際の注意点
パンくずリストは便利なナビゲーションですが、設置の仕方を間違えるとユーザーの混乱を招いたり、SEO効果が弱まったりすることがあります。
ここでは特に注意したいポイントを紹介しましょう。
＜パンくずリストを設置する際の注意点＞
カテゴリ名がわかりづらいor重複している
「コラム」「記事」のように、意味があいまいで似たようなカテゴリ名を並べると、パンくずを見てもどの階層を指しているのかがわかりにくくなります。
また、同じカテゴリ名が複数箇所で使われていることも混乱の原因になるでしょう。
そのため、カテゴリ名は具体的で直感的に理解できるものを使うことが大切です。
リンク切れや誤ったURL設定
パンくずリストの各階層は、リンクとして機能するのが基本です。
リンク先が存在しなかったり、誤ったURLが設定されていたりすると、ユーザーはページに移動できず、離脱につながります。
さらに、検索エンジンにも誤った情報を伝える懸念もあるため、設置した後はリンク切れがないか、URLが正規化されているかを必ずチェックしましょう。
構造化データのマークアップ方法
パンくずリストは、前項で説明したユーザーに見えるナビゲーションを設置することと、検索エンジンに正しく伝えるために構造化データをマークアップすることの両方が必要です。
ここからは、検索エンジンに正しく伝えるための構造化データについて紹介します。
構造化データをマークアップする際に利用するのがschema.orgの「BreadcrumbList」という仕様。
これを使うことで、検索エンジンにWebサイト内の階層関係を明確に伝えることができます。
＜BreadcrumbListの基本構造＞
BreadcrumbList├─ itemListElement (配列)
├─ ListItem (1番目の項目)
│ ├─ position: 1
│ ├─ name: "ホーム"
│ └─ item: "https://example.com/"
├─ ListItem (2番目の項目)
│ ├─ position: 2
│ ├─ name: "商品カテゴリ"
│ └─ item: "https://example.com/category/"
└─ ListItem (3番目の項目)
├─ position: 3
├─ name: "現在のページ"
└─ item: "https://example.com/category/current-page/"
＜必須プロパティ＞
| プロパティ | 概要 |
|---|---|
| @type | "BreadcrumbList"を指定 |
| itemListElement | パンくずの各項目を含む配列 |
| position | 階層内での位置（1から始まる連続した数値） |
| name | 表示されるテキスト |
| item | リンク先のURL |
また、実装にあたってGoogleが推奨しているのは、JSON-LD形式での記述です。
HTMLと分離して記述できるため、保守や編集がしやすくなります。
またその場合、HTMLの<head>セクション内に記述するのが一般的です。
＜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": "基礎知識",
"item": "https://example.com/seo/basic/"
},
{
"@type": "ListItem",
"position": 4,
"name": "パンくずリストとは",
}
]
}
</script>
構造化データが正しく実装されているかを確認する方法
構造化データが正しく実装されているかを確認するには、主に次の2パターンがあります。
- リッチリザルトテスト
Googleが提供しているリッチリザルトテストに、URL、またはコードを直接入力することでテストできます。
- Google Search Console
Google Search Consoleの「拡張」→「パンくずリスト」で確認が可能。
エラーがある場合は詳細な情報が表示される。
構造化データをマークアップする際の注意点
構造化データは「形式通りに書けばOK」ではなく、検索エンジンが解釈したときに整合性が取れているかが重要です。
ここでは特に気をつけたいポイントを解説します。
＜構造化データをマークアップする際の注意点＞
絶対URLを使用する
itemに指定するリンク先は、必ず「https://」から始まる完全な形の「絶対URL」を使いましょう。
相対URL（ドメイン名を省略して書く形式）でも理論上は動作しますが、Googleがクロールする環境によっては正しく認識されない場合があります。
さらに、複数のURL表記（http／httpsや末尾スラッシュの有無）が混在すると「どれが正規URLか」が曖昧になり、SEO評価の分散につながる可能性もあります。
画面に表示されるパンくずと同じ名称にする
構造化データに書いたパンくずと、ページ上に表示されているパンくずの内容が食い違っていると、Googleに不自然と判断されます。
例えば、画面上では「ホーム ＞ SEO ＞ パンくずリスト」と表示されているのに、構造化データでは「ホーム ＞ 内部施策 ＞ パンくずリスト」となっていると、ユーザー体験と検索エンジン理解が不一致になります。
positionは1からの連番にする
BreadcrumbListでは各要素にpositionを付けますが、これは「そのパンくずが階層の何番目か」を示す大事な属性です。
1から始まり、2、3、4…と、数字の抜けや重複がないように設定してください。
もし間違った番号を付けてしまうと、リッチリザルトの対象外になる可能性があります。
ユーザーと検索エンジン双方に伝わりやすいパンくずリストを整えよう
パンくずリストは、ユーザーにとって現在地を示す便利なナビゲーションであり、同時に検索エンジンへサイト構造を伝える役割も担うもの。
これを設置することで回遊性が高まり、離脱率低減や検索結果でのリッチな表示など、多面的なメリットが期待できます。
ユーザーから見えるパンくずと、構造化データによるマークアップの両方を適切に実装し、ユーザーにも検索エンジンにもわかりやすいサイト運営を心がけましょう。
SEOの基礎知識 TOPページへ集客・コンバージョン数を増やしたい方へ
著者
編集者
編集プロダクションで一般情報誌の記事制作、各種ムック本の制作などを担当したのち、音楽情報マガジン、ウェブメディアの編集部に所属。 ナイルに勤務後は、主に女性向けメディアのコンテンツ制作を担当。 ユーザーが「そうなんだ！おもしろい！」と感じられる企画を通して、事業としても成果の出る記事づくりを心がけている。
