【初心者向け】パンくずリスト構造化データの作り方と実装例｜SEO効果を高める完全ガイド

パンくずリスト構造化データとは？

パンくずリスト（Breadcrumb List）は、ユーザーが サイト内でどの位置にいるか を示すナビゲーションです。
これを構造化データとして設定すると、Googleの検索結果に階層リンクが表示されるようになり、クリック率（CTR）の向上が期待できます。

表示例（Google検索結果）

トップ > ブログ > 記事タイトル

このような階層リンクが検索結果に表示されるのは、構造化データ（BreadcrumbList） を正しく設定しているサイトだけです。

HTMLでのパンくずリスト例

まずは基本的なHTML構造です。

<!-- パンくずリスト -->
<nav aria-label="パンくずリスト">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/">
        <span itemprop="name">トップ</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/blog/">
        <span itemprop="name">ブログ</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">この記事タイトル</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

ポイント

• <ol> に itemscope itemtype="https://schema.org/BreadcrumbList" を指定
• 各 <li> に itemprop="itemListElement" と ListItem 型を指定
• position は必須。階層順（1, 2, 3...）を明示する

JSON-LD形式でのパンくずリスト

Googleが推奨している形式は JSON-LD形式 です。
HTML構造に依存せず、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/sample-post/"
    }
  ]
}
</script>

ポイント

• "@context" は常に "https://schema.org"
• "@type": "BreadcrumbList" を明記
• "position" は必ず1から順に設定する
• "item" にページURL、"name" にリンクテキストを記載

WordPressなどで自動生成する方法（PHP例）

パンくずを自動生成する関数をPHPで組むと、各ページに共通して利用できます。

<?php
function breadcrumb_jsonld($items) {
  $data = [
    "@context" => "https://schema.org",
    "@type" => "BreadcrumbList",
    "itemListElement" => []
  ];

  foreach ($items as $i => $item) {
    $data["itemListElement"][] = [
      "@type" => "ListItem",
      "position" => $i + 1,
      "name" => $item["name"],
      "item" => $item["url"]
    ];
  }

  echo '<script type="application/ld+json">' . json_encode($data, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) . '</script>';
}

// 使用例
$breadcrumbs = [
  ["name" => "トップ", "url" => "https://example.com/"],
  ["name" => "ブログ", "url" => "https://example.com/blog/"],
  ["name" => "この記事タイトル", "url" => "https://example.com/blog/sample-post/"]
];

breadcrumb_jsonld($breadcrumbs);
?>

構造化データの確認方法

作成後は、必ずGoogle公式のツールで確認しましょう。

• 構造化データ テストツール（旧リッチリザルトテスト）
• [Google Search Console → 拡張 → パンくずリスト]

「有効」と表示されていれば正しく認識されています。

まとめ

さいごに

パンくずリストの構造化データは、小さな実装でSEO効果が高い 項目です。
正しい階層構造とURLを設定することで、検索結果の見栄えとユーザー体験の両方を向上できます。