パンくずリストは、ウェブサイト上の現在地を示す「ナビ」や「地図」のようなものだ。
ウェブページの上部に「＞」や「→」などの記号を用いて階層表示されたもので、ユーザー行動をスムーズにすると同時に、SEOの面でも重要な役割を果たす。
一方で、以下のような疑問を持つ方も多いのではないだろうか。
「パンくずリストには具体的にどのようなメリットがあるのか」
「パンくずリストの設置方法がわからない」
「設置はされているものの、正解なのかは不明である」
そこで本記事では、パンくずリストの概要や（SEOにおける）メリット、設置方法をわかりやすく解説していく。
後半では、設置の取り組みが無駄にならないよう、注意点についても解説するため、ぜひ参考にしていただきたい。
1. パンくずリストとは？
パンくずリストとは、ウェブサイトの構造を階層的に示すナビゲーションの一種だ。
「ホーム ＞ サービス ＞ SEOコンサルティングサービス」のように、トップページから現在のページまでの経路がリンク形式で表示される。
ユーザーが現在閲覧しているページが、サイト全体のどの位置にあるかを視覚的に把握できる仕組みとなっている。
| 「パンくずリスト」の名前の由来は？
パンくずリストの名前は、グリム童話の『ヘンゼルとグレーテル』に登場するエピソードに由来している。 物語のなかで、ヘンゼルとグレーテルは森の中で迷わないようにするため、歩いた道にパンくずを落として目印にした。 このパンくずが、現在のウェブサイトの「道筋」を示すナビゲーション機能に例えられている。 |
2. パンくずリストの3つの種類
パンくずリストとは「＞」で表した階層構造のナビゲーションだと解説した。
このロケーション型のパンくずリスト以外にも、実は2つの種類がある。
現在ではほとんど使用されていない形式のパンくずリストもあるが、ホームページやオウンドメディアを運営する担当者は理解しておくとよいだろう。
2.1. ロケーション型（位置型・階層型）パンくずリスト
最も一般的なパンくずリストであるロケーション型は、サイト構造に基づいて、ページがどの階層（カテゴリー）に属しているかを示す形式だ。
サイト全体の階層構造を直感的に把握できるため、情報を探しやすいメリットがある。
特に、コンテンツが豊富なサイトで効果を発揮するだろう。
ロケーション型の例
- 「ホーム ＞ ソリューション ＞ ERP ＞ 中小企業向け」
- 「ホーム ＞ サービス ＞ ITインフラ構築 ＞ データセンター構築」
- 「ホーム ＞ サポート ＞ マニュアル ＞ 初期設定ガイド」
ロケーション型のメリット
- ユーザーの現在位置を明示
ユーザーがサイト全体のどの位置にいるのかを直感的に把握できるため、ページ数が多く大規模なホームページやオウンドメディアでも有効。 - 上位階層に戻る利便性
下層ページに位置していても、簡単に上位階層のページに戻れる。 - SEO効果
サイト構造を検索エンジンに正確に伝える役割があり、情報量が多いウェブサイトでもSEOに寄与する。
2.2. アトリビュート型（属性型）パンくずリスト
アトリビュート型は、ページの属性や分類情報を示す形式だ。
ページが持つ属性や特徴を明確に示すため、ユーザーが関連情報を絞り込みやすい。
カテゴリをイメージするとわかりやすいだろう。
「アトリビュート（=attribute）」は、日本語で「〇〇に属する」という意味を持つ。
現在見ているページの内容が、どのカテゴリや分類に属しているのかを簡単に把握できる点がメリットだ。
アトリビュート型の例
- 「ホーム ＞ 導入事例 ＞ 業界：製造 ＞ 規模：中小企業」
- 「ホーム ＞ 製品一覧 ＞ プラットフォーム：Windows ＞ サブカテゴリ：クラウドアプリ」
- 「ホーム ＞ セミナー ＞ 開催形式：オンライン ＞ 業界：流通業向け」
アトリビュート型のメリット
- ユーザーの絞り込みを支援
特定の条件で情報を絞り込みたいユーザーに最適。例えば「事例」のなかでも「製造業の中小企業向け事例」を探している場合など。 - 関連情報への誘導
関連ページ（例:「製造業向けの他の事例」）へアクセスしやすくなり、ユーザーがほしい情報をより多く得られる。 - フィルタリングとの相性が良い
高度な検索機能や条件指定が多いウェブサイトで効果を発揮する。多数の製品・サービスを取り扱っている場合でも、ユーザーが求める条件のものを見つけやすくなる。
2.3. パス型（履歴型）パンくずリスト
パス型は、ユーザーが訪問したページの履歴を示す形式だ。
「階層」ではなく、ユーザーがたどった「実際の履歴」を提示するため、ナビゲーションとしては一貫性がない。
ユーザーに適切な回遊を促しにくいことから、現在採用している企業はほとんどないが、知識の一つとして頭にいれておこう。
パス型の例
「ホーム ＞ ソリューション ＞ 無料セミナー」
3. パンくずリストがもたらす4つのメリット・効果
ウェブサイトにパンくずリストを実装することで、主に以下4つのメリットを得られる。
特に、BtoBにおいてどのような重要性があるのかという観点で詳しく見ていこう。
メリット1. SEO効果の向上
パンくずリストの設置は、検索エンジンにサイトの階層構造を伝えやすくし、クロール効率を高めることにつながる。
これにより、自社のウェブサイトが検索エンジンで評価されやすくなるだろう。
実際、Googleのガイドラインではパンくずリストの使用が推奨されており、さらに構造化マークアップを実装することで、よりサイト構造を検索エンジンとユーザーに伝えやすくなる。
パンくずリスト（BreadcrumbList）の構造化データ｜Google検索セントラル
特にBtoBのウェブサイトでは、高度な専門知識や業界に特化した情報・コンテンツを掲載し、検索エンジンからの流入を得ることが重要だ。
パンくずリストをうまく活用すれば、適切なSEO評価を得て上位表示を実現しやすくし、潜在顧客の訪問を増やす効果が期待できる。
メリット2. ユーザビリティの向上・離脱率の低下
検索エンジンからの評価はもちろんだが、パンくずリストの設置はユーザーが直接感じるウェブサイトの使いやすさにもつながる。
パンくずリストは、サイト内で現在のページがどの位置にあるかを視覚的に示すため、ユーザーはより効率良く情報収集を行えるだろう。
特に、BtoBやIT企業のウェブサイトは、ソリューション、導入事例、製品詳細、資料ダウンロードなど多数のページを公開し、大規模なサイトになっていることが多い。
パンくずリストがあれば、訪問者が迷わずページを見つけたり、行き来したりでき、離脱率の低下も期待できる。
メリット3. 検索結果におけるクリック率の向上
ウェブサイトにパンくずリストを設置すると、以下のように検索結果画面でも表示させることができる。
URLの英語文字列に加えて、階層構造が日本語文字列でわかりやすく表示される。
これにより、ユーザーはクリックする前の時点で瞬時にそのページが位置する階層や属性を把握することが可能だ。
その結果、単にURLが表示されているよりもクリックのハードルが下がり、クリック率の向上につながる。
ただし、上図のような記載を実現するには、パンくずリストへの構造化データのマークアップが必要な点に注意しよう（詳細は後述）。
メリット4. コンバージョン率の向上
パンくずリストは、ユーザーが上位の関連コンテンツや次の行動を選択しやすくするため、コンバージョンに至る導線を強化する役割を果たす。
BtoBの購買プロセスは複雑で、意思決定には複数の情報収集や比較が必要だ。
パンくずリストを活用すれば、そのプロセスの質を高めることができる。
例えば、簡単に上位階層に戻ったり、同属性内の関連情報を取得したりと「より深い情報収集」を行えるようになる。
よって、資料請求や問い合わせといったコンバージョンアクションにつながりやすくなるだろう。
4. パンくずリストの設置方法
では、パンくずリストの具体的な設置方法を見ていこう。
方法は「プラグインを利用する方法」と「HTMLで手動で作成する方法」の2つに大別される。
WordPressなどのCMSを活用している場合は前者、エンジニアなどがコーディングによりウェブサイトを実装している場合は後者を活用すると考えてよいだろう。
設置方法1. プラグインを利用する方法
CMS（コンテンツマネジメントシステム）を導入している場合は、CMS専用のプラグインを導入することでパンくずリストの生成が可能だ。
プラグインを利用すれば、技術的な知識がなくとも簡単に設定できる。
多くのBtoB企業のウェブサイトではWordPressが使われているため、ここではWordPressのプラグイン「Breadcrumb NavXT」を例に設置の手順を説明する。
Breadcrumb NavXT｜WordPress プラグイン
ステップ1.プラグインをインストール
- WordPressの管理画面にログイン。
- サイドバーの「プラグイン」→「新規追加」をクリックする。
- 検索ボックスに「Breadcrumb NavXT」と入力し検索する。
- 「今すぐインストール」をクリックする。
- インストール完了後、「有効化」をクリックする。
ステップ2.テンプレートファイルにコードを記述
- 管理画面サイドバーの「外観」→「テーマ編集」をクリックする。
- 画面右側の「ヘッダー (header.php)」をクリックする。
- header.phpのコード内に以下のコードを記述する。
| <div class=”breadcrumbs” typeof=”BreadcrumbList” vocab=”https://schema.org/”>
<?php if(function_exists(‘bcn_display’)) { bcn_display(); }?> </div> |
ステップ3.設定を調整
- 管理画面サイドバーの「設定」→「Breadcrumb NavXT」をクリックする。
- 階層構造やデザイン（表示する区切り記号など）を設定画面でカスタマイズする。
ステップ4.表示を確認
- ページを開いてパンくずリストが正しく表示されているか確認する。スマートフォンでの表示も確認する。
- 必要に応じて、テーマ設定で位置を調整する。
設置方法2. 手動で作成する方法（HTMLコードを使用）
プラグインを使わず、直接パンくずリストをコーディングする方法もある。
細かいデザインや機能をカスタマイズしたい場合に適しているが、技術的な作業が必要だ。
ステップ1.HTMLコードを用意
以下は、基本的なパンくずリストの例だ。
| <nav aria-label=”パンくずリスト”>
<ol> <li><a href=”/”>ホーム</a></li> <li><a href=”/solutions/”>ソリューション</a></li> <li><a href=”/solutions/manufacturing/”>製造業向け</a></li> <li>現在のページ</li> </ol> </nav> |
- <nav>タグはナビゲーションエリアであることを示す。
- <ol>はリスト形式でパンくずリストを表示するためのタグ。
- <li>で各階層を定義し、上位ページにはリンクを設定。
ステップ2.CSSでデザインを調整（オプション）
パンくずリストの見た目を調整するためのCSSコードを用意する。
以下は、パンくずリストを横並びにし、「＞」を区切り記号として追加する場合のCSSコードの例だ。
| nav ol {
list-style: none; padding: 0; display: flex; } nav ol li { margin-right: 5px; } nav ol li::after { content: “>”; margin-left: 5px; } nav ol li:last-child::after { content: “”; } |
ステップ3.HTMLファイルに追加
用意したコードを、パンくずリストを表示したいページテンプレートやファイルに挿入し、サーバーにアップロードする。
通常はheader.phpやsingle.phpに追加する。
ステップ4.表示を確認
サーバーにアップロード後、ページを開いてパンくずリストが正しく表示されているかを確認する。
5. パンくずリストを設置する際の8つの注意点
一見シンプルな施策に思えるパンくずリストだが、適切な方法で設置しなければ逆効果となるおそれがある。
特に、以下8つの注意点は必ず押さえておこう。
注意点1.わかりやすくシンプルな階層構造を設計する
パンくずリストは、直感的で簡潔に設計することが重要だ。
あくまでもナビや地図のような役割を果たすため、その構造を複雑にすることは目的に沿っていない。
特にBtoBの場合、ウェブサイトはリード獲得の重要手段だ。
階層のわかりづらさゆえにユーザーを離脱させてしまうことは、大きな機会損失となる。
基本的には3〜4階層にとどめよう。
5階層以上になる場合は、そもそもの階層やカテゴリ構造を見直すことをおすすめする。
| ＜わかりやすい階層構造の例＞
「ホーム ＞ ソリューション ＞ 業界別 ＞ 製造業向け」
|
注意点2. スマートフォンでも見やすいように設置する
BtoBにおいても、ウェブサイトがスマートフォンで閲覧されるケースは多い。
よって、スマートフォンでも見やすいパンくずリストを設置することが重要だ。
レスポンシブデザインを適用し、実際にタップ操作や視認性に問題がないかをテストすることで、モバイルフレンドリーなパンくずリストを実現できる。
例えば、以下の点に注意しよう。
- フォントサイズは少なくとも14px以上で、リンク間のスペースを十分に確保する（誤タップを防ぐため）。
- リスト項目がデバイスの横幅を超えてしまう場合は、テキストの折り返しや「…」による省略表示を導入する。
- レスポンシブデザインを採用し、端末の画面サイズに応じて適切にレイアウトを調整する（プラグインでは自動的にレスポンシブ対応になるケースもある）。
注意点3. 適切なキーワードを含めたアンカーテキストを設定する
パンくずリストのアンカーテキストは、ユーザーにとってページの内容を簡単に理解できる表現にすることが重要だ。
同時に、SEOの観点から適切なキーワードを含めると、検索エンジンにもサイト構造が伝わりやすくなる。
ただし、キーワードを詰め込みすぎると不自然な表現となり、ユーザー体験を損ないかねない。
例えば「ホーム ＞ ソリューション ＞ 製造業向け」のように自然で簡潔な表現が適切であり、「ホーム ＞ ソリューション（業界別製造業向け製品紹介）」のような不自然なアンカーテキストは避けるべきだ。
ユーザー視点とSEOの両方を考慮し、明確で簡潔なアンカーテキストを設定しよう。
注意点4. ユーザーにとってわかりやすい記号を使う
パンくずリストの区切り記号は、ページ間の関係性を直感的に示す重要な要素だ。
記号はシンプルでわかりやすいものを採用し、統一性を保つことが推奨される。
「＞」や「→」がよく使用されるが「/」や「｜」なども選択肢となる。
「ホーム ＞ ソリューション ＞ 製造業向け」のように「＞」を使用すると、階層的な関係性が視覚的に伝わりやすくなるだろう。
一方で、統一感のない記号を使ったり、複雑なデザインを採用したりすると、ユーザーを混乱させてしまうため注意しなければならない。
また、記号はサイト全体のデザインやブランドイメージに合ったものを使用しよう。
パンくずリストの記号が他のUI要素と調和していない場合、視覚的な違和感を与えることがあるため、事前にデザイン全体を確認することが重要だ。
注意点5. 構造化データをマークアップする
パンくずリストを構造化データでマークアップすることで、検索エンジンがサイト構造を理解しやすくなる。
構造化データとは、ウェブページの内容や関係性を検索エンジンに明確に伝えるためのコードだ。
これにより、Googleの検索結果にパンくずリストが表示される可能性が高まり、ユーザーのクリック率向上が期待できる。
構造化データには技術的な要素が含まれるため、実装が難しい場合は、専門家に相談することも検討しよう。
構造化データのマークアップの方法については、Googleが公式のガイドラインを出しているため、以下のページを参考にしていただきたい。
パンくずリスト（BreadcrumbList）の構造化データ｜Google検索セントラル
注意点6. グローバルナビゲーションの代わりにしない
パンくずリストは、あくまで補助的なナビゲーションツールであり、グローバルナビゲーションの代替として使用するべきではない。
グローバルナビゲーションは、サイト全体を横断的に案内する役割を持ち、主要なカテゴリやページへのアクセスを提供する。
一方、パンくずリストは、ユーザーが現在いるページの位置を把握し、上位階層や関連するカテゴリに戻るための手段だ。
そのため、パンくずリストだけではサイト内の主要な情報にアクセスしにくい。
グローバルナビゲーションとパンくずリストは役割が異なるため、両方を適切に設置することが重要だ。
注意点7.不要なページには設置しない
パンくずリストは、サイト内の階層構造を明確にする目的で設置されるため、すべてのページに必要ではない。
例えば、トップページやランディングページのように階層構造を持たないページには、パンくずリストの設置は不要だ。
これらのページにパンくずリストを表示すると、不要な情報としてユーザーを混乱させたり、デザインが煩雑化したりするおそれがある。
どのページに設置するかを慎重に選び、適切に運用することで、パンくずリストが持つ本来の役割を最大限に活かせるだろう。
注意点8. リンク切れを防ぐ
パンくずリスト内のリンクが切れていると、ユーザーにとって大きなストレスとなり、サイト全体の信頼性を低下させる原因となる。
また、SEO評価においても、クローラビリティが悪化するためにマイナスの影響を及ぼすおそれがある。
リンク切れは、ウェブサイトの構造変更やページの削除などが原因で発生することが多い。
そのため、定期的にパンくずリスト内のリンクをチェックし、問題があれば迅速に修正することが重要だ。
リンク切れを防ぐためには、ウェブサイトの更新時にパンくずリストも併せて確認するルールを作るか、リンクチェッカーなどのツールを活用して自動で検出する仕組みを導入しよう。
6. まとめ
パンくずリストはウェブサイトの顔ではないが、これがなくてはユーザーにとってもSEOにとっても悪影響があると言い切れるほど重要な要素だ。
特にBtoBでは大規模なサイトが多いため、自社がせっかく持っている各コンテンツ（ページ）への適切なアクセスを促すために欠かせない。
本記事で紹介した注意点も念頭に置きながらパンくずリストを適切に設置していこう。
当社では、BtoBのIT企業に向けてウェブサイト全般のコンサルティングサービスを提供している。
パンくずリストの設置についても、お困りの点があれば気軽にご相談いただきたい。
