パンくずリストのSEOは画面と構造化データをそろえる｜置き方と確かめ方

サイトの作り直しや記事のテンプレートの変更で、制作会社から「パンくずリストは入れますか」と聞かれることがあります。パンくずリストは、画面に出すリンクの列と、検索エンジンに階層を伝える構造化データ(BreadcrumbList)の2つでできています。片方しか入っていない状態や2つの食い違いは、ページを画面で見るだけでは気づけません。

パンくずリストはテンプレートで一度作ると、全ページに同じ形で出ます。この記事では、パンくずリストを置く場所と階層の決め方、BreadcrumbList の書き方と確かめ方を解説します。株式会社メリルが自社のサイト4つのパンくずリストを数えた結果も、例として示しました。

記事を読めば、自社サイトのパンくずリストをどこから点検すればよいかがわかります。パンくずリストの SEO は、画面と構造化データの項目と名前をそろえ、公開後にリッチリザルト テストと Search Console で確かめるのが要点です。

パンくずリストがSEOで果たす役割

パンくずリストは、利用者のサイト内の移動を助けると同時に、検索エンジンにページの位置を伝える部品です。パンくずリストと検索の関わりは、以下の3つです。

• 検索結果の情報の分類に使われる
• 上の階層へのリンクとしてたどられる
• 検索結果のパンくずリストの表示はパソコンが対象

検索結果の情報の分類に使われる

Google 検索は、ページの本文にあるパンくずリストのマークアップを、検索結果に出すページの情報を分類するときに使います。同じページが別々の検索語で表示されても、ページの内容はパンくずリストによって、検索語の文脈の中で分類されます。

パンくずリストは、ページがサイトの階層のどこにあるかを示す部品です。利用者は、パンくずリストの最後の項目から順にさかのぼると、サイトの階層を1つずつ上に移動できます。

構造化データを書いても、検索結果に表示されるとは限りません。書いた後に確かめるのは、表示されたかどうかより先に、Google に正しく読まれているかどうかです。

上の階層へのリンクとしてたどられる

画面のパンくずリストの項目は、href 属性のある a 要素でリンクにします。Google がリンクをクロールできるのは、通常、href 属性のある a 要素だけだからです。

span 要素に URL を書いた形や、onclick の処理だけで移動する a 要素は、クロールできるリンクの書き方として勧められていません。テンプレートが JavaScript でパンくずリストを作っている場合は、出来上がった HTML に a 要素と href があるかを確かめます。

パンくずリストのリンクの文字は、カテゴリの名前のように具体的で短い語にします。良いリンクの文字は、内容が具体的で適度に簡潔で、リンク元とリンク先の両方のページに関係があるものです。

検索結果のパンくずリストの表示はパソコンが対象

Google 検索のパンくずリストの機能は、パソコン版の検索結果が対象で、Google 検索を使えるすべての地域と言語で提供されています。

スマートフォンで検索した結果を見ても、パンくずリストの構造化データが読まれているかはわかりません。読まれているかの確認には、リッチリザルト テストと Search Console を使います。

パンくずリストを置く場所と階層の決め方

パンくずリストの階層は、サイトのカテゴリの作りと合わせて決めます。テンプレートを作る前に決めておくことは、以下の5つです。

• パンくずリストは記事の見出しの上に置く
• 1つ目の項目の行き先を決める
• 階層は利用者がたどる一般的な経路で決める
• 最後の項目は今いるページの名前にする
• スマートフォンでは長い記事名を1行で切る

パンくずリストは記事の見出しの上に置く

パンくずリストは、記事の見出し(h1)より上に置きます。ページを開いてすぐに、今いる場所と上の階層への戻り道が目に入るためです。

メリルが2026年10月30日に確かめた自社の3つのサイトの記事5ページには、どれも見出し(h1)より前にパンくずリストがありました。メリルが運営するこのメディア(オウンドメディア相談室)も、記事・カテゴリ・一覧などの12ページで同じ位置です。

HTML では、パンくずリストを nav 要素で囲み、aria-label で名前を付けます。このメディアの記事のページの画面のパンくずリストは、次の形です。

<nav class="crumbs" aria-label="パンくず">
  <ol>
    <li><a href="/owned-media/">トップ</a></li>
    <li><a href="/owned-media/category/content/">記事制作</a></li>
    <li><span aria-current="page">(記事名)</span></li>
  </ol>
</nav>

(記事名)の部分には、記事の題名がそのまま入ります。今いるページの項目をリンクにする場合は aria-current="page" を付け、リンクにしない場合の aria-current は付けても付けなくてもかまいません。

1つ目の項目の行き先を決める

メディアを blog-soudan.com/owned-media/ のようなサブディレクトリに置いている場合、1つ目の項目の行き先はドメインのトップとメディアのトップのどちらかから選びます。メリルの自社サイトでも、行き先は2通りに分かれていました。

サイトごとの1つ目の項目と行き先は、以下の表のとおりです。

サイト	1つ目の項目	行き先
WWS メディア	ホーム	wwstd.jp/media/(メディアのトップ)
Web集客ブック	ホーム	hands-plus.com/media/(メディアのトップ)
オウンドメディア相談室	トップ	blog-soudan.com/owned-media/(メディアのトップ)
Touch AI	ホーム	touchai.jp/(ドメインのトップ)

1つ目の項目をメディアのトップにすると、記事の読者は1回のクリックでメディアのトップに戻れます。Touch AI は、ドメインのトップを1つ目に置き、2つ目の項目にブログのトップ(Touch AI ブログ)を置いています。

BreadcrumbList の構造化データには、ドメインのトップを含める必要がありません。行き先をどちらにするかは、記事の読者に最初に戻ってほしいページで決めます。

階層は利用者がたどる一般的な経路で決める

パンくずリストの階層は、URL の構造をそのまま写すのではなく、利用者がページにたどり着くまでの一般的な経路で決めます。URL にカテゴリが入っていなくても、パンくずリストにはカテゴリを入れられます。

このメディアの記事の URL は /owned-media/記事の名前/ の形で、URL にカテゴリは入っていません。パンくずリストでは、トップと記事の間にカテゴリを1つ入れています。WWS メディア・Web集客ブック・Touch AI も、URL にカテゴリを入れずに、パンくずリストにはカテゴリを入れていました。

1つの記事を2つのカテゴリから案内している場合は、1つのページに複数のパンくずリストを書けます。サイトの中にページへの道筋が複数あるときの書き方です。

最後の項目は今いるページの名前にする

パンくずリストの最後の項目には、今いるページの名前を入れます。項目を見ただけで、どのページにいるのかがわかるためです。

メリルの自社サイト4つは、どれも記事のページの最後の項目に、記事の題名をそのまま入れています。最後の項目は、4つのサイトのどれもリンクにしていませんでした。

BreadcrumbList の構造化データでも、最後の項目の URL(item)は省けます。省いた場合、Google はそのページの URL を使います。

WWS メディア・Web集客ブック・Touch AI は、BreadcrumbList の最後の項目にも記事の URL を書き、このメディアは書かない作りです。item を書くか省くかは、どちらを選んでも Google の説明に沿った書き方です。

スマートフォンでは長い記事名を1行で切る

記事名の長いページでは、パンくずリストの最後の項目が画面の幅を超えないようにします。はみ出した分だけページ全体が横に動くようになり、スマートフォンで読みにくくなるからです。

メリルの自社サイト3つの記事5ページでは、最後の項目に入る記事名が34〜38字でした。このメディアも、記事名は32〜40字を目安にしています。全角の文字40字を文字の大きさ13pxで並べると、字間を入れなくても520pxの幅になり、幅320pxの画面には1行で入りません。

このメディアのパンくずリストは、最後の項目の幅を画面の幅までに抑え、入りきらない部分を「…」で省く作りです。最後の項目に付けている主な指定は、次のとおりです。

.crumbs li:last-child {
  display: flex;
  min-width: 0;
  max-width: 100%;
}

.crumbs span {
  overflow: hidden;
  display: inline-block;
  min-width: 0;
  max-width: min(40em, 100%);
  text-overflow: ellipsis;
  white-space: nowrap;
}

記事名の文字数はページごとに違います。公開前の確認では、記事名が最も長いページを、幅の狭いスマートフォンで開いて確かめましょう。

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

画面のパンくずリストを検索エンジンにも正確に伝えるには、BreadcrumbList の構造化データを書きます。書き方の要点は、以下の4つです。

• JSON-LDでBreadcrumbListを書く
• 必須のプロパティはitem・name・position
• 画面のパンくずリストと同じ項目と名前にする
• 画面と構造化データを同じテンプレートで出す

JSON-LDでBreadcrumbListを書く

構造化データの形式には JSON-LD・microdata・RDFa の3つがあり、推奨される形式は JSON-LD です。パンくずリストを書くには、少なくとも2つの ListItem を含む BreadcrumbList を定義します。

BreadcrumbList は、パンくずリストのすべての項目を入れる入れ物です。項目の1つ1つを ListItem で書き、itemListElement の配列に並べます。このメディアの記事のページが出している BreadcrumbList は、次のとおりです。

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "トップ",
      "item": "https://blog-soudan.com/owned-media/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "記事制作",
      "item": "https://blog-soudan.com/owned-media/category/content/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "(記事名)"
    }
  ]
}

JSON-LD は、HTML の script 要素(type="application/ld+json")の中に書きます。このメディアでは、画面のパンくずリストのすぐ後ろに置いています。

必須のプロパティはitem・name・position

ListItem の必須のプロパティは item・name・position の3つで、書く内容は以下の表のとおりです。

プロパティ	書く内容	省ける場合
item	パンくずリストの項目が表すページの URL	最後の項目。省くと Google はそのページの URL を使う
name	利用者に表示する項目の名前	item を、name を持つ Thing で書いた場合
position	項目の順番。1が最初の項目	省けない

position は、項目の順番を示す番号です。HTML や JSON の中の並び順だけでは項目の順番を示せないため、position に1から順に整数を書きます。

item を Thing で書く形では、JSON-LD の @id に URL を書きます。メリルの自社サイト4つは、どれも item に URL の文字列をそのまま書く形でした。

画面のパンくずリストと同じ項目と名前にする

画面のパンくずリストに無い項目や名前を、BreadcrumbList に書かないようにします。構造化データは、ページの内容を正確に表している必要があり、ページの読者に表示されない内容はマークアップしない決まりです。

反対に、画面にある項目のうち、ドメインのトップ(ドメイン名やホスト名)と今いるページそのものは BreadcrumbList に含めなくてもかまいません。

省ける項目を含めるかどうかは、サイトごとに選べます。メリルの自社サイト4つは、どれも画面のパンくずリストと BreadcrumbList の項目の数と名前が同じです。ドメインのトップを1つ目に置く Touch AI も、画面と構造化データの両方に「ホーム」を入れています。

画面と構造化データを同じテンプレートで出す

画面のパンくずリストと BreadcrumbList を別々に作ると、片方だけを直したときに食い違いが生まれるため、2つは同じテンプレートから出すのが確実です。CMS を使っている場合は、CMS に組み込まれたプラグインで出すほうが簡単なこともあります。

このメディアのパンくずリストは1つの部品で、ページごとに渡した項目の一覧から画面のパンくずリストと BreadcrumbList の両方を出す作りです。記事のページは、カテゴリと記事名を部品に渡すだけで、画面と構造化データの項目と名前がそろいます。

2026年10月30日にこのメディアの公開用に書き出した14ページの HTML を数えると、12ページにパンくずリストがあり、画面と BreadcrumbList の項目の数と名前はすべて一致しました。パンくずリストを出していないのは、トップと、ページが見つからないときに出す404のページです。トップに置くと項目が1つだけになり、少なくとも2つの ListItem が要る条件を満たせないためです。

パンくずリストの構造化データの確かめ方

構造化データは、書いただけでは Google に正しく読まれたかがわかりません。公開の前後に確かめる方法は、以下の4つです。

• リッチリザルト テストで1ページずつ確かめる
• URL検査ツールでGoogleから見えるかを確かめる
• Search Consoleのパンくずリストのレポートで全体を見る
• 画面と構造化データの項目を並べて比べる

リッチリザルト テストで1ページずつ確かめる

リッチリザルト テストは、ページの構造化データが Google のリッチリザルトの対象になるかを確かめるツールです。JSON-LD・RDFa・microdata の3つの形式に対応しています。

リッチリザルト テストでの確かめ方は、以下の手順のとおりです。

1. リッチリザルト テストを開き、URL かコードを選ぶ
2. 公開済みのページは URL を入れ、公開前のページは HTML を貼り付けてテストする
3. 検出された構造化データの中に、パンくずリストがあるかを見る
4. 重大なエラーがあれば直し、重大ではない問題も直すかを検討する

出典：Google の「リッチリザルト テスト」(https://search.google.com/test/rich-results)の画面。このメディアの記事の URL を入れたところです(2026年10月31日)。Google は Google LLC の商標です。オウンドメディア相談室は、Google が推奨・提携しているものではありません。

URL でテストするページは、インターネットから誰でも開ける状態でなければなりません。パスワードをかけた公開前のページは、HTML を貼り付ける方法で確かめます。

テストのユーザー エージェントは、初めからスマートフォンになっています。プレビューの表示が、実際の検索結果と同じになるとは限りません。

URL検査ツールでGoogleから見えるかを確かめる

リッチリザルト テストで問題が無ければ、構造化データを入れたページを数ページ公開し、Search Console の URL 検査ツールで Google から見たページを確かめます。robots.txt・noindex のタグ・ログインの要求でページがブロックされていないかも、URL 検査ツールで見る項目です。

ページが問題なく表示されたら、URL 検査ツールから Google に再クロールを依頼できます。ページを公開してから Google がページを見つけてクロールするまで、数日かかる場合があります。

» サーチコンソールのインデックス登録リクエスト手順｜読み込まれたかの確かめ方

Search Consoleのパンくずリストのレポートで全体を見る

サイト全体のパンくずリストの状態は、Search Console のパンくずリストのレポートで確かめます。パンくずリストのレポートは、ナビゲーション バーの「拡張機能」の下にあるリッチリザルトのレポートの1つです。

出典：Google Search Console の「パンくずリスト」のレポート(オウンドメディア相談室が使っている blog-soudan.com のプロパティ。2026年10月31日の画面)。Google Search Console は Google LLC の商標です。オウンドメディア相談室は、Google が推奨・提携しているものではありません。

有効な項目は、重大な問題が無く、リッチリザルトとして表示できる項目です。無効な項目には、リッチリザルトとして表示できなくなる重大な問題が1つ以上あります。重大ではない問題は、「検索での見え方を改善できるアイテム」の表に分けて表示されます。

構造化データを入れた後は、有効な項目が増え、無効な項目が増えていない状態が理想です。テンプレートを変えた後に無効な項目が増えたら、新しいテンプレートが正しく動いていない可能性があります。無効な項目が増えないまま有効な項目が減ったときは、ページに構造化データが入っていない可能性を疑います。

無効な項目を直した後の流れは、以下のとおりです。

1. 無効な項目を直す
2. URL 検査ツールで公開中の URL を検査し、問題が解決したかを確かめる
3. レポートから検証をリクエストする

出典：Google Search Console のURL 検査ツール(オウンドメディア相談室が使っている blog-soudan.com のプロパティ。2026年10月31日の画面)。調べたのはこのメディアの記事「構造化データのテスト方法」の URL です。Google Search Console は Google LLC の商標です。オウンドメディア相談室は、Google が推奨・提携しているものではありません。

レポートは、検出されたすべての項目を網羅したものではありません。レポートに出てこない URL は、URL 検査ツールで1つずつ確かめます。

画面と構造化データの項目を並べて比べる

複数のサイトやテンプレートを点検するときは、ページの HTML から画面のパンくずリストの項目と BreadcrumbList の項目を書き出し、並べて比べます。ガイドラインに反するマークアップは構文の誤りではない場合があり、リッチリザルト テストでは見つけられないことがあるためです。

メリルは2026年10月30日に、自社の3つのサイトの記事5ページの HTML を1ページずつ取得し、このメディアの公開用の HTML と合わせてスクリプトで数えました。サイトごとの項目の数は、以下の表のとおりです。

サイト	画面の項目	BreadcrumbList の項目	名前の一致	最後の項目の item
WWS メディア	3	3	すべて一致	記事の URL を書く
Web集客ブック	3	3	すべて一致	記事の URL を書く
Touch AI	4	4	すべて一致	記事の URL を書く
オウンドメディア相談室	2〜3	2〜3	すべて一致	省く

Touch AI は、ドメインのトップとカテゴリの間にブログのトップを挟み、4項目にしています。このメディアで2項目になるのは、カテゴリのページや相談フォームなど、トップのすぐ下に置いたページです。WWS メディアと Web集客ブックは2ページずつ取得し、2ページとも項目の数が同じでした。4つのサイトは、どれも position が1から順に並び、item の URL を https:// から書いていました。

並べて比べるときに見る点は、以下のとおりです。

• BreadcrumbList がページにあるか
• 構造化データに、画面に無い項目や名前が入っていないか
• position が1から順に並んでいるか
• item の URL が、画面のリンク先と同じページを指しているか

4つのサイトは、どれも画面と構造化データの項目が同じで、画面に無い項目を構造化データに入れたサイトはありませんでした。

パンくずリストのSEOは画面と構造化データをそろえて公開後に確かめる

パンくずリストは、画面に出すリンクの列と、BreadcrumbList の構造化データの2つでできています。2つを同じテンプレートから出し、項目と名前をそろえれば、利用者にも検索エンジンにも同じ階層が伝わります。

記事の要点は、以下のとおりです。

• パンくずリストは記事の見出しの上に置き、上の階層を a 要素のリンクにする
• 階層は URL の構造ではなく、利用者がたどる一般的な経路で決める
• 最後の項目は今いるページの名前にし、スマートフォンの幅で切れるようにする
• BreadcrumbList は JSON-LD で書き、item・name・position を入れる
• 画面に無い項目や名前を構造化データに入れない
• 公開後はリッチリザルト テスト・URL 検査ツール・Search Console のレポートで確かめる

パンくずリストはテンプレートで作るため、1か所を直せば全ページに反映されます。まずは自社サイトの記事のページを1つ開き、画面のパンくずリストと BreadcrumbList の項目を並べて比べましょう。