この記事では、パンくずリストの種類や設置するメリット、設置位置、HTMLの書き方、階層設計のコツ、構造化データの実装と確認方法、設置するときの注意点までを解説します。
パンくずリストとは
パンくずリストとは、表示されているページがサイトの階層内のどの位置にあるかをユーザーと検索エンジンに示すナビゲーションです。ホーム > カテゴリ > 現在のページ のように上位階層へのリンクを並べて表示し、訪問者は最後のパンくずから順番にさかのぼることで、サイトの階層内を1レベルずつ上に移動できます。
名前の由来は童話のヘンゼルとグレーテルで、森で迷わないようにパンのくずを落として帰り道の目印にした逸話にちなみます。Webサイトでは、この目印がユーザーの現在地を示す役割を担い、階層構造の理解を助けます。英語ではBreadcrumb、構造化データの仕様ではBreadcrumbListと呼ばれます。
パンくずリストの種類
パンくずリストの種類は、表示の基準によって位置型・属性型・パス型の3つに分けられます。サイトの構成や目的に応じて使い分けますが、一般的に最も多く使われるのは位置型です。
| 種類 | 表示の基準 | 主な用途 |
|---|---|---|
| 位置型 | サイトの階層構造 | ブログ・コーポレートサイトなど多くのサイト |
| 属性型 | 検索条件やカテゴリ属性 | ECサイトなど |
| パス型 | ユーザーの閲覧履歴 | 現在はほぼ使われない |
位置型
位置型は、サイトの階層構造に沿って現在のページの位置を示す形式です。ホーム > カテゴリ > 現在のページ のように固定の経路を表示するため、どのユーザーが見ても同じ階層が表示されます。SEOとユーザビリティのバランスが良く、ブログや企業サイト、大規模な情報サイトまで汎用的に使えるため、一般的に推奨される形式です。
属性型
属性型は、ユーザーが選んだ検索条件やカテゴリ属性に基づいて表示する形式です。同じ製品ページでも、たどってきた条件によって表示されるパンくずが変わります。商品カテゴリや絞り込み条件が多いECサイトで使われることが多い種類です。
パス型
パス型は、ユーザーがたどってきた閲覧履歴を順番に表示する形式です。ただし、ブラウザの戻る操作と機能が重複するため、現在のWebサイトではほとんど使われません。
パンくずリストを設置するメリット
パンくずリストを設置するメリットは、ユーザビリティの向上と、検索エンジンへのサイト構造の伝達という2つの側面があります。ここでは、訪問者にとっての利便性とSEOの両面から整理します。
ページの現在地を把握しやすくなる
パンくずリストがあると、ユーザーは今サイトのどの階層にいるかを視覚的に把握できます。ユーザーは必ずしもサイトのトップから訪問してページをたどるわけではありません。検索エンジン経由で下層ページに直接アクセスした訪問者でも、ページの位置や上位カテゴリをすぐ理解できます。
上位階層へ移動しやすくなる
最後のパンくずから1レベルずつさかのぼることで、ユーザーは上位階層へ移動できます。階層が深いサイトでも目的のカテゴリへ戻りやすくなり、サイト内を回遊しやすくなります。
URL構造を理解しやすくなる
パンくずリストは、ページがどの階層に属するかをリンクの並びで示すため、サイトの構造の理解を助けます。URLがディレクトリ構造で階層化されていないサイトでも、ユーザーはパンくずリストからページの位置づけを理解できます。
クローラーがサイト構造を把握しやすくなる
パンくずリストは内部リンクとしても機能し、クローラーがサイトの階層構造を巡回・把握しやすくなります。Googleは検索結果のコンテンツを分類する際に、ページ内のパンくずリストのマークアップを使用します。同じページが異なる検索クエリで表示される場合でも、パンくずリストによってコンテンツが検索クエリの文脈の中で分類されます。正確なサイト構造の伝達はSEOの評価にも役立つとされ、これがH1で示したSEO効果にあたります。
リッチリザルトに表示される可能性がある
BreadcrumbListの構造化データを実装すると、検索結果にパンくずリストがリッチリザルトとして表示される可能性があります。検索結果の上でページの位置が示されることで、ユーザーがクリックを判断する材料になります。なお、構造化データをマークアップしていなくても、Googleがサイトの階層を自動的に判別し、検索結果にパンくずリストを表示する場合があります。意図した階層を確実に伝えるには、構造化データでマークアップします。
パンくずリストの設置の必要性を判断する基準
パンくずリストは基本的に全ページへ設置することで、SEOとユーザビリティの両面で効果が期待できます。ただし、すべてのページで必要とは限らないため、設置の必要性はページの役割を基準に判断します。
階層構造のあるページには設置する
カテゴリから詳細ページへと続く階層構造を持つページには、パンくずリストを設置します。階層内の位置を示すことで、ユーザーの現在地の把握と、検索エンジンへのサイト構造の伝達につながります。
他ページへの内部リンクが不要なページは設置しなくてもよい
トップページやランディングページのように、他ページへの内部リンクの導線が不要なページには、無理に設置する必要はありません。トップページは階層の起点で上位がなく、ランディングページは回遊よりも単一の目的に向けて設計されるためです。
パンくずリストの設置位置
パンくずリストの設置位置は、ユーザーがすぐ見つけられる場所を選びます。パソコンとスマホでは表示できる幅が異なるため、デバイスごとの対応も検討します。
ヘッダー直下に設置するとわかりやすい
パンくずリストは、ページ上部のヘッダー直下、メインコンテンツの直前に設置するのが一般的で推奨される位置です。ページを開いてすぐ目に入るため、ユーザーは現在地と階層をすぐ把握できます。
スマホでは横スクロールや短縮表示で対応する
スマホでは画面の幅が狭く、階層が深いとパンくずリストが折り返して読みにくくなります。横スクロールで1行に収める、または途中の階層を短縮表示にするなどの方法で対応します。
パンくずリストのHTMLの書き方
パンくずリストを画面に表示するには、HTMLで階層を記述します。手作業で書く方法と、WordPressなどのCMSで設置する方法があります。
olタグとliタグで階層を表す
パンくずリストは順序のある階層を表すため、olタグとliタグで記述します。olタグの中に各階層をliタグで並べ、上位ページへはaタグでリンクを設定し、現在のページはリンクなしのテキストにします。
WordPressでパンくずリストを設置する方法
WordPressでは、テーマにパンくずリストの機能が含まれている場合があり、含まれていない場合はプラグインを使って設置できます。プラグインを使うと、HTMLを直接編集せずに画面へパンくずリストを表示でき、構造化データに対応したプラグインもあります。
パンくずリストの階層設計のコツ
パンくずリストの階層は、サイトの階層設計をそのまま映します。階層が深すぎても浅すぎてもユーザーは使いにくくなるため、コンテンツや商品の数に応じて階層の量を最適化します。
品質の低い絞り込み階層はパンくずに入れない
内部リンクを増やす目的で、中身の薄いページをパンくずの階層に設定することは好ましくありません。リンクをクリックした先の商品点数やコンテンツ数が極端に少ない状態を作らないようにします。例として、次のパンくずと商品点数を考えます。
TOP > Tシャツ > Tシャツ（赤） > Tシャツ（赤×Sサイズ） > 商品ページ
- Tシャツ：商品500点
- Tシャツ（赤）：商品50点
- Tシャツ（赤×Sサイズ）：商品1点
このケースでは、「Tシャツ（赤×Sサイズ）」をクリックしても商品が1点しかなく、商品ページとほぼ同じ内容のため、ページとしての品質は低く、ユーザーにとってもストレスになります。この場合は TOP > Tシャツ > Tシャツ（赤） > 商品ページ のように、一覧として成立する階層までに整理します。
コンテンツが多いのに階層が少ない場合は階層を追加する
コンテンツや商品が多いのに階層が少なすぎる場合は、階層を増やすことで利便性が高まります。同じ商品点数で、パンくずが TOP > Tシャツ > 商品ページ しかない場合、似た商品を探すユーザーは500点が並ぶTシャツの一覧まで戻る必要があり、ストレスになります。TOP > Tシャツ > Tシャツ（赤） > 商品ページ のように「Tシャツ（赤）」の階層を加えると、近い条件の商品一覧へ戻りやすくなります。
パンくずリストの構造化データの実装
構造化データは、ページに関する情報を提供し、ページコンテンツを分類するための標準化されたデータ形式です。パンくずリストでは、schema.orgのBreadcrumbListを使ってマークアップし、検索エンジンに階層情報を伝えます。
itemListElementに2つ以上のListItemを追加する
BreadcrumbListは、リスト内のすべての要素を保持するコンテナです。必須プロパティはitemListElementで、ListItemの配列を指定します。パンくずリストとして認識させるには、少なくとも2つのListItemを追加します。
ListItemにname・item・positionを設定する
各ListItemには、name・item・positionの3つを設定します。
- name：ユーザーに表示されるパンくずのタイトルとなるテキスト
- item：そのパンくずが指すページのURL
- position：パンくずの位置を示す整数で、1がリストの最初を表す
itemは必須ですが、パンくずリストの最後のアイテムでは省略でき、省略した場合はGoogleがそのページのURLを使用します。
JSON-LDで記述する
構造化データの記述形式には複数ありますが、GoogleはJSON-LDを推奨しています。JSON-LDは、HTMLの本文と分けてscriptタグの中にまとめて記述できるため、管理しやすい形式です。@typeにBreadcrumbListを指定し、itemListElementにListItemを順番に並べます。
経路が複数あるページには複数のBreadcrumbListを指定する
1つのページへの経路が1つの場合は、BreadcrumbListを1つ指定します。複数の経路からたどり着けるページには、1ページに複数のBreadcrumbListを指定できます。複数のパンくずリストを設定しても、検索順位に悪影響はありません。ページに複数のパンくずリストを表示する場合は、それぞれのパンくずリストを構造化データでマークアップします。
パンくずリストの構造化データの検証と確認方法
実装したあとは、次の手順で検証とリリースを行います。
- リッチリザルトテストでマークアップにエラーがないかを検証する
- URL検査ツールでGoogleからの見え方を確認する
- サイトマップを送信して更新を伝える
詳しい仕様はGoogle 検索セントラルのパンくずリストの構造化データで確認できます。
公開前はリッチリザルトテストで検証する
公開前や制作中のページは、リッチリザルトテストでマークアップにエラーがないかを検証します。確認方法はURLの入力とソースコードの貼り付けの2つがあり、ページを公開する前のコードの段階でも検証できます。
公開後はSearch Consoleのリッチリザルトレポートで確認する
公開後にGooglebotがページをクロールすると、認識状況がSearch Consoleに反映されます。リッチリザルトのステータスレポートでは、パンくずリストの有効・無効の件数と該当URLをサイト全体で確認できます。一覧にはサンプルとして最大1,000件のURLが表示されます。個別のURLの認識状況を確認したいときは、URL検査ツールを使います。
パンくずリストを設置するときの注意点
パンくずリストを設置するときは、表示するテキストや、サイトの構造との整合に注意します。設定そのものよりも、サイト設計との一貫性が重要です。
パンくずのテキストはリンク先ページの見出しと合わせる
各パンくずのアンカーテキストには、リンク先ページの内容を表すテキストを使います。クヌギでは、パンくずのテキストをリンク先URLのH1と完全一致または部分一致させることを推奨しています。アンカーテキストとリンク先の見出しがそろっていると、ページ同士の関連性が検索エンジンに伝わりやすくなり、似たテーマのページが多いサイトでも、類似・重複と判断されにくい構成に整理できます。
カテゴリ名は内容がわかる具体的な文言にする
パンくずに表示するカテゴリ名は、何のページかがわかる具体的な文言にします。あいまいな名前は、ユーザーも検索エンジンもページ内容を理解しにくくなります。検索キーワードを含む文言が望ましいですが、あくまで自然な範囲にとどめます。
- 良い例：TOP > 会社案内 > アクセス方法
- 良くない例：（上位表示を狙うキーワード）TOP > 会社案内 > アクセス方法
キーワードを詰め込んだ階層名は不自然になり、かえってユーザーの理解を妨げます。
サイトの階層設計と整合させる
パンくずリストはサイトの階層設計に依存するため、構造そのものを正しく設計することが前提です。関連性のないカテゴリへリンクすると、ユーザーの理解とサイト構造の伝達の両面で支障が出ます。また、同じ階層のページなのにパンくずの上位階層が異なるなど、ページ間で階層構造に矛盾が生じないようにします。表記に矛盾があると検索エンジンが混乱し、サイト構造を正しく伝えられない可能性があります。
内部リンクには正規URLを記述する
パンくずの内部リンクには、正規URLを記述します。URL末尾のスラッシュの有無も統一し、同じページへのリンクが複数の表記で混在しないようにします。リンク先の表記が揺れていると、検索エンジンに重複したURLを伝えることになります。
パンくずを表示していないページに構造化データだけを記述しない
ページ上にパンくずリストを表示していないのに、構造化データだけを記述する方法は避けます。構造化データは、ページに実際に表示されている情報をマークアップすることが前提です。パソコン版にはパンくずがあるのにスマートフォン版にはないなど、デバイスによって表示が異なる場合は特に注意します。
kunugi SEO Checkerでパンくずリストの構造化データを確認する
実装したパンくずリストの構造化データは、ツールを使って確認できます。クヌギが無料で提供するChrome拡張機能のkunugi SEO Checkerを使うと、閲覧中のページで構造化データの実装状況を確認できます。
構造化データタブでパンくずリストの実装状況を確認する
kunugi SEO Checkerのサイドバーにある構造化データタブでは、ページ内のJSON-LD・Microdata・RDFaを検出します。BreadcrumbListが実装されているか、必須プロパティが満たされているかを確認でき、リッチリザルトテストへのリンクも生成されます。デベロッパーツールを開かずに、閲覧中のページで実装状況を把握できます。
基本要素タブでアンカーテキストとリンクを一括取得する
kunugi SEO Checkerの基本要素タブにあるリンク要素では、閲覧中のページのアンカーテキストとリンク先URLを一括取得できます。パンくずのテキストがリンク先ページと合っているかを確認するのに役立ちます。
