目次
はじめに
このドキュメントの目的
このガイドは、パンくずリストについて初心者から実務で使いたい方までを対象に、基礎から実装まで丁寧に説明します。単に見た目を作るだけでなく、ユーザーの利便性向上や検索エンジンに伝わりやすくする方法まで扱います。
誰に向いているか
- ウェブサイトの運営を始めた方
- デザインやコーディングの初心者
- CMS（例：WordPress）で機能を整えたい方
専門用語は最小限にし、具体例と手順で進めますので、気軽に読み進めてください。
本書の構成（全体の流れ）
- はじめに（本章）
- パンくずリストの意味と役割
- 種類（階層型・属性型・履歴型）
- 基本構造（HTMLの考え方）
- HTML＋CSSでの作り方
- 検索エンジン向けの構造化データ（JSON-LD）
読み方のポイント
実際のコード例は章ごとに示します。初めての方は章順に進めると理解が早くなります。既に操作に慣れている方は目的の章だけ参照していただいて構いません。
パンくずリストとは？意味と役割をわかりやすく解説
定義
パンくずリストは、現在のページがサイト内のどの位置にあるかを示すナビゲーションです。表示は「ホーム ＞ カテゴリ ＞ 記事タイトル」のようなテキストリンクが一般的で、ユーザーが上位ページへ戻れる道しるべになります。
ユーザーにとっての役割
・現在地が一目でわかるため迷いにくくなります。
・上位カテゴリーに戻る操作が簡単になり、サイト内を回遊しやすくなります。
・特に階層の深いサイトで有効です（例：家電 > 掃除機 > ダイソン）。
検索エンジンにとっての役割
パンくずはページの階層構造を伝えるシグナルになります。検索エンジンはそれを元にサイト構造を理解しやすくなり、検索結果でパンくずが表示されるとクリック率が上がることがあります。
導入のメリットと注意点
メリット：回遊率向上、ユーザー満足度改善、検索結果での視認性向上など。
注意点：浅すぎるまたは不要なパンくずは逆効果です。現在ページはリンクにしない、階層は過度に深くしない、スマホ表示を考慮するなど基本的な配慮を行ってください。
パンくずリストの種類（階層型・属性型・履歴型）
概要
パンくずリストには主に「階層型」「属性型」「履歴型」の3種類があります。それぞれ用途と見せ方が異なりますので、目的に応じて使い分けると使いやすいサイトになります。
1. 階層型（ディレクトリ型）
- 説明：サイトの構造（上位ページ→下位ページ）に沿って表示します。
- 例：ホーム > 家電 > テレビ > 4Kテレビ
- 長所：ユーザーが自分の現在位置を把握しやすく、サイト内の上位ページへ戻りやすいです。検索エンジンにも理解されやすく、実務で最も一般的に使われます。
- 注意点：階層が深くなりすぎると見づらくなるので、通常は3〜5階層程度に抑えます。
2. 属性型（ファセット型）
- 説明：商品の属性やコンテンツの特徴に沿ってたどる形式です。カテゴリだけでなく、ブランド・色・価格帯などで構成します。
- 例：ホーム > メンズ > ジャケット > 防水
- 長所：ユーザーが絞り込み結果や商品の属性を明確に確認できます。フィルター操作と合わせると便利です。
- 注意点：同じ商品が複数の属性経路に現れるため、パスが多数生まれやすいです。SEO面では重複ページに注意し、主要なパスを示すかcanonicalで整理します。
3. 履歴型（ユーザー履歴）
- 説明：そのユーザーがたどったページを表示します。直近の閲覧履歴を並べるイメージです。
- 例：ホーム > 先ほど見たページA > ページB > 現在のページ
- 長所：個々のユーザーにとって戻りやすく、閲覧体験を助けます。
- 注意点：サイト構造を示すものではないため、SEO効果は期待できません。通常は補助的な表示に留め、共通の階層型パンくずと置き換えないでください。
実務での使い分けのポイント
- 各ページにはまず階層型パンくずを基本に設置します。わかりやすさと一貫性を優先するためです。
- 属性での絞り込みが重要な商品ページでは、属性型の情報を別表示で補助すると親切です。
- 履歴型はユーザー体験向上のためのオプションとして導入します。ナビゲーションの主役にしないでください。
実装上の簡単な注意
- 表示は簡潔にし、リンクは分かりやすくします。区切り文字（›や/）を統一すると良いです。
- 深さを制限し、同じ意味の重複パスを作らない工夫をします。
- アクセシビリティ（スクリーンリーダー向け）にも配慮してください。
パンくずリストの基本構造（HTMLの考え方）
HTMLの基本構造
パンくずリストは意味を持つHTML要素で作ります。まず
