BreadcrumbList 構造化データは検索結果にパンくず階層を表示する

なぜこれを学ぶか

BreadcrumbList は 検索結果に階層情報を出してサイト内ナビゲーションを示せる。 特に EC や大規模メディアでは、ユーザーが SERP から「どのカテゴリの記事か」を把握しやすくなり CTR が上がる。

EC・メディア・コーポレートの全カテゴリページ / 記事ページに実装すべき。

学ばないと起きること

学ぶメリット

• 検索結果に階層が表示され視認性 + CTR 向上
• サイト構造を Google に正確に伝えられる
• 商談で「最後の item URL は省略」を即答できる

仕組み

必須プロパティ

各 ListItem:

• position = 順番（1 から始まる）
• name = 項目名
• item = URL（最後の項目は省略推奨）

実装例

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "spotyou",
      "item": "https://spotyou.ai/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Blog",
      "item": "https://spotyou.ai/blog"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "SEO",
      "item": "https://spotyou.ai/blog/seo"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "canonical の正しい使い方"
    }
  ]
}
</script>

最後の項目（現在ページ）には item を入れない。

キー概念

HTML パンくずとの併用

HTML 表示も組み合わせる:

<nav aria-label="パンくず">
  <ol>
    <li><a href="/">spotyou</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/blog/seo">SEO</a></li>
    <li>canonical の正しい使い方</li>
  </ol>
</nav>

HTML パンくずと構造化データの内容を一致させる。

複数パスのページ

同じページが複数のカテゴリに属する場合（EC で商品が複数カテゴリに）、複数の BreadcrumbList を実装可能:

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type": "ListItem", "position": 1, "name": "spotyou", "item": "..."},
    {"@type": "ListItem", "position": 2, "name": "EC", "item": "..."},
    {"@type": "ListItem", "position": 3, "name": "ドレス", "item": "..."},
    {"@type": "ListItem", "position": 4, "name": "青いドレス"}
  ]
}

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type": "ListItem", "position": 1, "name": "spotyou", "item": "..."},
    {"@type": "ListItem", "position": 2, "name": "セール", "item": "..."},
    {"@type": "ListItem", "position": 3, "name": "夏物", "item": "..."},
    {"@type": "ListItem", "position": 4, "name": "青いドレス"}
  ]
}

Google は最も適切なパンくずを SERP に表示する。

name の長さ

各項目の name は短く明確に:

長すぎると検索結果で省略表示される。

階層は何階層まで？

技術的な上限はないが、SERP 表示は 3-4 階層程度までが見やすい。 深い階層は表示時に省略される。

よくある誤解

実務での適用

CMS テンプレ実装

各記事 / 商品ページのテンプレに動的に組み込み:

const breadcrumbSchema = {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  itemListElement: breadcrumbItems.map((item, index) => ({
    "@type": "ListItem",
    position: index + 1,
    name: item.name,
    ...(index < breadcrumbItems.length - 1 && { item: item.url })
  }))
};

最後の項目だけ item を入れない処理。

EC サイトの BreadcrumbList 設計

カテゴリ階層をパンくずで再現:

ホーム > EC > ドレス > マキシ丈ドレス > 青いマキシ丈ドレス

/products/dress-maxi-blue で:

"itemListElement": [
  {"position": 1, "name": "spotyou", "item": ".../"},
  {"position": 2, "name": "EC", "item": ".../products"},
  {"position": 3, "name": "ドレス", "item": ".../products/dresses"},
  {"position": 4, "name": "マキシ丈ドレス", "item": ".../products/dresses/maxi"},
  {"position": 5, "name": "青いマキシ丈ドレス"}
]

トラブル別の対処

公式ソース

• BreadcrumbList 構造化データ
• 構造化データの紹介
• SEO スターター ガイド（情報設計）

自己テスト

これらの内容を採点付きで挑戦したい場合は、本ドメインのプロ試験で 5 問形式で確認できる。