はじめに
この記事の目的
本記事はパンくずリストのリンク設置方法を丁寧に解説します。基本概念からリンクを設置する際の重要な原則、HTMLでの実装、構造化データの書き方、WordPressでの実装まで、順を追って学べます。特にSEO効果とアクセシビリティに配慮した正しい作り方を重視しています。
誰に向けた記事か
- サイト運営者やコンテンツ担当者
- フロントエンド開発者やHTMLを触る方
- WordPressユーザーでサイト改善をしたい方
初心者の方にも分かるように、具体例を交えて説明します。
なぜパンくずリストが重要か
パンくずリストはユーザーの現在地を示し、戻る操作を楽にします。例えばECサイトで「ホーム > レディース > 靴 > スニーカー」と表示されると、利用者が上位カテゴリへ簡単に移動できます。これにより離脱を防ぎ、検索エンジンにもページ構造を伝えられます。
本記事の流れ
第2章で基本概念を抑え、第3章でリンク設置の原則を学びます。第4章と第5章で実際のコード例を示し、第6章でWordPressでの実装方法を紹介します。全体を通して実践しやすい手順を提示します。
パンくずリストの基本概念
定義と由来
パンくずリストは、サイトの階層をたどるリンク群です。ユーザーが現在どの位置にいるかを視覚的に示します。名称は童話『ヘンゼルとグレーテル』のパンくずに由来します。
主な目的
- ナビゲーション補助：直感的に上位ページへ戻れます。
- ユーザビリティ向上：迷いを減らし閲覧を促します。
- SEOの補助：サイト構造を検索エンジンに伝えやすくします。
構成要素と表示例
一般的に「ホーム > カテゴリ > サブカテゴリ > 商品名」のように表示します。区切り記号は「>」「/」「»」などが使われます。現在のページは通常リンクにせず、強調表示します。
実装時の考え方（簡単な指針）
- 階層を正しく反映すること。
- 表示は短く簡潔にすること。
- モバイルでは折り返しや省略を検討すること。
- 単一ページや検索結果ページでは不要な場合が多いです。
よくある誤解
パンくずは単なる装飾ではなく、導線として機能します。適切に設置するとユーザーと検索エンジン双方にメリットがあります。
パンくずリストのリンク設置における重要な原則
基本原則
パンくずリストでは、一覧の最後の項目（現在表示中のページ）にリンクを付けないのが一般的です。ユーザーは既にそのページにいるため、再び遷移する必要がありません。最後の項目はテキストで示し、前の項目だけリンクにします。
最後の項目にリンクを付けない理由
・混乱を避ける：現在地がリンクだと二重にクリックする余地が生まれ、ユーザー体験が悪くなります。
・アクセシビリティ：スクリーンリーダー利用者にとって現在地をリンクにしないほうが分かりやすいです。
・意味の明確化：パンくずは“現在地の表示”の役割が強いため、最後だけは操作対象にしません。
ユーザーの経路に基づいて設置する
パンくずはディレクトリ構造そのままを写す必要はありません。ユーザーが辿るであろう経路や情報の階層に合わせて作ります。例えば商品ページなら「ホーム > カテゴリ > 商品名」が自然ですが、ユーザー行動に応じて別経路にする場合もあります。
アクセシビリティと実装の注意点
・最後の項目にはaria-current=”page”を付けるとスクリーンリーダーで現在地が伝わります。
・リンクテキストは意味のある短い語句にします（例：「スマートフォンケース」）。
・区切り文字は視覚的にも分かりやすく小さな矢印（›）などを使います。
実例
正しい例：ホーム > 電化製品 > スマートフォンケース（最後はテキスト）
間違い例：ホーム > 電化製品 > スマートフォンケース（最後もリンク）
これらの原則を守ると、迷わない導線と分かりやすい現在地表示が実現できます。
HTMLによるパンくずリストの実装方法
パンくずリストはHTMLのリスト要素で分かりやすく実装できます。基本はnavタグの中にolを置き、liで階層を表現します。最後の項目はリンクにせずテキストにして、aria-labelやaria-currentでアクセシビリティに配慮します。
実装の4ステップ
- navタグ記入
- olタグ記入
- liタグ記入
- 各階層を
- に入れます。最後の
- だけはリンクにせずテキスト表示にします。
- aタグでリンクテキスト記入
- 中間の項目は テキスト にします。リンクテキストは短く具体的にします。
アクセシビリティのポイント
- nav の aria-label で領域を示します。目標がはっきり伝わります。
- 最後の項目には aria-current=”page” を付けます。これで現在のページと認識されます。
- 同じテキストの重複リンクを避け、リンク先が明確になる表現にします。
短い実例
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li><a href="/">ホーム</a></li>
<li><a href="/category/">カテゴリ名</a></li>
<li aria-current="page">記事タイトル</li>
</ol>
</nav>
上の例をベースに、見た目はCSSで調整してください。リンクは意味が分かる短い語にし、ユーザーが迷わない構造を心がけます。
構造化データ（Schema.org）による実装
概要
検索エンジンにパンくずリストを正しく理解してもらうには、Schema.orgのBreadcrumbListを使います。必須となる要素は「@type」「itemListElement」「position」「name」「item」です。最終項目は現在地なのでリンクを省き、非リンク要素として扱います。
各プロパティの意味（簡潔に）
- @type: “BreadcrumbList” を指定します。
- itemListElement: ListItemの配列です。
- position: 項目の順序（1から開始）です。
- name: 表示名です。
- item: 項目のURLを指します（最終項目はURLを付けないか空にします）。
JSON-LDの実装例（headかbody直前に配置）
<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/products/"},
{"@type": "ListItem", "position": 3, "name": "商品A"}
]
}
</script>
注意点と運用のコツ
- URLは正規化（末尾スラッシュの一致など）して一貫性を保ちます。
- ページごとにpositionを動的に生成してください。テンプレートで位置を計算するとミスが減ります。
- 検索結果に反映されるまで時間がかかることがあります。テストはGoogleのリッチリザルトテストで行ってください。
WordPressでの実装方法
1) テーマで簡単に導入
パンくずリストが最初から組み込まれたテーマを選ぶのが最も手軽です。外観＞テーマで説明に「breadcrumb」「パンくず」とあるものを探してください。導入後はテーマの設定画面で表示・非表示を切り替えるだけで済みます。
2) プラグインでの導入（おすすめ: Yoast SEO、Breadcrumb NavXT）
手順は簡単です。プラグインをインストールして有効化し、設定画面で表示形式を調整します。ウィジェットやショートコード、テンプレートタグで任意の場所に表示できます。例：Yoastではテーマの適切な位置に
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<nav aria-label="パンくず"><ol>','</ol></nav>');
}
と書きます。
3) 子テーマで直接追加する方法
header.phpやsingle.phpの適切な場所にテンプレートタグを挿入します。直接編集する場合は必ず子テーマを使い、アップデートで上書きされないようにしてください。
4) 表示とアクセシビリティのポイント
nav要素とaria-labelで意味を明示し、ol/liで階層を表現します。例えば
<nav aria-label="パンくず"><ol><li><a href="/">ホーム</a></li><li>記事タイトル</li></ol></nav>
とするとスクリーンリーダーでも読みやすくなります。
どの方法でもバックアップを取り、テスト環境で確認してから本番に反映してください。
