自社サイトにパンくずリストを導入したいけど、「そもそも何？どう作るの？」と悩んでいませんか？本記事では、パンくずリストの基礎知識から、HTMLやCMSを使った実装方法、SEO効果を高める構造化データの設定までを初心者向けに丁寧に解説します。これを読めば、迷わず自社サイトにもパンくずリストを導入できます。
目次
パンくずリストとは？作る前に知っておきたい基礎知識
パンくずリストとは、Webページ上でユーザーが今どの階層のページにいるかを示すナビゲーションのことです。たとえば「ホーム > ブログ > SEO > パンくずリストの作り方」といったように、サイトの構造をたどるリンクがページ上部に表示されます。
この名称は、童話『ヘンゼルとグレーテル』で子どもたちが森にまいたパンくずに由来し、「たどってきた道筋を示す」ことからそう呼ばれます。
なぜ必要？役割と効果
パンくずリストには大きく2つの重要な役割があります。
1つ目は、ユーザーの利便性を高めることです。現在見ているページがサイト全体のどこに位置するかがひと目で分かるため、迷子にならずに上の階層のページへ戻れるようになります。
2つ目は、SEO対策としての効果です。パンくずリストを設置することで、Googleに対してサイト構造を明確に伝えることができ、内部リンクの最適化やクローラビリティの向上につながります。さらに、構造化マークアップとあわせて設定すれば、検索結果で「リッチリザルト」として表示される可能性も高まり、クリック率アップにも貢献します。
どんなサイトに向いているか
パンくずリストは、ページが階層構造になっているサイトで特に効果を発揮します。基本的には、トップページから下層ページへカテゴリで分類されているWebサイトであれば、導入を強くおすすめします。特に以下のようなサイトでは必須といえます。
- ブログやニュースサイト（カテゴリで階層管理されている）
- ECサイト（商品がカテゴリ／サブカテゴリに分類されている）
- コーポレートサイト（階層が深い業種別ページなど）
HTMLでパンくずリストを作る基本手順
パンくずリストはHTMLとCSSだけでも簡単に作成可能です。「難しそう…」と感じるかもしれませんが、Web制作に最低限の知識があれば、自分で構築できます。
まずは、パンくずリストの基本的なHTML構造を見てみましょう。パンくずリストは、ナビゲーションを意味する<nav>タグと、順序を示す<ol>（順序付きリスト）タグを組み合わせるのがセマンティックな記述方法とされています。
<nav aria-label="パンくずリスト">
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="/blog/">ブログ</a></li>
<li>パンくずリストの作り方</li>
</ol>
</nav>- aria-label は、スクリーンリーダーが内容を正しく読み取るためのアクセシビリティ対応です
- 最後の項目（現在のページ）はリンクを付けず、あくまで「今どこにいるか」を示すためのテキストにします
スタイル調整のCSS例
CSSを使えばデザイン性を高められます。以下はシンプルな横並びスタイルの例です。
nav ol {
list-style: none;
display: flex;
padding: 0;
}
nav li + li::before {
content: ">";
margin: 0 8px;
color: #999;
}このように設定することで、「ホーム > ブログ > パンくずリストの作り方」のような見た目になります。
レスポンシブ対応のポイント
スマホやタブレットなどの小さい画面でも見やすくするために、レスポンシブ対応も忘れずに行いましょう。
- 改行を避けたい場合は、overflow-x: autoで横スクロールにする
- 文字サイズやリンクのタップ領域を広めに設定する
これにより、ユーザー体験を損なうことなく、すべてのデバイスで正しく表示できるパンくずリストが完成します。
構造化データ（JSON-LD）のマークアップ方法
パンくずリストのSEO効果を最大限に活かすには、構造化データによるマークアップが欠かせません。これにより、Googleの検索結果でリッチリザルトとして表示される可能性が高まります。
Google推奨のJSON-LDとは？
構造化データとは、Webページの内容や構造を検索エンジンに正確に伝えるためのコードです。Googleが最も推奨している形式は「JSON-LD」で、HTMLの中に直接タグとして書くのではなく、<script>タグを使ってJSON形式で（一般的にはheadタグ内に）記述します。
コピペで使えるマークアップ例
以下は、パンくずリスト用のJSON-LDマークアップの基本例です。
<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/blog/"
},
{
"@type": "ListItem",
"position": 3,
"name": "パンくずリストの作り方",
"item": "https://example.com/blog/breadcrumb/"
}
]
}
</script>このコードはHTMLの<head>内か、</body>直前に記述します。
リッチリザルトへの影響
このマークアップにより、Google検索結果で、ページタイトルの下にパンくずリストが表示されることがあります。これがいわゆる「リッチリザルト」です。
リッチリザルトが表示されると、通常の検索結果よりも視認性が高まり、ユーザーの目にとまりやすくなります。その結果、クリック率（CTR）の向上が期待でき、SEOの集客効果を高めることが可能です。
CMS別のパンくずリスト導入方法
コードを直接書くのが難しい場合でも、主要なCMSならパンくずリストを簡単に導入できます。ここでは代表的な方法をご紹介します。
WordPress（テーマ内またはプラグイン）
WordPressでは、テーマにパンくずリスト機能があらかじめ組み込まれている場合が多く、テーマファイル内の呼び出し関数を使うことで表示できます。代表的なのが以下のコードです。
<?php if(function_exists('bcn_display')) { bcn_display(); } ?>この関数は、「Breadcrumb NavXT」というプラグインをインストールすると利用可能になります。導入後は、管理画面から表示スタイルやリンク構造をカスタマイズできます。
Shopify／STUDIOなどノーコード系
Shopifyでは、Liquidというテンプレート言語を使ってパンくずリストを追加する方法が一般的ですが、コードの編集に不慣れな方にとってはハードルが高く感じられるかもしれません。そのような場合は、テーマ内オプションや専用アプリ（Breadcrumbsなど）を活用するのが簡単です。
一方、STUDIOのようなノーコードツールでは、固定リンク付きのテキストブロックを手動で配置する方法が主となりますが、階層構造が浅いサイトであれば十分実用的です。
なお、CMSやツールごとに対応状況や設定手順が異なるため、導入前に公式ドキュメントやサポートページを確認しておくことをおすすめします。
よくあるつまずきとその対処法
パンくずリストを導入したはずなのに「表示されない」「リッチリザルトが出ない」などのトラブルはよくあります。ここでは代表的なつまずきポイントとその対処法を紹介します。
表示されない／階層が崩れる
HTMLやCMSで作成したパンくずリストが表示されない場合、以下の点を確認しましょう。
- テーマ側のテンプレートファイルにパンくずコードを記述していない
- CSSが適用されておらず、非表示や崩れた状態になっている
- JavaScriptで後から読み込む処理が競合している
まずは、ブラウザの開発者ツール（Chromeの検証機能など）を使って、パンくずリストのHTML要素がページ内に出力されているか確認しましょう。
要素自体が生成されていない場合は、テンプレートや呼び出し関数を再確認し、出力されているのに見えない場合はCSSやJavaScriptの影響を疑ってみてください。
JSON-LDが認識されない
構造化データを設定したのに、Googleの検索結果にパンくずリスト（リッチリザルト）が表示されない場合、構造化データにミスがある可能性があります。
- positionの番号が連番になっていない
- @contextや@typeの書式が間違っている
- 実際のページのパンくず表示とJSON-LDの内容が一致していない
こうした問題は、Googleが提供している「リッチリザルトテスト」（https://search.google.com/test/rich-results）使えば簡単にチェックできます。
コードを貼り付けるだけで、エラーの有無や修正点を確認できるので、公開前に必ずテストしておくのがおすすめです。
まとめ
パンくずリストは、ユーザーにとっての利便性とSEOの両面で効果を発揮する重要なナビゲーション機能です。HTMLで一から作る方法から、CMSやプラグインを使った手軽な導入法、SEOに強い構造化データの設定まで、目的やスキルに合わせて実装の方法を選ぶことができます。
初心者の方でも、基本的な構造とポイントを押さえれば、今日からでもパンくずリストの実装は十分可能です。表示トラブルや構造化マークアップのミスがないか確認しながら、自社サイトに合った形で適切に取り入れていきましょう。
シンプリックでは、パンくずリストの導入支援やSEO全体設計のご相談も承っております。ぜひお気軽にご相談ください。
