パンくずリストの作り方、意味、WordPressサイトへの導入、プラグイン、タグとcssで簡単なパンくずリストの作成例なども解説｜HTML＆CSS入門講座（22）

HTML＆CSS
2021.07.24
この記事は約12分で読めます。

パンくずリストの作り方、意味、WordPressサイトへの導入、プラグイン、タグとcssで簡単なパンくずリストの作成例なども解説｜HTML＆CSS入門講座（22）のPodcast

下記のPodcastは、Geminiで作成しました。

はじめに

ウェブサイトの利便性を高め、検索エンジンに対してもサイトの構造を正しく伝えるために欠かせない要素が「パンくずリスト」です。2025年から2026年にかけて、ウェブ環境はAIによる検索体験の進化や、WordPressのメジャーアップデートといった大きな転換期を迎えています。本稿では、初心者の方にも分かりやすく、最新の技術動向を踏まえたパンくずリストの作成・導入方法を、基礎から応用まで丁寧に解説します。

パンくずリストの基本概念と重要性

パンくずリスト（Breadcrumbs）とは、ウェブサイトを訪れたユーザーが、現在どの階層のページにいるのかを視覚的に示す誘導リンクのことです。一般的にページの上部に配置され、「ホーム ＞ カテゴリー名 ＞ 記事タイトル」といった形式で表示されます。この名称は、グリム童話「ヘンゼルとグレーテル」の主人公たちが、森で迷わないようにパンのくずを道に落としていったエピソードに由来しています 。ウェブサイトにおけるパンくずリストの役割は、大きく分けて「ユーザーエクスペリエンス（UX）の向上」と「検索エンジン最適化（SEO）の強化」の2点に集約されます 。

ユーザーエクスペリエンス（UX）への貢献

多くのユーザーは、必ずしもトップページからサイトに流入するわけではありません。検索エンジンやSNS、外部サイトのリンクを通じて、サイトの深い階層にある個別記事に直接たどり着くことが一般的です 。この際、パンくずリストがあることで、ユーザーは即座に自分がサイト内のどの位置にいるのかを理解でき、関連する上位カテゴリーへ1クリックで戻ることが可能になります 。これにより、ユーザーがサイト内で迷子になるのを防ぎ、結果としてサイトの離脱率を下げる効果が期待できます 。

検索エンジン最適化（SEO）への貢献

Googleなどの検索エンジンは、「クローラー」と呼ばれるロボットを用いてサイト内を巡回し、情報を収集しています。パンくずリストは、このクローラーに対してサイトの論理的な階層構造を伝える重要な手がかりとなります 。適切な内部リンク構造が構築されることで、サイト全体の評価が正しく伝わりやすくなります 。また、後述する「構造化データ」を用いることで、検索結果画面にパンくずリストが表示されるようになります 。これにより、検索ユーザーはクリックする前にサイトの内容を予測しやすくなり、クリック率（CTR）の向上につながります 。2026年現在のSEOトレンドでは、AIが検索結果の概要を生成する「AI Overviews」が普及しており、情報を整理して提示するパンくずリストの重要性はさらに高まっています 。

Googleの最新ガイドラインと構造化データの実装（2025-2026年版）

Googleは、検索結果にパンくずリストを正しく表示させるために、「構造化データ」の使用を強く推奨しています 。構造化データとは、ページの内容を検索エンジンが理解しやすい形式で記述したコードのことです。

推奨される記述形式：JSON-LD

Googleは現在、構造化データの記述方法として「JSON-LD」を最も推奨しています 。これはHTMLの本文とは切り離して、`<script>`タグ内にJavaScriptの形式で記述する方法です。デザイン（HTML/CSS）とデータ（JSON-LD）を分けて管理できるため、エラーが少なく、メンテナンス性が高いという利点があります 。

パンくずリストの構造化データを実装する際、Googleのガイドラインでは以下のプロパティを正しく設定する必要があります。

プロパティ名説明必須・推奨
itemListElementパンくずリストの各項目をまとめるリスト。必須項目
position階層の順番（1, 2, 3...）。必須項目
nameユーザーに見せる階層のタイトル。必須項目
itemその階層のURL（末尾のページは省略可能）。推奨項目

AI検索時代における役割

2026年現在、検索エンジンは単なるリンクの羅列から、ユーザーの問いに直接答える AIへと進化しています 。AIはウェブサイトの情報を収集して要約する際、サイトの階層構造を参照して「その情報の信頼性と文脈」を判断します 。正確なパンくずリストの構造化データを提供しているサイトは、AIにとって構造化された信頼できる情報源と見なされやすく、AIによる回答（引用）の中に含まれる可能性が高まります 。

WordPressサイトへのパンくずリスト導入

WordPressを利用している場合、パンくずリストを導入する方法は大きく分けて「WordPressコアの標準機能」「SEOプラグイン」「専用プラグイン」の3つがあります。

WordPress 7.0の新機能：標準パンくずブロック

WordPressは2026年4月にメジャーアップデートである「バージョン7.0」のリリースを予定しています 。このアップデートにおける大きな注目点は、コア機能として「パンくずリストブロック（Breadcrumbs Block）」が正式に導入されることです 。これまでパンくずリストを設置するには、外部のプラグインを導入したり、テーマのコードを書き換えたりする必要がありました。しかし、WordPress 7.0以降は、サイトエディター（Gutenberg）の標準機能として、直感的にパンくずリストを配置できるようになります 。この標準ブロックは、最新のアクセシビリティ基準（WCAG）に準拠し、構造化データも自動で出力される仕様となっています 。

主要なSEOプラグインによる実装

現在、多くのサイトで利用されている主要なSEOプラグインのパンくずリスト機能には、それぞれ特徴があります。

プラグイン名特徴おすすめのユーザー
Yoast SEO最も歴史があり、安定した自動生成機能を備えています。初心者や安定性を重視する方
Rank Math無料版でも高度なカスタマイズが可能で、AI連携機能も強力です。機能を使いこなしたいパワーユーザー
AIOSEO設定画面が直感的で、プレビューを見ながら調整できます。デザインを確認しながら設定したい方

専用プラグイン「Breadcrumb NavXT」の活用

SEOプラグインの機能に頼らず、パンくずリストだけを細かく制御したい場合は、「Breadcrumb NavXT」という専用プラグインが非常に強力です 。このプラグインは長年開発が続けられており、複雑なサイト構造やカスタム投稿タイプにも柔軟に対応できます 。導入手順は以下の通りです。

インストール: WordPress管理画面の「プラグイン」>「新規追加」から「Breadcrumb NavXT」を検索し、インストールして有効化します 。

基本設定: 「設定」>「Breadcrumb NavXT」から、区切り文字（例：「>」）やホームページの名称などを設定します 。

配置: ブロックエディターを使用している場合は「Breadcrumb Trail」ブロックを挿入します。クラシックテーマの場合は、以下のPHPコードをテーマファイル（header.phpなど）の表示したい箇所に記述します 。

PHP

php

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php if(function_exists('bcn_display')) {
        bcn_display();
    }?>
</div>

HTMLとCSSによる手動作成の例

独自のカスタムテーマを作成している場合や、プラグインを使わずに最小限のコードでパンくずリストを作成したい場合の手順を解説します。初心者の方でも、基本のタグと少しのCSSでプロのような仕上がりになります。

1. セマンティックなHTML構造

まずは、意味的に正しい（セマンティックな）HTMLタグを使用することが重要です。アクセシビリティを考慮し、`<nav>`タグとリスト形式の`<ul>`または`<ol>`タグを使用します 。

HTML

html

<nav aria-label="パンくずリスト">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">ホーム</a></li>
    <li class="breadcrumb-item"><a href="/category/it/">IT講座</a></li>
    <li class="breadcrumb-item active" aria-current="page">HTML＆CSS入門</li>
  </ol>
</nav>

ここで重要なポイントは以下の通りです。

`<nav aria-label="Breadcrumb">`: スクリーンリーダーを使用しているユーザーに、ここがパンくずリストであることを伝えます 。

`aria-current="page"`: 現在表示しているページを示す項目に付与し、現在地を明示します 。

2. モダンCSSによるスタイリング（Flexbox）

2025以降のモダンなウェブ制作では、要素の並び替えに「Flexbox」を使用するのが標準的です 。Flexboxを使えば、スマートフォンなどの小さな画面でも自動的に折り返す（レスポンシブな）パンくずリストが簡単に作れます 。

CSS

css

.breadcrumb {
  display: flex; /* 横並びにする  */
  flex-wrap: wrap; /* 画面幅が狭いときに自動で折り返す  */
  list-style: none; /* リストの点（・）を消す */
  padding: 0;
  margin: 10px 0;
  font-size: 14px;
}

.breadcrumb-item +.breadcrumb-item::before {
  content: ">"; /* 項目同士の間に区切り文字を入れる  */
  margin: 0 10px;
  color: #999;
}

.breadcrumb-item a {
  text-decoration: none;
  color: #0073aa;
}

.breadcrumb-item a:hover {
  text-decoration: underline; /* ホバー時に下線を表示 */
}

.breadcrumb-item.active {
  color: #666;
  font-weight: bold; /* 現在のページを強調する */
}

3. 進化したレスポンシブ対応：コンテナクエリ

2026年のウェブデザインでは、画面全体の幅（ビューポート）ではなく、パンくずリストが置かれている親要素の幅に応じてスタイルを変える「コンテナクエリ」の活用が進んでいます 。これにより、サイドバーに置いた時とメインエリアに置いた時で、自動的に最適な文字サイズに調整するといった高度な制御が可能です 。

パンくずリスト運用の注意点とトラブルシューティング

パンくずリストを導入した後に直面しやすい問題と、その解決策をまとめます。

1. モバイルでの表示崩れ

スマートフォンなどの小さな画面では、パンくずの階層が長すぎると、文字が重なったり画面からはみ出したりすることがあります 。

対策: CSSで `flex-wrap: wrap;` を設定して複数行にするか、中間階層を省略（「...」で表示）する手法が一般的です 。また、リンク同士が近すぎると誤操作の原因になるため、タップしやすい間隔（パディング）を確保しましょう 。

2. キャッシュによる変更の不反映

WordPressでカテゴリーの構成を変更したのに、パンくずリストの表示が変わらないことがあります。これは、プラグインやサーバーが古い情報を一時的に保存（キャッシュ）しているために起こります 。

対策: SEOプラグインの設定画面にある「SEOデータの最適化」や「インデックスの再構築」といったボタンを押すことで、最新の状態に更新されます 。また、ブラウザのキャッシュクリアも試してみてください。

3. 構造化データのエラー確認

構造化データを正しく実装できているか不安な場合は、Googleが提供している「リッチリザルトテスト」を利用しましょう 。サイトのURLを入力するだけで、Googleがパンくずリストを正しく認識できているか、エラーがないかを無料で診断してくれます 。

まとめ：2026年に求められるパンくずリストの在り方

パンくずリストは、単に「一つ前のページに戻るためのリンク」以上の価値を持っています。2026年のインターネット環境においては、以下の3つの役割を兼ね備えていることが重要です。

ユーザーへの道しるべ: 迷いやすい大規模サイトでも、現在地を直感的に伝え、快適な回遊を促す。

検索エンジンへの構造通知: JSON-LDを用いた構造化データにより、検索結果の視認性を高め、AI検索エンジンにも正しい文脈を伝える 。

アクセシビリティの確保: スクリーンリーダーなどを使用するすべてのユーザーにとって、理解しやすいマークアップを施す 。

WordPress 7.0の登場により、初心者の方でも手軽に標準的なパンくずリストを導入できる時代が到来します 。しかし、その背後にあるSEOやUXの仕組みを理解しておくことで、より効果的で、長く愛されるウェブサイトの構築が可能になります。本稿を参考に、ぜひあなたのサイトにも最適なパンくずリストを設置してみてください。

参考資料

1. Google Search Central: Breadcrumb Structured Data, https://developers.google.com/search/docs/appearance/structured-data/breadcrumb

2. Google Search Central: General structured data guidelines, https://developers.google.com/search/docs/appearance/structured-data/sd-policies

3. WordPress 7.0 Roadmap and 2026 Release Schedule, https://fluentforms.com/wordpress-7-0-current-situation-and-possibilities/

4. W3C WAI: Breadcrumb Design Pattern, https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/

5. What's New for Developers (January 2026) - WordPress Developer Resources, https://developer.wordpress.org/news/2026/01/whats-new-for-developers-january-2026/

6. Practical Reasons to Use Flexbox in 2025, https://epogeedesign.com/insights/practical-reasons-to-use-flexbox-in-2025

7. SEO for AI Overviews in 2026: Winning beyond clicks, https://www.dmcockpit.com/articles/seo-for-ai-overviews-in-2026

8. WordPress SEO Plugins Comparison 2026: Rank Math vs Yoast, https://koanthic.com/en/rank-math-vs-yoast-complete-2026-guide-migration/

9. MDN Web Docs: CSS Container Queries Guide, https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Containment/Container_queries

10. Comprehensive Guide to WordPress Breadcrumbs and Site Structure, https://www.wpzoom.com/blog/wordpress-breadcrumbs/

コメント

タイトルとURLをコピーしました