パンくずリストをhtmlでコピペして簡単実装する方法

2025 12/07

2025/12/07

はじめに

このドキュメントは、「パンくずリスト html コピペ」という検索意図を整理し、ブログにそのまま使えるコードや実装手順を丁寧にまとめたものです。

対象読者:
– HTMLやWordPressで簡単にパンくずを導入したい方
– SEOやユーザビリティを改善したいサイト運営者

本書で扱う内容（全4章）:
1. はじめに（本章）
2. パンくずリストの基礎とHTML実装手順（構造化データ対応まで）
3. パンくずリストのSEO効果・種類・実装パターン
4. WordPressでのパンくずリスト設置方法

使い方の注意:
– 本文にはコピペで使えるHTML/CSS/JSON‑LDの例を載せます。貼り付け後はURLやクラス名を自サイトに合わせて必ず調整してください。
– アクセシビリティ（スクリーンリーダー向けの属性）やレスポンシブ対応も解説します。

本章の目的は、読み手がこの資料で何を得られるかを明確にすることです。次章では、まず基本構造と実際に使えるHTMLコードを段階的に解説します。

パンくずリストの基礎とHTML実装手順（構造化データ対応まで）

目的と基本ポイント

パンくずリストは現在ページの位置を示す補助ナビです。ユーザーが階層を把握しやすくなり、回遊性や使いやすさが向上します。最後の項目は現在ページなのでリンクにしません。

基本のHTML構造

ポイント：

で領域を示し、

で順序を明確にします。aria-labelで補助技術に配慮します。

JSON-LDでの構造化データ（例）

内や直前に埋め込みます。検索結果でリッチ表示されやすくなります。

{
“@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/category/”},
{“@type”:”ListItem”,”position”:3,”name”:”現在のページ”}
]
}

レスポンシブ対応の注意点
- 横幅が狭い端末では横スクロールや折り返しを検討します。タップ領域は大きめに確保してください。
- テキストが長い場合は省略（ellipsis）で見た目を整えます。
表示されないときの確認項目
- HTMLが実際に出力されているか（サーバー側テンプレートを確認）
- CSSでdisplay:noneやopacityで隠れていないか
- JavaScriptで置換・削除されていないか
- JSON-LDが正しく埋め込まれているか（構文エラー）
これらを順にチェックすると原因が見つかりやすいです。

パンくずリストのSEO効果・種類・実装パターン

1. SEO効果

パンくずリストはユーザーの現在位置を明確に示します。検索結果でパンくずが表示されると、見た目が整いクリック率（CTR）が上がる可能性があります。内部リンク構造を整理できるため、クローラーがページ階層を理解しやすくなり、サイト全体の評価に好影響を与えます。

2. パンくずの種類と例
- 階層型（位置型）: サイトのフォルダ構造を示す。「ホーム > カテゴリ > 商品名」
- 属性型（カテゴリ型）: 商品や記事の属性で分ける。「ホーム > ブランド > カテゴリ」
- 履歴型（トレイル）: ユーザーのたどった経路を示す。ECの絞り込み操作で使うことが多い
3. 実装パターン（例）

基本は
と
1. の組み合わせです。コピーして使える簡単な例:
```
<nav aria-label="breadcrumb">
  <ol>
    <li><a href="/">ホーム</a></li>
    <li><a href="/category/">カテゴリ</a></li>
    <li>商品名</li>
  </ol>
</nav>
```
  CSSで表示を矢印や区切り線に変えられます。JavaScriptで動的に生成する場合は、URLやページのメタ情報を参照して構築します。
  
  4. 検索結果での表示（構造化データ）
  
  検索結果にパンくずを反映させたいときは、JSON-LDのBreadcrumbListを追加します。簡単な例:
```
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type":"ListItem","position":1,"name":"ホーム","item":"https://example.com/"}
  ]
}
```
  5. 運用上の注意点
  - URLは一貫性を保ちます。重複URLがあると評価が分散します。
  - 深すぎる階層は避けます。3〜5層が目安です。
  - パンくずは主要な内部リンクの1つと考えて、サイト設計で統一してください。
  WordPressでのパンくずリスト設置方法
  
  はじめに
  
  WordPressでは、テーマに機能がある場合と自分で追加する場合があります。まずはテーマのドキュメントを確認してください。
  
  1. テーマに既存機能があるか確認
  
  テーマの設定画面やドキュメントに「パンくず」「Breadcrumb」の記載がないか探します。あれば有効化するだけで使えます。
  
  2. テンプレートに貼る自作コード（基本）
  
  例として、シンプルな関数をfunctions.phpに追加し、テンプレートに呼び出す方法です。
```
function my_breadcrumb(){
  if(is_front_page()) return;
  echo '<nav aria-label="パンくず"><ol class="breadcrumb">';
  echo '<li><a href="'.home_url().'">ホーム</a></li>';
  if(is_single()){
    $ancestors = get_post_ancestors(get_the_ID());
    $ancestors = array_reverse($ancestors);
    foreach($ancestors as $id){
      echo '<li><a href="'.get_permalink($id).'">'.get_the_title($id).'</a></li>';
    }
    echo '<li>'.get_the_title().'</li>';
  }
  echo '</ol></nav>';
}
```
  テンプレート（例: single.php）で my_breadcrumb(); を出力します。最後の要素はリンクにしません。
  
  3. プラグインで手早く導入
  
  おすすめ: Yoast SEO（yoast_breadcrumb()）、Breadcrumb NavXT（bcn_display()）、Rank Math。プラグインを有効化後、ウィジェットかテンプレート関数を呼び出します。
  
  4. 実装時の注意点
  - 出力はHTMLエスケープする
  - navにroleやaria-labelを付けてアクセシビリティ対応
  - スタイルはテーマのCSSで調整する
    プラグインは構造化データを自動で追加することが多く、手間が少ないです。