パンくずリスト実装 BreadcrumbList 2026 | SEO/AIO効果・JSON-LD例

この記事の要点

パンくずリストとは：ユーザーの現在位置を示すナビゲーション
SEO効果：検索結果にパンくず表示、サイト構造の明示
AIO効果：AIがサイト階層を理解し、関連ページも引用されやすくなる
実装方法：HTML + BreadcrumbListスキーマの組み合わせ

パンくずリストとは

パンくずリスト（Breadcrumb Navigation）は、ユーザーがサイト内の位置を把握するためのナビゲーションです。「ホーム > カテゴリ > 記事」のように階層構造を表示します。

パンくずリストの効果

効果詳細 ユーザビリティ向上現在位置の把握、上位階層への移動が容易に SEO効果検索結果にパンくず表示、内部リンク強化 AIO/LLMO効果AIがサイト構造を理解し、関連コンテンツを把握

BreadcrumbListスキーマの実装

ステップ1：HTMLパンくずの作成

<nav aria-label="パンくずリスト">
  <ol class="breadcrumb">
    <li><a href="/">ホーム</a></li>
    <li><a href="/column/">コラム</a></li>
    <li>現在のページタイトル</li>
  </ol>
</nav>

ステップ2：JSON-LDマークアップ

<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/column/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "現在のページタイトル",
      "item": "https://example.com/column/current-page/"
    }
  ]
}
</script>

ステップ3：検証

Google Rich Results Testでエラーチェック
HTMLとJSON-LDの内容が一致していることを確認
URLが正しい絶対パスになっているか確認

SEO/AIOへの具体効果

SEO効果

検索結果にパンくず表示：URLではなく階層名が表示され、クリック率向上
内部リンク強化：上位階層ページへのリンクが増加
サイト構造の明示：クローラーがサイト構造を正確に把握

AIO/LLMO効果

サイト全体の理解促進：AIがページ間の関係性を把握
関連ページの引用増加：上位階層や関連カテゴリのページも引用されやすくなる

よくあるミスと対策

ミス対策 HTMLとJSON-LDの不一致表示内容とマークアップを同期相対パスの使用https://から始まる絶対URLに階層の逆転position番号を正しく設定最終ページにitemがない現在ページもitem URLを含める（任意）

よくある質問（FAQ）

Q: パンくずは全ページに必要ですか？

A: トップページ以外の全ページに実装することを推奨します。特にカテゴリ構造があるサイトでは効果的です。

Q: WordPressでの実装方法は？

A: Yoast SEOやRank Mathプラグインで自動生成できます。テーマによってはget_breadcrumb()関数を使用します。

まとめ

☑ HTMLでパンくずナビゲーションを表示
☑ BreadcrumbListスキーマでマークアップ
☑ HTMLとJSON-LDの内容を一致させる
☑ 絶対URLを使用
☑ Google Rich Results Testで検証

パンくずリストの実装とSEO/AIOへの効果