パンくずリストとは？種類・設置方法・デザイン・SEO効果まで解説

Webサイトを閲覧していて、ページ上部に「トップページ ＞ サービス ＞ 記事詳細」のような表示を見たことはないでしょうか。

これがパンくずリストと呼ばれるナビゲーション要素です。

この記事では、パンくずリストの意味や種類、設置方法から注意点までを解説します。

ユーザーの使いやすさとSEOの両面に関わる、意外と奥が深い要素です。

パンくずリストとは

パンくずリストとは、Webページの現在地をサイト階層順に表示するナビゲーション要素のことです。

「トップページ ＞ サービス一覧 ＞ SEOコンサルティング」のように、上位階層から現在のページまでを一列に並べて表示します。

童話「ヘンゼルとグレーテル」でパン屑を目印に森の道を戻る場面が、この名称の由来とされています。

ユーザーがサイト内で迷わず現在地を把握できるよう、多くのWebサイトで導入されている要素です。

次の章では、パンくずリストの種類を紹介します。

パンくずリストの種類

パンくずリストには、主に3つの種類が存在します。

ここでは代表的な3つを紹介します。

• 階層型パンくずリスト
• 属性型パンくずリスト
• パス型パンくずリスト

サイトの構造やコンテンツの性質によって、適した種類を選ぶことが大切です。

階層型パンくずリスト

階層型パンくずリストは、サイトのカテゴリ構造をそのまま表示する形式です。

「トップページ ＞ 家電 ＞ 冷蔵庫」のように、上位カテゴリから順にたどれる構成になります。

たとえば「トップ＞家電＞冷蔵庫」のような3階層構造は、多くのコーポレートサイトで採用されている定番形式です。

階層構造が明確なサイトほど、この形式との相性が良い傾向にあります。

属性型パンくずリスト

属性型パンくずリストは、ユーザーが選択した絞り込み条件を表示する形式です。

「トップページ ＞ 家電 ＞ 5万円以下 ＞ 白色」のように、検索条件がそのままパンくずになります。

たとえば4つの条件で絞り込めるECサイトの商品一覧ページは、この形式に向いている形式です。

ユーザーごとに表示内容が変わるため、固定的な階層型とは性質が異なります。

パス型パンくずリスト

パス型パンくずリストは、ユーザーが実際にたどってきた閲覧履歴を表示する形式です。

ブラウザの「戻る」機能に近く、訪問経路によって表示内容が変わります。

たとえば同じ商品ページでも、訪問経路が3通りあれば表示も3パターンに分かれます。

現在のWebサイトでは、階層型や属性型に比べて採用例は少ない形式です。

パンくずリストを設置するメリット

パンくずリストの設置には、ユーザー体験とSEOの両面でメリットがあります。

ここでは代表的な2つを紹介します。

• ユーザーの回遊性向上
• クローラビリティの向上

メリットを理解したうえで導入すると、効果を実感しやすくなるでしょう。

ユーザーの回遊性向上

パンくずリストがあると、ユーザーは現在地から上位階層へワンクリックで移動できます。

関連する他のページへ回遊しやすくなり、サイト内の滞在時間が伸びる効果も期待できます。

たとえば検索結果から下層ページに直接訪れたユーザーにとって、特に有効な導線です。

迷子になったユーザーの離脱を防ぐ、地味ながら重要な役割を果たします。

クローラビリティの向上

パンくずリストは内部対策の一種であり、検索エンジンのクローラーがサイト構造を把握する助けになります。

各ページへのリンクが増える点も、クローラーにとって有益です。

たとえば10階層のサイトでも、構造化データとして実装すれば検索結果にパンくずリストが表示される場合もあります。

直接的な順位向上効果は限定的ですが、サイト全体の評価を底上げする要素の1つです。

パンくずリストの効果的な設置位置とデザイン

パンくずリストは、設置する位置とデザインによって使いやすさが大きく変わります。

ここでは代表的な2つのポイントを紹介します。

• 設置位置の基本ルール
• 見やすいデザインのポイント

位置とデザインへの配慮は、使いやすさに直結する要素です。

設置位置の基本ルール

パンくずリストは、ページ上部・タイトルの近くに設置するのが基本です。

ヘッダー直下に配置することで、ユーザーがページを開いてすぐに現在地を確認できます。

たとえば画面幅375pxのスマートフォンでは、ヘッダーとコンテンツの間に配置するケースが一般的です。

フッターへの設置は視認性が下がるため、あまり推奨されません。

見やすいデザインのポイント

パンくずリストの各階層は、記号やアイコンで区切って視認性を高めましょう。

「＞」や「/」のような簡潔な記号を使うと、階層構造が伝わりやすくなります。

たとえば最後の1項目だけリンクを外して文字色をグレーにするのが一般的です。

文字サイズを本文より小さくし、主役であるコンテンツの邪魔をしないデザインが望ましいです。

パンくずリストの設置方法

パンくずリストの設置には、表示用のHTMLと検索エンジン向けの構造化データの両方が必要です。

ここでは代表的な2つの実装方法を紹介します。

• HTMLでの表示
• 構造化データ（BreadcrumbList）のマークアップ

どちらか一方だけでは、ユーザーと検索エンジンの両方に意図を正しく伝えられません。

HTMLでの実装

表示用のパンくずリストは、順序付きリスト（ol要素）で実装するのが一般的です。

各階層をli要素で囲み、現在のページ以外にはa要素でリンクを設定します。

たとえばSWELLやCocoonなど、多くのテーマやプラグインがパンくずリストの自動生成機能を備えています。

独自に実装する場合は、階層構造を正しく反映させることが前提です。

構造化データ（BreadcrumbList）のマークアップ

検索エンジンにパンくずリストの意味を伝えるには、構造化データの実装が必要です。

GoogleはBreadcrumbListという形式のJSON-LDマークアップに対応しています。

たとえば3階層のページなら、position・name・itemの3つのプロパティを3セット記述します。

マークアップ後は、リッチリザルトテストなどのツールで表示内容を確認しておくと安心です。

パンくずリスト設置時の注意点

パンくずリストは設置すれば終わりではなく、いくつか気をつけたい注意点があります。

ここでは代表的な2つを紹介します。

• 表記・階層の一貫性
• 深い階層での省略ルール

注意点を押さえずに運用すると、かえってユーザーを混乱させてしまうため気をつけましょう。

表記・階層の一貫性

パンくずリストの各階層名は、ページタイトルやナビゲーションメニューの表記と揃えることが望ましいです。

たとえばナビゲーションで「家電」なのにパンくずで「電化製品」と表記が違えば、ユーザーは同じ場所か判断しづらいです。

カテゴリ名を変更した際は、パンくずリストの表記も忘れずに更新しましょう。

サイト全体で一貫したルールを決めておくと、運用時のミスを減らせます。

深い階層での省略ルール

階層が深いサイトでは、すべての階層を表示すると横幅を圧迫してしまうことがあります。

その場合は、中間階層を「…」で省略し、先頭と直近の階層のみを表示する方法があります。

たとえば7階層あるサイトでも、画面の狭いスマートフォンではこの省略表示が特に有効です。

省略表示にした場合でも、構造化データ側では階層を省略せずすべて記述する必要があります。

FAQ

まとめ

パンくずリストとは、Webページの現在地をサイト階層順に表示するナビゲーション要素です。

ユーザーの回遊性向上とクローラビリティの向上という、2つの面でメリットがあります。

HTMLでの表示と構造化データのマークアップを両方行うことで、効果を最大限に発揮できます。

表記の一貫性や深い階層での省略ルールにも注意しながら、正しく運用していきましょう。