パンくずリストの書き方3種｜HTMLと構造化データの実装例で解説

パンくずリストの書き方は、大きく「HTMLベタ書き」「構造化データ（JSON-LD/microdata）」「WordPressプラグイン」の3種類に分けられます。結論としては、まずnav・ol・li・aタグで階層を示すHTMLを組み、その上にschema.orgのBreadcrumbListを使った構造化データを重ねるのが最も確実な方法です。本記事では、コピペで使える実装コードとGoogle公式ガイドラインに沿った注意点、リッチリザルトテストでの検証手順まで、実装から公開までの流れを一気通貫で解説します。

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

パンくずリストとは、そのページがサイト階層のどこに位置するかを示す階層順のリストのことです。ユーザーは最後のパンくずから順にさかのぼって1レベルずつ上の階層に移動できます（出典：Google検索セントラル）。

TechSuite株式会社の「AI検索パートナーズ」は、自社サイトにおいてAI Share of Voiceが高水準にある事例を持っており、パンくずリストのようにページの位置づけや文脈が明確に構造化されたサイトほど、生成AIからの引用・認識がされやすいという傾向を実感しています。階層構造がはっきりしていることは、検索エンジンだけでなくAI検索にとっても「このページが何についてのものか」を判断する材料になります。

定義：サイト階層内の現在地を示す階層順リスト

パンくずリストは「ホーム＞カテゴリ＞現在のページ」のように、上位階層から現在地までを順番に並べたナビゲーションです。パンくずリストはURLの見た目を並べたものではなく、ユーザーがそのページに辿り着く一般的な経路を示す道しるべです。ページ内のどこに設置しても、階層をさかのぼれるという役割自体は変わりません。

名前の由来と別名

パンくずリストという名称は、グリム童話「ヘンゼルとグレーテル」で道に落としたパンくずを目印にしたエピソードに由来します。英語ではbreadcrumbsやbreadcrumb navigationと呼ばれ、日本語でもパンくずナビ・トピックパス・ブレッドクラムなど複数の呼び方があります（出典：キーワードマップアカデミー）。呼び方は違っても、指しているものはすべて同じ現在地表示のナビゲーションです。

パンくずリストの3つの種類

パンくずリストには「位置型」「属性型」「パス型」の3種類があり、現在最も広く使われているのは位置型です。位置型はどの経路から来ても表示内容が変わらずサイト階層をそのまま示すのに対し、属性型はECサイトなどで辿った条件によって表示が変わり、パス型は閲覧履歴に近く戻るボタンのような役割で現在はほとんど使われていません（出典：キーワードマップアカデミー）。それぞれの違いを整理すると次のようになります。

種類	特徴	表示の変化	主な利用場面
位置型	サイト階層内の現在地を示す	経路が違っても内容は不変	ブログ・コーポレートサイトなど大半のサイト
属性型	検索条件や絞り込みに近い	辿った経路で表示が変わる	ECサイト・不動産の物件検索サイト
パス型	閲覧履歴を表示する	訪問順にそのまま表示	現在はほぼ利用されていない

パンくずリストにはどんなメリットがある？

パンくずリストを設置する主なメリットは、ユーザーの現在地把握と回遊性の向上、そしてクローラーによるサイト構造の理解促進です。この2つの効果が組み合わさることで、間接的なSEO効果につながります。

TechSuite株式会社の「AI検索パートナーズ」の支援実績では、AI検索経由での受注率が従来のSEO経由の約3倍という結果が出ています。パンくずリストのような基本的な構造整備は地味に見えますが、露出や順位だけでなく最終的な受注という成果につなげるための土台として位置づけられます。

ユーザビリティ向上（現在地把握・回遊性）

パンくずリストがあると、ユーザーは今いるページがサイト内のどの位置にあるかを一目で把握できます。上位カテゴリへワンクリックで戻れることで、目的のコンテンツを探す手間が減り離脱の防止につながります。検索結果やSNSから直接下層ページに訪れたユーザーにとっても、サイト全体の構造を理解する手がかりになります。

クローラーのサイト構造理解とインデックス促進

パンくずリストを設置すると、クローラーがサイト構造やページの関連性・内部リンク情報を正しく理解しやすくなり、スムーズなインデックスや上位表示の可能性向上が期待できると言われています（出典：キーワードマップアカデミー）。内部リンクの一種として機能するため、階層をたどるリンクが増えることでクロールの効率も上がりやすくなります。

リッチリザルト表示によるクリック率への影響

構造化データとしてパンくずリストを実装すると、検索結果にURLの代わりに階層パスがリッチリザルトとして表示される場合があります。表示形式が変わることでユーザーがページの内容をイメージしやすくなり、クリック率に良い影響を与える可能性があります。次の表はメリットを視点別に整理したものです。

視点	効果	関連する仕組み
ユーザー	現在地の把握・回遊性向上	HTMLのナビゲーション表示
クローラー	サイト構造・内部リンクの理解	ol/liによる階層マークアップ
検索結果	リッチリザルト表示によるCTR向上	構造化データ（BreadcrumbList）

パンくずリストの書き方は何種類ある？どう選ぶ？

パンくずリストの書き方は、大きく「HTMLベタ書き」「構造化データによるマークアップ」「WordPressプラグインでの自動生成」の3種類に分けられます。結論として、静的なコーポレートサイトなら手書き、更新頻度が高いブログやWordPressサイトならプラグインが向いています。

TechSuite株式会社の「AI検索パートナーズ」は、コンサルティングという性質上、業種・規模・商材・課題に合わせてすべて顧客ごとに個別設計しています。パンくずリストの実装方法も同様で、サイトの規模やCMSの有無、更新体制といった前提条件によって最適な選択肢は変わるため、一律のテンプレートではなく現状の仕組みを見た上で判断することが重要です。

①HTMLベタ書き②構造化データ③プラグインの違い

3種類の書き方は、実装の手間と自動化の度合いが異なります。HTMLベタ書きは自由度が高い一方で全ページを手動更新する必要があり、プラグインは自動生成できる分カスタマイズの柔軟性が下がる傾向があります。構造化データはHTMLと組み合わせて追加するのが基本で、単独では表示用のリストにはなりません。

書き方	実装の手間	自動更新	向いているサイト
HTMLベタ書き	やや高い（1ページずつ記述）	不可	ページ数の少ない静的サイト
構造化データ	中（HTMLに追記）	実装方法に依存	リッチリザルト対応を重視するサイト
WordPressプラグイン	低い（設定のみ）	可能	ページ数が多く更新頻度が高いサイト

手書きと自動生成の使い分け

ページ数が少なく更新頻度も低いサイトであれば、HTMLと構造化データを手書きしても運用負荷はさほど大きくありません。一方でブログのように記事数が増え続けるサイトでは、Breadcrumb NavXTやYoast SEOなどのプラグインを使い、階層構造をカテゴリ設定と連動させて自動生成する方が保守性に優れます。判断軸としては、次のチェックリストが参考になります。

HTMLでパンくずリストを書く方法は？

HTMLでパンくずリストを書くには、nav・ol・li・aタグを組み合わせて階層を表現するのが基本形です。現在表示しているページ（最後のli）にはリンクを付けず、区切り文字はCSSの疑似要素で表示するのが一般的な方法です。

TechSuite株式会社の「AI検索パートナーズ」は、技術面を担う人材とコンテンツ制作を担う人材が一つのチームで連携し、戦略設計から技術実装・企画・制作・効果測定・改善までを一気通貫で伴走しています。パンくずリストのようなマークアップ実装も、単体の作業として切り出すのではなく、サイト全体の情報設計の一部として取り組むことでSEOとユーザビリティの両立を図りやすくなります。

使うタグ（nav・ol・li・a）の役割

パンくずリストを構成する主なタグはnav・ol・li・aの4種類です。navはナビゲーションであることを示す役割、olは順序付きリストであることを示す役割、liは各階層の項目、aは各階層へのリンクを担います（出典：キーワードマップアカデミー）。パンくずリストは箇条書きの一種であるためol・liタグで書くのが一般的で、ナビゲーションとしての意味を持たせるためnavタグを併用するのが望ましいとされています。

タグ	役割	備考
nav	ナビゲーション領域であることを示す	aria-label=”Breadcrumb”を付けるのが望ましい
ol	順序付きリストであることを示す	クラス名にbreadcrumbs等を付与
li	各階層の1項目	階層数だけ用意する
a	各階層へのリンク	最後のliにはリンクを付けない

コピペできる基本形コード

基本形は、navタグでnav要素を定義し、その中にolとliを階層数分並べ、各liの中にaタグでリンクを設置する構成です（出典：Rilaks）。手順としてはStep1でnavタグを用意し、Step2でolタグを配置し、Step3で上位階層分のliタグを並べ、Step4で各li内にaタグでリンクテキストを入れます（出典：キーワードマップアカデミー）。実際のコードは次のように記述します。

• <nav aria-label=”Breadcrumb”>
•   <ol class=”breadcrumbs”>
•     <li><a href=”/”>ホーム</a></li>
•     <li><a href=”/category/”>カテゴリ名</a></li>
•     <li aria-current=”page”>現在のページ名</li>
•   </ol>
• </nav>

このように、最後のliだけはaタグを使わずテキストのままにするのが原則です。

区切り文字とアクセシビリティ対応

区切り文字（>や/）はHTMLに直接書き込むより、CSSの疑似要素（.breadcrumbs li:not(:last-of-type)::after にcontent:”>”を指定）で表示するとマークアップがすっきりします（出典：Rilaks）。アクセシビリティを考慮するなら、navにaria-label=”Breadcrumb”を付け、現在ページのliにaria-current=”page”を付与するのが望ましいとされています。区切り文字の表示にはbackground-imageを使う方法もあり、環境によって読み上げソフトの挙動が変わりにくいという利点があります。

構造化データ（BreadcrumbList）はどう書く？

構造化データでパンくずリストを示すには、schema.orgのBreadcrumbListとListItemを使い、少なくとも2つのListItemにitem・name・positionを指定する必要があります。記述形式はJSON-LDとmicrodataのどちらでも可能ですが、現在はJSON-LDが推奨される傾向にあります。

TechSuite株式会社の「AI検索パートナーズ」は、生成AIが引用・推薦する仕組みを構造化データ・意味的文脈・エンティティ認識といった観点から技術的に捉え、LLMO対策やGEO対策を一次情報設計まで踏み込んで支援しています。パンくずリストの構造化データも、単なるリッチリザルト対応にとどまらず、ページの位置づけを機械に伝える一次情報の一部として設計することが重要です。詳しい進め方はLLMO対策の具体的なやり方でも解説しています。

必須プロパティと最小2要素ルール

パンくずリストを指定するには、少なくとも2つのListItemを含むBreadcrumbListを定義する必要があります。ListItemの必須プロパティはitem（URL）・name（表示タイトル）・position（位置。1が最初）です（出典：Google検索セントラル）。パンくずが最後のアイテムの場合はitemプロパティが必須ではなく、省略した場合はGoogleがそのページのURLを自動的に使用します。positionは1から始まる整数で、階層が深くなるほど番号を増やしていきます。

プロパティ	意味	必須かどうか
item	そのページのURL	最後の要素は省略可
name	表示するタイトル	必須
position	階層内の順番（1から開始）	必須

JSON-LDでの実装例

Google公式は構造化データの記述形式としてJSON-LD・RDFa・microdataのコード例を提示していますが、記述のしやすさからJSON-LDが選ばれる場面が増えています（出典：Google検索セントラル）。JSON-LDはHTMLのbody内などにscriptタグとして埋め込む形式で、次のように記述します。

• <script type=”application/ld+json”>
• {
•   “@context”: “https://schema.org”,
•   “@type”: “BreadcrumbList”,
•   “itemListElement”: [
•     { “@type”: “ListItem”, “position”: 1, “name”: “ホーム”, “item”: “https://example.com/” },
•     { “@type”: “ListItem”, “position”: 2, “name”: “カテゴリ名”, “item”: “https://example.com/category/” },
•     { “@type”: “ListItem”, “position”: 3, “name”: “現在のページ名” }
•   ]
• }
• </script>

最後のListItemはitemを省略してもGoogleがそのページのURLを補完するため、上記のように記述できます。

microdataでの実装例とガイドラインの注意点

microdataでは、olにitemscopeとitemtype=”http://schema.org/BreadcrumbList”、各liにitemprop=”itemListElement”・itemscope・itemtype=”http://schema.org/ListItem”、aタグにitemprop=”item”、名前にitemprop=”name”、順番はmeta itemprop=”position”で指定します（出典：Rilaks）。この方式ではHTMLと構造化データを一体化して書けるため、既存のHTMLに属性を追記するだけで対応できます。またGoogleは、パンくずリストにURL構造をそのまま反映させるのではなく、ユーザーが特定ページにたどり着く一般的な経路を示すことを推奨しており、最上位パス（ドメイン名やホスト名）やページ自体のListItemは含める必要がないとしています。1ページに移動する方法が複数ある場合は、複数のBreadcrumbListを指定することも可能です（出典：Google検索セントラル）。なお、旧来のdata-vocabulary.orgによるマークアップは2020年1月にサポートが終了しているため、schema.orgでの記述に統一しておく必要があります。

WordPressプラグインでの自動生成と設置時の注意点は？

WordPressでパンくずリストを自動生成する場合、Breadcrumb NavXTやYoast SEOといったプラグインが広く使われています。手書きに比べて設定の負担が少なく、記事数が多いブログやメディアサイトに向いています。

TechSuite株式会社の「AI検索パートナーズ」は、AIを活用した高度なコンテンツ制作の仕組みを「バクヤスAI記事代行」事業で培っており、その制作エンジンとナレッジをLLMO対策にも転用しています。パンくずリストの階層設計やアンカーテキストの付け方も、検索意図や想定質問の分解に沿って設計することで、記事単体だけでなくサイト全体の文脈をAI検索に伝えやすくすることができます。

主なプラグイン（Breadcrumb NavXT/Yoast SEO）とテーマ標準機能

WordPressでは、構造化データ対応のパンくずを自動生成できるプラグインとしてYoast SEOやBreadcrumb NavXTが代表的です。Yoast SEOはmicrodataではなくJSON-LD形式で構造化データを出力しますが、得られる効果自体は大きく変わりません（出典：Rilaks）。使用しているテーマにパンくず表示機能が標準搭載されている場合もあるため、プラグイン導入前にテーマの設定画面を確認しておくと重複設置を避けられます。

プラグイン	出力形式	特徴
Yoast SEO	JSON-LD	SEO機能全体の一部としてパンくずを出力
Breadcrumb NavXT	microdata	パンくず専用プラグインで表示のカスタマイズ性が高い

設置場所と階層設計・アンカーテキストの注意点

設置場所はbody内のわかりやすい位置であれば問題なく、多くのサイトではページ上部に置かれていますが、h1の上に置くという厳密なルールはなく、下部に設置してもGoogleは認識します。複数設置した場合、Googleは最初に見つけたものを採用するとされています（出典：サルワカ）。シンプルで分かりやすい階層構造を設計し、細かく分類しすぎて階層を深くしないことが、パンくずリストを機能させる大前提です。アンカーテキストにはページと関連性の高いキーワードを含めると、そのカテゴリページにキーワードを含むリンクが集まりやすくなり、検索エンジンにカテゴリの内容が伝わりやすくなります（出典：キーワードマップアカデミー）。こうした内部リンクの整理は、AI検索対策やAI検索最適化の観点でも土台になる作業です。

正しく機能しているか検証する手順

実装した構造化データは、GoogleのリッチリザルトテストにコードやURLを貼り付けて検証できます。階層数だけBreadcrumbのボックスが並び、エラーなしと表示され、url・titleが正しく表示されていれば正常に機能しています（出典：サルワカ）。公開後はURL検査ツールで個別ページの認識状況を確認し、Search Consoleでリッチリザルトの表示状況を継続的に監視することが推奨されています。なお、構造化データにガイドライン違反の手法が含まれるとGoogleが検出した場合、サイトに手動対策が講じられることがあるため、隠しテキストや実際のページ内容と異なるリスト表示は避ける必要があります（出典：Google検索セントラル）。スマホでは横スクロールや1行での折り返し表示など、フォントサイズと表示幅への配慮も欠かせません。

よくある質問

パンくずリストは上部・下部どちらに置くべきですか？

body内であれば設置場所に厳密な決まりはなく、多くのサイトはページ上部に配置していますが、下部でもGoogleは認識するとされています。ユーザーが最初に視認しやすい位置に置くのが一般的です。

1ページに複数のパンくずリストを設置してよいですか？

そのページに移動する方法が複数ある場合、1ページに複数のBreadcrumbListを指定することができます。ただし複数設置した場合、Googleは最初に見つけたものを採用するとされています。

現在のページ自体をリストに含める必要はありますか？

Googleのガイドラインでは、最上位パスやページ自体のListItemは必ずしも含める必要はないとされています。表示上は現在ページ名をリンクなしで最後に置くサイトが多く見られます。

JSON-LDとmicrodataはどちらを使うべきですか？

どちらもGoogleが公式にサポートしている形式で機能に大きな差はありませんが、HTMLと構造化データを分離して管理しやすいJSON-LDが選ばれる傾向にあります。既存HTMLに直接属性を追記したい場合はmicrodataが向いています。

WordPressでパンくずリストが表示されないときはどうすればよいですか？

使用中のテーマにパンくず機能が標準搭載されていないか、有効化されていない可能性があります。テーマの設定を確認した上で、Yoast SEOやBreadcrumb NavXTなどのプラグインを導入し、テンプレートファイルへの設置タグの記述を確認します。

まとめ

パンくずリストの書き方には、HTMLベタ書き・構造化データ・WordPressプラグインの3種類があり、サイトの規模や更新体制に合わせて選ぶことが基本です。HTMLはnav・ol・li・aタグで階層を示し、最後のliにはリンクを付けません。

構造化データではBreadcrumbListにitem・name・positionを持つListItemを最低2つ指定し、Googleのガイドラインに沿って一般的な経路を示すことが重要です。実装後はリッチリザルトテストとSearch Consoleで検証し、エラーがない状態を確認してから公開しましょう。

階層設計やアンカーテキストの工夫はユーザビリティだけでなくSEOやAI検索での文脈理解にもつながる基盤です。まずは自サイトの階層を整理し、コピペしたコードを自分のサイト構造に合わせて調整してみてください。

参考にした情報源

• パンくずリスト（BreadcrumbList）構造化データ｜Google検索セントラル
• パンくずリストのコード実装例｜Rilaks
• パンくずリストの作り方・CSSデザイン例｜サルワカ
• パンくずリストの書き方・SEO効果｜キーワードマップアカデミー