ECサイトのパンくずリストとは？カテゴリ階層を伝えるSEO設計
目次
パンくずリストは、閲覧中のページがサイト内のどこにあるかを示す案内です。ECサイトでは「ホーム ＞ メンズファッション ＞ 靴 ＞ スニーカー」のように上位カテゴリを並べ、利用者が一つ前の売り場へ戻れるようにします。
単なる装飾ではなく、カテゴリ同士を内部リンクでつなぎ、ページの関係を分かりやすくする役割があります。表示、リンク先、構造化データを一致させ、カテゴリ変更時にも更新できる仕組みにすることが大切です。
パンくずリストの役割
商品ページへ検索や広告から直接訪れた人は、サイトのメニューをたどっていません。パンくずリストがあれば、上位カテゴリへ戻り、似た商品を見比べられます。商品が希望と違ったときの行き止まりを減らせます。
検索エンジンにとっても、ページ同士のリンク関係を知る手掛かりになります。ただし、パンくずリストを追加するだけで順位が上がると保証されるものではありません。カテゴリ構造、通常のナビゲーション、商品リンクと合わせて整えます。
カテゴリ階層と表示を一致させる
パンくずリストは、社内の管理階層ではなく、公開サイトで利用者が理解できる階層を示します。「部門コードA ＞ 仕入区分3」のような内部分類を出さず、画面上のカテゴリ名を使います。
メニューでは「収納家具 ＞ 本棚」なのに、パンくずでは「リビング ＞ 家具 ＞ 収納」のように異なる関係を示すと混乱します。複数の分類軸がある場合は、代表となる階層と関連カテゴリへの導線を分けます。
各階層をリンクにする
現在ページを除く各項目は、対応する上位ページへ移動できるリンクにします。Googleがクロールできるよう、href属性を持つa要素で実装することが基本です。文字を並べるだけ、クリックイベントだけで遷移する状態は避けます。
リンク先は転送前の旧URLではなく、現在の正規URLへ直接向けます。カテゴリ変更やURL移行後に古いリンクが残りやすいため、テンプレートとカテゴリマスタの更新を確認します。
アンカーテキストは実際のカテゴリ名を使う
パンくずのリンク文言には、「戻る」「一覧」のような曖昧な表現ではなく、「スニーカー」「メンズシューズ」などリンク先を表す名称を使います。キーワードを追加するために、メニューより長い宣伝文へ変える必要はありません。
「HOME」「トップ」などの表記はサイト内で統一します。長いカテゴリ名はモバイルで折り返すことがあるため、主要な意味を残して簡潔にします。省略表示を使う場合も、リンク先が分からなくならないようにします。
商品が複数カテゴリに属する場合
一つの商品が「通勤バッグ」「防水バッグ」「レディースバッグ」に属することはあります。アクセス経路ごとにパンくずを変える方法と、代表カテゴリに固定する方法があります。どちらを選ぶ場合も、商品URLやcanonicalが経路によって変わらないようにします。
利用者に複数の戻り先を示したい場合は、主なパンくずを一つ表示し、別途「関連カテゴリ」として案内できます。複数のパンくずを構造化データで表す実装もありますが、実際のサイト構造と利用者に見える内容を正確に反映してください。
BreadcrumbList構造化データ
パンくずリストは、BreadcrumbListの構造化データで表現できます。各項目の順序、名称、URLを記述し、画面上のパンくずと一致させます。構造化データはページ内容を検索エンジンへ伝える手掛かりになります。
追加したからといって、検索結果での特別な表示や順位向上が保証されるわけではありません。Googleのガイドラインに沿い、リッチリザルトテストなどで記述を確認します。URL変更時に構造化データだけ古いまま残らないようにします。
モバイルでの見せ方
階層が深いサイトでは、パンくずが横に長くなります。横スクロール、折り返し、省略などの方法がありますが、現在地と一つ上のカテゴリが分からなくならないことが重要です。
スマートフォンで完全に非表示にすると、利用者の戻り道と重要な内部リンクが失われます。デザイン上コンパクトにしても、DOM内に利用可能なリンクとして残り、タップしやすいことを確認します。
URLパスとパンくずが違う場合
古いシステムの都合で、URLが「/item/c123/」でも、画面上は「生活家電 ＞ 掃除機」と表示することがあります。パンくずは利用者が理解できる公開階層を優先し、URL文字列を機械的に分解しません。
URL構造を変更するかどうかは別の判断です。パンくずを正しくするためだけに流入のあるURLを変えず、必要な場合は転送や内部リンク更新を含む移行計画を立てます。
商品ページ以外でも使う
カテゴリページ、ブランドページ、ガイド記事でも現在地を示せます。記事では「ホーム ＞ お役立ち情報 ＞ 家具の選び方」のように、コンテンツの分類を表します。
一方、キャンペーンの一時的な流入経路や検索フィルタを階層として混ぜると、パンくずが不安定になります。恒久的な情報構造と一時的な導線を分けます。
アクセシビリティを確認する
パンくず全体がナビゲーションであることを支援技術へ伝え、現在ページの項目を区別します。区切り記号を読み上げすぎない実装、十分なコントラスト、タップ領域も確認します。
省略記号だけで中間階層を隠す場合は、キーボードや読み上げでも展開できるようにします。SEOのためのリンクではなく、実際に利用できるナビゲーションとして作ります。
大規模サイトでの自動生成
商品マスタに代表カテゴリIDを持たせ、カテゴリ階層からパンくずを自動生成すると更新漏れを減らせます。複数所属の場合の優先ルール、廃止カテゴリの除外、名称変更の反映を定義します。
自動生成結果を定期的に一覧化し、同じ階層の繰り返し、空の名称、トップへの誤リンク、過度に長い階層を検出します。構造化データも同じデータ源から出力すると不一致を減らせます。
ECサイトでの具体例
家電サイトのロボット掃除機の商品ページを考えます。「ホーム ＞ 生活家電 ＞ 掃除機 ＞ ロボット掃除機 ＞ 商品名」と表示します。利用者はロボット掃除機一覧や掃除機全体へ戻って比較できます。
「ペット家庭向け」という特集にも商品を掲載している場合、特集を正式な親カテゴリにする必要はありません。商品ページの主パンくずは商品分類に固定し、本文や関連リンクから特集へ案内します。特集終了で階層が崩れることも防げます。
カテゴリ名を「自動掃除機」から「ロボット掃除機」へ変更した場合は、表示、リンク先、構造化データ、title、h1を一緒に確認します。
よくある間違い
一つ目は、現在のURLパスを機械的に分割して名称にすることです。URLのディレクトリ構造と公開カテゴリの意味が一致しない場合、利用者に分からない文字列が表示されます。
二つ目は、すべての項目がトップページへリンクしている、またはリンク切れになっている状態です。見た目だけでは気付きにくいため、主要テンプレートで実際にクリックして確認します。
三つ目は、パンくず構造化データだけを追加し、画面上にパンくずがないことです。利用者に見えるナビゲーションを整えたうえで、構造化データを補助として使います。
確認項目
- 公開サイトのカテゴリ階層と一致しているか
- 上位項目が正規URLへリンクしているか
- リンク文言から遷移先の内容が分かるか
- 商品が複数カテゴリに属する場合のルールがあるか
- モバイルでも現在地と上位カテゴリが分かるか
- BreadcrumbListが表示内容と一致しているか
- カテゴリ変更時に自動で更新されるか
パンくずリストを変更するときの確認
カテゴリの統合や名称変更を行うと、パンくずリストだけが旧階層のまま残ることがあります。表示は新名称でもリンク先が旧URLという状態も起こるため、画面上の文字、リンクURL、構造化データを別々に確認します。商品テンプレートのキャッシュが更新されているかも見落とせません。
複数カテゴリに属する商品では、閲覧経路によってパンくずを変える方式と、代表カテゴリに固定する方式があります。どちらを採用する場合も、URLを再読み込みしたときに表示が不安定にならず、代表となる経路が社内で説明できるようにします。ユーザーの履歴だけに依存すると、検索から直接来た場合の階層が定まりません。
公開後は、主要な商品タイプごとにサンプルURLを選び、親カテゴリへのリンク切れ、旧URLへの転送、構造化データのエラーを定期確認します。カテゴリ数が多いサイトでは、商品マスタの代表カテゴリを基準に自動テストを行い、例外だけを人が見る方法が現実的です。
パンくずだけで回遊を完結させない
パンくずリストは上位階層へ戻るための導線であり、似た商品を横断して探す導線をすべて担うものではありません。関連カテゴリ、ブランド、用途別ガイドなどは、商品説明や一覧の周辺に別のリンクとして配置します。役割を分けることで、階層は安定させたまま、多様な商品探索に対応できます。
まとめ
パンくずリストは、現在地を示し、上位カテゴリへ戻るための内部リンクです。公開カテゴリの階層と名称を使い、正規URLへクロール可能なリンクでつなぎます。
まず商品ページとカテゴリページを一つずつ開き、メニュー、URL、パンくず、h1の関係を比較してください。表示の不一致や旧URLへのリンクを直したうえで、構造化データも同じ内容になっているか確認します。
