パンくずリストとは？SEOでの役割と作り方、構造化データの書き方を解説

パンくずリストとは、「ホーム › サービス › SEO対策」のように、いま見ているページがサイトのどの階層にあるかを示す、ページ上部のナビゲーションです。

上の階層への内部リンクにもなるため、SEOの土台として整えたい部品です。本記事では、役割と作り方、構造化データの書き方と確認方法を解説します。

なお、パンくずリストを含めたサイトの内部構造を見直したい方は、カルテットコミュニケーションズのSEOコンサルティングの無料相談もご活用ください。

サイトの階層と内部リンクの状態を確かめ、直す順番を一緒に整理します。

パンくずリストとは？サイトの中の現在地を示すナビゲーション

パンくずリストは、多くのサイトで、ページの上部やタイトルの近くに置かれている小さなリンクの列です。

ネットショップの商品ページや、コラムの記事ページなど、階層の深いページほど役に立ちます。

定義①｜ページの位置を、階層の順に1行で示す

パンくずリストには、ホームから現在のページまでの経路が、上の階層から順に並びます。

ページに表示されるパンくずリストは、そのページがサイト階層内のどこに位置するかを示しており、ユーザーはサイトを効果的に理解し、移動できます。

引用元：Google検索セントラル「パンくずリスト（BreadcrumbList）の構造化データ」

ユーザーは、パンくずの途中のリンクを押すことで、1つ上や2つ上の階層へすぐに戻れます。

パンくずリストは、サイトの中で迷わないための「現在地の表示」だと考えましょう。

定義②｜名前の由来と、よく使われる形

名前の由来は、童話「ヘンゼルとグレーテル」で、森で迷わないように落としていったパンくずの話だといわれています。

パンくずリストには、サイトの階層を示す形のほか、商品の属性を並べる形や、見てきたページの履歴を並べる形もあると説明されることがあります。

SEOやサイトの分かりやすさの面で一般的なのは、サイトの階層を示す形で、本記事でもこの形を前提に解説します。

迷ったら、ホームから現在のページまでの階層を示す形を選びましょう。

定義③｜検索結果での表示はパソコン版だけになった

以前は、Googleの検索結果でも、URLの部分にパンくずの形で階層が表示されていました。

しかし2025年1月、Googleはモバイルの検索結果でパンくずを表示しない変更を始めると発表しました。

本日より、Google 検索を利用できるすべての地域と言語で、モバイル検索結果にパンくずリストを表示しないようにする変更を開始します（パソコン版の検索結果には、引き続き表示されます）。

引用元：Google検索セントラル ブログ「モバイル版の検索結果に表示される URL 要素をシンプル化」（2025年1月23日）

構造化データのドキュメントでも、この機能はパソコン版に対応したものと説明されています。

検索結果の見た目が変わっても、ページ上でのパンくずの役割は変わりません。

パンくずリストがSEOに役立つ理由

パンくずリストは、順位を直接上げる仕掛けではなく、サイトの構造を分かりやすくする部品です。

その結果として、Googleにもユーザーにも、ページの位置が伝わりやすくなります。

理由①｜上の階層への内部リンクが、すべてのページにそろう

内部リンクとは、同じサイトの中のページどうしをつなぐリンクのことです。

パンくずリストを全ページに置くと、どのページからも、カテゴリやホームへのリンクが同じ形で張られます。

Google は、ページの関連性を判断し、クロールする新しいページを見つける際にリンクをシグナルとして使用します。

引用元：Google検索セントラル「Google のリンクに関するベスト プラクティス」

メニューに載っていない記事でも、カテゴリのページとつながることで、サイトの中で孤立しにくくなります。

パンくずは、内部リンクを全ページにそろえて張るための仕組みとして使いましょう。

理由②｜ページどうしの関係が伝わりやすくなる

パンくずのリンクの文字にはカテゴリの名前が入るため、そのページがどの分野に属するかが伝わります。

たとえば「SEO対策 › 内部対策代行」と並べば、内部対策代行のページがSEO対策の一部だと分かります。

カテゴリの分け方が重なると、似たページどうしが競合する原因にもなるため、キーワードカニバリゼーションとはもあわせてご覧ください。

カテゴリの名前は、検索する人が使う言葉で付けると、ページの関係が伝わりやすくなります。

理由③｜ユーザーが上の階層へ戻りやすくなる

検索から記事に着いた人がほかの記事やサービスを見たいとき、パンくずがあれば1回のクリックで上の階層へ戻れます。

同じカテゴリの一覧に戻れると、関連する記事を続けて読んでもらいやすくなります。

スマートフォンでは画面が狭く、メニューを開かないと上の階層が見えないため、パンくずが近道になります。

パンくずは、検索から着いた人を、サイトの中の次のページへ案内する入口になります。

理由④｜パソコン版の検索結果で、階層が伝わる

パソコン版の検索結果では、URLの部分に、ドメインとパンくずの形で階層が表示されます。

どの分野のページかが検索結果で伝わると、クリックする前に内容を想像してもらいやすくなります。

ただし、構造化データを使ったコンテンツが検索結果に表示されるとは限らないと、Googleのドキュメントにも書かれています。

検索結果の表示はおまけと考え、ページ上のパンくずを正しく作ることを優先しましょう。

パンくずリストの作り方

パンくずリストは、テーマやプラグインの機能で出せる場合もありますが、仕組みを知っておくと、崩れたときに直しやすくなります。

ここでは、HTMLで書く場合を例に、手順を説明します。

手順①｜URLではなく、ユーザーがたどる経路で階層を決める

まず、ホームから各ページまでの経路を決めます。

パンくずリストには URL 構造をそのまま反映させるのではなく、ユーザーが特定のページにたどり着くまでの一般的な経路を示すことをおすすめします。

引用元：Google検索セントラル「パンくずリスト（BreadcrumbList）の構造化データ」

URLのフォルダ名が英語の略語でも、パンくずには「サービス」「SEO対策」のように、ユーザーが分かる名前を表示します。

1つのページが複数のカテゴリに属する場合は、主になるカテゴリを1つ決めておくと、表示がぶれません。

階層は、URLではなく、ユーザーが実際にたどる経路から決めましょう。

手順②｜HTMLはnav・ol・aで組む

HTMLでは、全体をnav要素で囲み、ホームから順に並ぶ項目をol要素のリストで書きます。

<nav aria-label="パンくずリスト">
  <ol class="breadcrumb">
    <li><a href="https://example.com/">ホーム</a></li>
    <li><a href="https://example.com/services/">サービス</a></li>
    <li><a href="https://example.com/services/seo/">SEO対策</a></li>
    <li aria-current="page">内部対策代行</li>
  </ol>
</nav>

上の階層へのリンクは、href属性を持つa要素で書きます。

通常、リンクが href 属性を持つ <a> HTML 要素（アンカー要素とも呼ばれます）である場合のみ、Google はリンクをクロールできます。

引用元：Google検索セントラル「Google のリンクに関するベスト プラクティス」

現在のページはリンクにせず、W3CのWAI-ARIAの解説（Breadcrumb Pattern）にならって、aria-current=”page” で現在地であることを示します。

nav・ol・a の3つで組むと、人にもGoogleにも構造が伝わるパンくずになります。

手順③｜区切り記号と折り返しはCSSで整える

「›」などの区切り記号は、HTMLに直接書かずにCSSで付けると、デザインを変えるときに1か所の修正で済みます。

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
.breadcrumb li + li::before {
  content: "›";
  margin: 0 .5em;
}

スマートフォンでは名前が長いと横にはみ出すため、flex-wrapで折り返しを許し、長いページ名は短くしておきます。

見た目の調整はCSSに任せ、HTMLは中身だけにしておきましょう。

手順④｜置き場所はページの上部にそろえる

パンくずリストは、ページの上部、タイトルの上や下など、どのページでも同じ位置に置きます。

ページによって位置が変わると、ユーザーが探す手間が増えます。

トップページは階層の起点なので、パンくずを置かなくても困ることはありません。

サイトのテンプレートで位置をそろえ、全ページに同じ形で出しましょう。

構造化データ（BreadcrumbList）の書き方

構造化データとは、ページの内容を検索エンジンに伝えるため、決められた形式で書き加える情報です。

パンくずリストでは、schema.orgのBreadcrumbListという型を使います。

書き方①｜JSON-LDでまとめて書く

構造化データの書き方には、JSON-LD、microdata、RDFaの3つがあり、Googleのドキュメントにはそれぞれの例が載っています。

表示のHTMLと切り離して書けるJSON-LDは、テンプレートで管理しやすく、弊社でもおすすめしている形式です。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "サービス",
    "item": "https://example.com/services/"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "SEO対策",
    "item": "https://example.com/services/seo/"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "内部対策代行"
  }]
}
</script>

迷ったらJSON-LDで、表示のパンくずと同じ中身を書きましょう。

書き方②｜必須のプロパティは4つ

BreadcrumbListに必須なのは、パンくずを順番どおりに並べたitemListElementです。

itemListElementの中の各ListItemには、位置を示すposition、表示する名前のname、ページのURLのitemを書きます。

positionは1から順に数え、1がリストの最初のパンくずを示します。

また、パンくずリストを指定するには、少なくとも2つのListItemを含むBreadcrumbListを定義します。

必須の4つのプロパティがそろっているかを、まず確かめましょう。

書き方③｜最後の項目とホームは省略できる

パンくずがパンくずリストの最後のアイテムである場合、item は必須ではありません。最後のアイテムに item が含まれていない場合、Google はそのページの URL を使用します。

引用元：Google検索セントラル「パンくずリスト（BreadcrumbList）の構造化データ」

また、最上位のパス（サイトのドメイン名やホスト名）や、ページ自体のListItemは、含める必要がないとされています。

そのため、表示には「ホーム」を出しても、構造化データでは省いてかまいません。

表示と構造化データで、省いてよい項目の扱いを決めておきましょう。

書き方④｜経路が複数あるページは複数指定できる

1つのページに、サイトの中から行ける経路が複数ある場合は、パンくずリストを複数指定できます。

たとえば、商品ページが「ブランド別」と「用途別」の両方の一覧から行ける場合などです。

ただし、ページに表示するパンくずと食い違うと分かりにくくなるため、表示も含めて設計しましょう。

複数の指定は、実際にサイトの中に複数の経路があるときだけに使いましょう。

設定したあとの確認方法

パンくずリストはテンプレートで全ページに出すことが多いため、1か所の間違いがサイト全体に広がります。

公開の前後で、次の3つの確認をしておきましょう。

確認①｜リッチリザルトテストでコードを確かめる

リッチリザルトテストとは、ページの構造化データが、検索結果の機能に使える形になっているかを確かめられるGoogleのツールです。

リッチリザルトテストにURLやコードを入れると、BreadcrumbListが検出されるかと、エラーの有無が分かります。

重大なエラーは直し、重大ではない問題も、構造化データの品質を高めるために直すことが勧められています。

公開の前に、テスト用のページでリッチリザルトテストを通しておきましょう。

確認②｜URL検査ツールで公開ページを確かめる

公開したページは、Search ConsoleのURL検査ツールで、Googleがページを取得できるかを確かめます。

robots.txtやnoindex、ログインの要件でページがブロックされていないかも、あわせて確認します。

Search Consoleの基本はGoogle Search Consoleについての解説を、noindexの扱いはnoindexとnofollowの解説をご覧ください。

テストに通っても、公開ページがGoogleに見えているかは別に確かめましょう。

確認③｜Search Consoleのレポートで推移を見る

ページがインデックスに登録されると、Search Consoleで、パンくずリストのリッチリザルトのレポートを確認できます。

Googleのドキュメントでは、有効な項目が増え、無効な項目が増えていない状態が理想とされています。

テンプレートやテーマを変えたあとに無効な項目が増えたら、新しいテンプレートでパンくずが崩れていないかを疑います。

内部リンクやテンプレートの点検から任せたい場合は、カルテットのSEOコンサルティングでもご相談を受け付けています。

サイトの見た目を変えたら、レポートでパンくずの無効な項目を確かめる習慣を付けましょう。

パンくずリストのよくある間違い

パンくずリストは、見た目が出ていても、中身や作り方に問題があることがよくあります。

よくある4つの間違いを確かめておきましょう。

間違い①｜URLのフォルダ名をそのまま並べる

「svc」「seo-in」のようなURLのフォルダ名を、そのままパンくずの名前にしてしまう例です。

ユーザーには意味が伝わらず、Googleも、URLの構造ではなくユーザーの経路を示すことを勧めています。

パンくずの名前は、ページのタイトルやカテゴリ名と同じ、分かる言葉にしましょう。

間違い②｜表示と構造化データの中身が違う

表示のパンくずはテーマで出し、構造化データは別のプラグインで出していると、名前や順番が食い違うことがあります。

Googleは、構造化データに関するガイドラインに違反する手法を検出した場合、手動による対策が講じられることがあるとしています。

表示と構造化データは同じテンプレートやプラグインから出力し、意図せず二重に出ていないかも確かめます。

パンくずの出力元を1つにまとめ、表示と構造化データを同じ中身にしましょう。

間違い③｜リンクをスクリプトだけで作る

クリックするとスクリプトで移動する作りは、見た目はリンクでも、Googleがたどれない場合があります。

Googleのドキュメントでも、href属性のないa要素や、スクリプトのイベントでリンクとして動くタグからは、URLを信頼できる形で取り出せないとされています。

パンくずのリンクは、a要素のhrefに移動先のURLを書きましょう。

間違い④｜スマートフォンで横にはみ出す

ページ名が長いと、スマートフォンでパンくずが横にはみ出し、画面が左右に揺れる原因になります。

折り返しを許すか、長い名前は短い表示名にして、スマートフォンでの見え方を確かめましょう。

パンくずは、スマートフォンの実機の画面で表示を確かめてから公開しましょう。

パンくずリストでよくある質問

最後に、パンくずリストについてよく出る質問に答えます。

サイトの規模や使っているCMSによって最適な形は変わるため、自社のサイトに当てはめて考えてください。

質問①｜小さなサイトにもパンくずリストは必要ですか？

ページ数が少なく、階層が1段しかないサイトでは、パンくずの効果は大きくありません。

一方で、記事やサービスが増えて階層が2段以上になるなら、早めに入れておくと、あとでテンプレートを直す手間が省けます。

階層が深くなる予定があるなら、早めにテンプレートへ組み込んでおきましょう。

質問②｜モバイルで表示されないなら、構造化データは不要ですか？

モバイルの検索結果で表示されなくなっても、パソコン版の検索結果では、引き続きパンくずのマークアップが使われます。

Googleのブログでも、パンくずのマークアップを使っている場合は、何もする必要はないとされています。

すでに入れている構造化データは、外さずにそのまま使い続けましょう。

質問③｜WordPressではどう設定しますか？

WordPressでは、使っているテーマにパンくずの機能があるか、SEO系のプラグインに出力の機能があるかを先に確かめます。

テーマとプラグインの両方で出すと、表示や構造化データが二重になることがあるため、どちらか1つに決めましょう。

設定したあとは、リッチリザルトテストで、BreadcrumbListが意図したとおりに出ているかを確かめます。

WordPressでは、パンくずを出す仕組みを1つに決めることから始めましょう。

質問④｜パンくずリストだけで内部リンクは足りますか？

パンくずは上の階層へのリンクを張る仕組みなので、同じ階層の関連記事や、下の階層へのリンクは別に用意します。

記事の本文から関連するページへリンクしたり、カテゴリのページに記事の一覧を置いたりして、内部リンクを補いましょう。

ページの名前の付け方もあわせて見直す場合は、SEOで勝つタイトルの付け方も参考にしてください。

パンくずは内部リンクの土台で、本文や一覧のリンクと組み合わせて完成すると考えましょう。

まとめ｜パンくずリストは「迷わない道しるべ」と「内部リンク」を兼ねる

パンくずリストは、ユーザーに現在地を示し、Googleにページの関係を伝える、小さくても大切な部品です。

まずは自社のサイトで、パンくずの名前と経路、リンクの作り方、構造化データの中身がそろっているかを確かめましょう。

テンプレートの変更のたびに崩れやすいため、確認の手順を決めておくと安心です。

サイト全体の内部構造から見直したい方は、カルテットコミュニケーションズのSEOコンサルティングにお気軽にご相談ください。