を使います。例：
<nav aria-label="パンくずリスト">
<ol class="breadcrumbs">
<li><a href="/">ホーム</a></li>
<li><a href="/blog/">ブログ</a></li>
<li>パンくずリストの作り方</li>
</ol>
</nav>
olを使うと階層が明確になります。現在のページはリンクにせずli内のテキストにします。
CSSでの基本スタイル例
矢印区切りや横並びは簡単に実装できます。例：
.breadcrumbs{display:flex;list-style:none;padding:0;margin:0}
.breadcrumbs li+li:before{content:"›";margin:0 8px;color:#666}
.breadcrumbs a{color:#0366d6;text-decoration:none}
視覚的な区切りを疑似要素で作るとHTMLはシンプルに保てます。
レスポンシブ対応のポイント
小さい画面では横スクロールを許可し、タップしやすい余白を確保します。例：
nav{overflow-x:auto}
.breadcrumbs li{padding:8px 12px;white-space:nowrap}
長いパンくずは省略表示（…）や最後の数階層だけ表示するなど工夫します。
アクセシビリティの配慮
navにaria-labelを付け、リンクには分かりやすいテキストを使います。パンくずを補助的なナビゲーションと位置付け、スクリーンリーダーに過剰な冗長を与えないようにします。
構造化データ（SEO強化）の記述方法
概要
検索エンジンにパンくずリストの構造を正確に伝えるには、構造化データの記述が有効です。主な記法はJSON-LD（Google推奨）、microdata、RDFaの3つです。まずはJSON-LDを使う方法を紹介します。簡潔で導入が容易です。
JSON-LD（おすすめ）
かのどちらにも置けますが、head内にまとめておくと管理しやすいです。例：
<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>
microdata の例
HTML要素に属性を付けます。例：
<nav itemscope itemtype="https://schema.org/BreadcrumbList">
<ol>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="/"><span itemprop="name">ホーム</span></a>
<meta itemprop="position" content="1" />
</li>
</ol>
</nav>
RDFa の例
RDFaも属性で記述します。記述法はプロジェクトに合わせて選びます。
設置・検証のポイント
・表示しているパンくずと構造化データの中身を一致させてください。
・positionは1から連番にします。
・URLは絶対パスで正確に記述します。
・GoogleのリッチリザルトテストやSearch Consoleで検証してください。
導入はJSON-LDが手軽で誤りも起きにくいためおすすめです。
WordPressでのパンくずリスト実装方法
概要
WordPressでは主に「プラグインを使う方法」と「テーマの機能やテンプレートに直接追加する方法」の二通りでパンくずを実装します。初心者はプラグイン、テーマ制作者はテンプレート編集で対応するとわかりやすいです。
プラグインでの実装（手順と例）
- 代表的なプラグイン：Breadcrumb NavXT、Yoast SEO
- 手順（Breadcrumb NavXTの例）
- 管理画面→プラグイン→新規追加で「Breadcrumb NavXT」を検索して有効化。
- 外観→ウィジェットで「Breadcrumb NavXT」ウィジェットを配置、または投稿内でショートコード
[bcn_display] を使用。
- 設定→Breadcrumb NavXTで区切り文字や先頭ラベルを調整。
- Yoast SEOは設定でパンくずを有効にし、テーマにテンプレートタグを追加して表示します。
テーマに直接追加する方法（コード例）
- テーマにパンくず表示を組み込む場合、子テーマで編集します。代表的なYoastのPHPタグ例：
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
}
- 表示するファイルは header.php、single.php、page.php などページに応じて選びます。
表示位置とスタイル（簡単なCSS例）
- 表示位置はコンテンツ上部が一般的です。見やすさを優先して余白やフォントサイズを調整してください。
#breadcrumbs{font-size:14px;margin-bottom:1em}
#breadcrumbs a{color:#0073aa;text-decoration:none}
#breadcrumbs .separator{margin:0 0.5em;color:#666}
よくある問題と対処
- キャッシュが古いと表示が反映されないためキャッシュをクリアしてください。
- パーマリンク構造を変更した場合は再設定（保存）すると表示が安定します。
- テーマによってはそもそもパンくず機能があり、重複表示に注意してください。
パンくずリスト設置時の注意点
設計段階での注意
パンくずはサイトの階層を分かりやすく示すための道標です。はじめに情報設計を固め、親カテゴリ→子カテゴリ→詳細の流れが論理的になるよう設計してください。カテゴリが複数にまたがる場合は代表的な経路を決めます。
最後の項目はリンクにしない
現在表示しているページはパンくずの最後に置き、リンクにしないでください。ユーザーに「ここが現在地」という明確な手がかりを与えます。
重複・クロール対策
同じ内容を複数URLで公開すると重複と見なされます。パンくずで異なる経路を出す場合はcanonicalタグで正規URLを示し、サイトマップと整合させてください。
SEOとキーワードの扱い
カテゴリー名や項目に適切なキーワードを自然な形で入れると効果的です。過剰なキーワード詰め込みは避け、ユーザーにとって分かりやすい名称を優先します。
技術的確認とテスト
構造化データ（Schema）でマークアップしたら、Google Search Consoleや構造化データテストツールで認識を確認してください。モバイル表示やパンくずの区切り文字が崩れないかもテストします。
アクセシビリティと表示
パンくずは視覚だけでなくスクリーンリーダーでも理解できるようにaria属性や適切なHTML要素を使ってください。区切りは視覚的に分かりやすく、テキストは短めに保つと良いです。
まとめ：パンくずリスト作成のポイント
要点のまとめ
パンくずリストは訪問者が現在地を把握しやすくし、サイト内の回遊を促します。見やすい位置に設置し、階層を簡潔に表現してください。HTML/CSSだけでも十分表示できますし、CMSではプラグインで手早く導入できます。
SEOと構造化データ
Google推奨のJSON-LDで構造化データを記述すると検索結果表示に有利になります。リンク先のURLとラベルを正確に記載し、ページ間の階層が一致しているか確認してください。
実装時のチェックリスト
- 表示位置：ページ上部（タイトル近く）が一般的
- テキスト：短く分かりやすいラベル
- スマホ対応：折り返しや省略に配慮
- アクセシビリティ：aria属性やコントラストを確認
運用と見直し
サイト構成変更やコンテンツ追加時に必ず更新してください。外部リンクやリダイレクトで階層が変わるとユーザーに混乱を招きます。
結び
パンくずリストは小さな要素ですが、使いやすさと検索表示に影響します。設置と運用を丁寧に行えば、サイト全体の利便性が高まります。ご不明点があれば具体的なサイト情報を教えてください。
