パンくずリストとは？企業サイトでの作り方と設置後の確認

ページの案内を整理する準備を表すAI生成イメージです。実際の顧客資料や制作実績ではありません。

パンくずリストは、「ホーム ＞ サービス ＞ 設備点検」のように、今見ているページがサイトのどこにあるかを示す案内です。上の階層へ移動するリンクも兼ねます。作るときは、先にページの親子関係を決め、表示する名前と行き先をそろえます。本記事では、中小企業のWeb担当者が制作担当と相談できるよう、設計例と設置後の確認方法をまとめます。

パンくずリストとは、ページの位置と上位ページを示す案内

企業サイトを見ていると、ページの見出し付近に「ホーム ＞ 会社案内 ＞ 拠点一覧」のような小さな案内があります。これがパンくずリストです。W3Cの説明では、現在のページの親に当たるページへのリンクを、階層順に並べるものとされています。英語ではbreadcrumbと呼ばれます。

出典：Breadcrumb Pattern | APG | WAI | W3C

たとえば検索結果から拠点一覧へ直接来た人は、その会社のトップページをまだ見ていないかもしれません。それでも「会社案内」の中の情報だと分かり、会社全体の説明へ移動できます。パンくずは、トップページから順番に閲覧した人だけに向けた案内ではありません。

本記事では、サイト内の親子関係を表す「階層型」を中心に扱います。「ホーム ＞ 会社案内 ＞ 拠点一覧」と出ていても、その人がその順番で訪問したことを意味しません。実際の閲覧履歴を示す案内や、商品の絞り込み条件を示す表示とは、何を伝えるかを分けて考えます。

メニューがあるからパンくずが不要とも、パンくずがあるからメニューを減らせるとも、一律には言えません。サービス詳細からサービス一覧へ移りたい人と、会社案内からお問い合わせへ進みたい人では、必要な案内が異なります。部品を増やす前に、どの移動を助けたいのかを決めましょう。

自社サイトに必要なパンくずを、階層から決める

最初に、自社の代表的なページを一つ選びます。サービス詳細、製品紹介、コラム記事など、一覧やカテゴリとの関係があるページが考えやすい対象です。そのページに初めて来た人が、関連する情報の一覧へ移るとしたら、どのページを案内するのが自然かを書き出します。

以下は説明用の架空の設備点検サービスです。実在する会社の構成や成果ではありません。トップページの下に「サービス」があり、その一覧に「空調設備の点検」と「照明設備の点検」が並んでいるとします。空調設備の点検ページでは、次のような案内を候補にできます。

この場合、「サービス」を選んで開くページに、空調と照明の点検サービスが実際に案内されているかが重要です。名前だけをサービス一覧にして、関係のないお知らせ一覧へつなぐと、利用者は予想した場所へ行けません。階層名、リンク先、移動後の内容を一組で考えます。

パンくずを置くためだけに、中間のカテゴリを何段も増やす必要はありません。「サービス ＞ 法人向け ＞ 建物向け ＞ 空調設備の点検」としても、それぞれに整理されたページがなければ案内として使いにくくなります。決まった階層数を目標にするより、上位ページへ戻ったときに何を選べるかを確認します。

また、URLに含まれる英語やスラッシュの数を、そのまま画面の階層にする必要はありません。Googleのガイドも、URL構造の複製ではなく、利用者がページへたどり着く一般的な経路を示すよう勧めています。見た目を合わせるためだけに既存URLを変えるのではなく、まず情報の分類を整理します。

出典：パンくずリスト（BreadcrumbList）のマークアップを追加する方法 | Google 検索セントラル  |  Documentation  |  Google for Developers

一つの記事が「設備管理」と「省エネ」の両方に関わる場合は、複数カテゴリの扱いも決めます。主に所属させるカテゴリを一つ決める案、実際に用意された複数の経路を示す案などを、利用者の探し方に合わせて検討します。単にキーワードを増やすために、内容と関係の薄いカテゴリを並べることは避けましょう。

一方、内容が1ページで完結するサイトや、上位の一覧へ移る必要がほとんどないページでは、パンくずを追加する価値が小さいこともあります。必要性に迷うなら「ここに直接来た人が、所属する一覧へ移れると助かるか」を考えます。サイト全体の整理が先なら、関連記事の「ホームページのページ構成」から進められます。

作り方の基本：表示名・リンク先・現在地をそろえる

階層が決まったら、各項目に表示する名前とURLを組にします。担当者が実装しやすいよう、まずは1ページ分の短い仕様に落とし込みます。次の表も、先ほどの架空の設備点検サイトを使った記入例です。URLは実際のサイトから確認して転記し、存在しないページへのリンクを作らないようにします。

表示名を短くする場合も、行き先を取り違えない範囲にします。たとえば「空調設備の点検・報告書作成サービス」という長い見出しを「空調設備の点検」とするなら、ほかのサービスと区別できるかを確認します。「サービス1」など社内だけで通じる呼び名に置き換えると、初めて訪れた人には意味が伝わりません。

WordPressを使っている場合は、新しいプラグインを探す前に、現在のテーマや導入済みプラグインで何が出力されているかを担当者と確認します。画面の表示と検索用データが別の場所から出る場合も考えられます。「どの設定が見た目を作り、どの設定がデータを出すのか」を把握してから変更すると、二重表示や不整合を調べやすくなります。

自作のHTMLで実装する場合、担当者には単に「＞で文字を並べる」だけでなく、ナビゲーションのまとまりと順序を伝える構造も確認してもらいます。W3Cの例は、名前を付けたnav要素と順序付きリストを使っています。現在のページをリンクにする場合はaria-current="page"で現在地を示す考え方があり、リンクにしない要素の場合、この属性は任意です。

出典：Breadcrumb Pattern | APG | WAI | W3C

出典：Breadcrumb Example | APG | WAI | W3C

この説明は、特定のコードをそのまま貼ればすべてのサイトで完成するという意味ではありません。使っているテーマや画面構成に合わせて、表示、リンク、読み上げを確認します。W3Cの実装例にも、ブラウザや支援技術との組み合わせでの検証が必要だと示されています。

出典：Breadcrumb Example | APG | WAI | W3C

画面のパンくずと、検索用の構造化データは別に確認する

画面に「ホーム ＞ サービス」と表示されていることと、Google向けの構造化データが適切に出ていることは、同じ確認ではありません。構造化データとは、ページの情報を決まった形式で表す記述です。パンくずを表す種類にはBreadcrumbListが使われます。見た目が整っていても、データ側の名前やURLが古い可能性があります。

出典：パンくずリスト（BreadcrumbList）のマークアップを追加する方法 | Google 検索セントラル  |  Documentation  |  Google for Developers

たとえば画面では「サービス ＞ 空調設備の点検」なのに、データには以前の「製品 ＞ 空調機器」が残っていたら、担当者に両方を照合してもらいます。Googleの一般ガイドラインは、構造化データがページ内容を正確に表すことを求めています。検索向けにだけ都合のよい分類や文言を入れるのではなく、利用者への案内と意味をそろえます。

出典：Google 検索上の構造化データ ガイドライン | Google 検索セントラル  |  Documentation  |  Google for Developers

Googleのパンくず仕様では、順序を表すposition、項目のname、行き先のitemなどを扱います。少なくとも2つのListItemが必要で、最後の項目のitemは省略できるなど、項目ごとの条件があります。自社で記述する担当者は公式の最新仕様で確認し、例をコピーしただけで実URLの差し替えを忘れないようにします。

出典：パンくずリスト（BreadcrumbList）のマークアップを追加する方法 | Google 検索セントラル  |  Documentation  |  Google for Developers

実際に複数の経路があるページについては、Googleの公式資料に複数のパンくずリストの記述例があります。「構造化データでは1経路しか指定できない」と決めつける必要はありません。ただし、何通りも記述すること自体が目的ではなく、ページの分類と利用者が使う経路に根拠があるかを先に考えます。

出典：パンくずリスト（BreadcrumbList）のマークアップを追加する方法 | Google 検索セントラル  |  Documentation  |  Google for Developers

出典：モバイル版の検索結果に表示される URL 要素をシンプル化  |  Google Search Central Blog  |  Google for Developers

「スマホのGoogle検索でパンくずが出ない」という相談と、「スマホで自社ページを開くとパンくずが切れる」という相談は、分けて調べます。前者は検索側の表示仕様、後者は自社サイトの画面の問題です。どの画面で起きた現象かを記録するだけでも、調査対象を絞れます。

構造化データはリッチリザルトテストなどで検査できますが、テストに通ることは検索結果への表示保証ではありません。Googleは、形式が正しくても必ずリッチリザルトとして表示されるわけではないと説明しています。パンくずを設置しただけで順位、クリック率、問い合わせが上がると約束することもできません。

出典：Google 検索上の構造化データ ガイドライン | Google 検索セントラル  |  Documentation  |  Google for Developers

スマホ・キーボード・リンク先まで設置後に点検する

設置後は、管理画面の設定値だけでなく、利用者が開くページで確かめます。まずPCで上位ページのリンクを一つずつ開き、表示名から予想できる内容へ移動するかを見ます。次にスマホ幅で、長いサービス名やカテゴリ名を含むページを確認します。短い名前の1ページだけでは、折り返しや見切れの問題を見落としやすいためです。

スマホで長くなる場合は、折り返して読める表示や、案内の範囲内で横に移動できる表示などを検討します。横スクロールを採用するなら、隠れた項目があると分かるか、最後まで動かせるかも確かめます。どの方法でも、ページ全体が横にはみ出す状態や、親ページのリンクにたどり着けない状態を残さないことが大切です。

区切り記号の「＞」や「／」は、項目同士の関係を見分ける助けになります。ただし読み上げでは、同じ区切りを繰り返すと案内が冗長になることがあります。W3Cの例は、視覚上の区切りをCSSで表現して、読み上げ時の不要な繰り返しを避ける方法を示しています。見た目の確認と音声での確認を分ける理由です。

出典：Breadcrumb Example | APG | WAI | W3C

現在のページ名をリンクにしない設計なら、その文字にTabキーで止まらなくても、それだけで不具合とは言えません。移動先のあるリンクを操作できることと、現在地を理解できることを別に確かめます。画面の色だけで判断しにくい場合は、下線や配置なども含めて、どこを選べるかを見直します。

制作担当へ渡す依頼メモと、更新後の管理

改修を頼むときは、「パンくずをSEOに強くしてください」だけでは、どの状態を完成とするかが分かりません。対象URL、現在の問題、希望する表示、行き先、確認範囲をまとめます。下の架空の記入例を、自社で実際に確認した内容へ置き換えて使ってください。

確認の順番は、利用者が困る問題からにします。リンクが別のページへ進む、現在地が違う、スマホで操作できない、といった問題を直し、そのうえで検索用データの不整合を確認します。「検索に表示されない」という現象だけを見て、動いている案内を何度も付け外しすることは避けましょう。

Search Consoleのレポートに項目が見当たらない場合も、それだけで未実装とは断定できません。まず公開ページでデータの出力とテスト結果を確認し、Googleがそのページを取得した状態と合わせて調べます。問題を依頼するときは、対象URLと表示されたエラーの内容を添えると、担当者が同じ箇所を調べられます。

出典：パンくずリスト（BreadcrumbList）のマークアップを追加する方法 | Google 検索セントラル  |  Documentation  |  Google for Developers

公開後は、カテゴリの変更、一覧ページの統合、サービス名の変更などを行ったときに、パンくずも点検対象に入れます。画面の案内だけを直してデータを残す、親ページを削除したのにリンクだけ残す、といったずれを防ぐためです。変更対象と担当を決めておけば、記事が増えた後も確認を引き継げます。

パンくずは、必要な情報へ移動する経路の一つです。関連記事へ進む理由を伝えるリンクや、相談へ進むボタンまで代わりに担うものではありません。サイト内の案内を広く整えるときは「内部リンクの貼り方」、配置を考えるときは「ワイヤーフレーム」、作業を依頼するときは「ホームページ更新を外注する前に」を関連記事から確認できます。

よくあるご質問