パンくずリストの構造化データの書き方

2024年7月26日

検索結果画面にパンくずリストのリッチリザルトを表示するには、Web ページに構造化データをマークアップします。検索したユーザーにとっては、URL が表示されるよりも、パンくずが表示された方がページの内容を把握しやすくなりますよね。

構造化データをマークアップすると、Google 検索エンジンがページの内容を正しく理解できることにつながるので、SEO上の効果も見込めます。

本記事では、HTML にパンくずリストの構造化データを正しくマークアップする方法を詳しく説明します。

リッチリザルトについては、以下の記事を参考にしてください。

関連記事：リッチリザルト（リッチスニペット）対応まとめ

SEOの基本知識についてはオンラインセミナーでも解説しています。セミナーではGoogle公式のSEOガイドであるGoogle検索セントラルの「Google検索の仕組み」と「スターターガイド」の内容を分かり易く解説します。これからSEOを始めようと考えている方は是非ご参加ください。

Google公式SEOガイドから正しいSEO知識を身につけるSEOセミナー【入門編】

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

パンくずリスト構造化データとは、サイト構造を表すナビゲーション「パンくずリスト」を、Googleクローラーが認識できるような形式にしたメタ情報のことです。

構造化データは、以下いずれかの形式で指定します。

JSON-LD形式
microdata形式

構造化データをWebページに設置すると、検索結果にパンくずリストが表示されるようになります。

なお、パンくずリストに対応しているのは、検索エンジンの90%を占めるGoogleとYahoo!です。なお、Bingの検索結果にはパンくずリストは表示されません。

関連記事：検索エンジンの国別シェア【2020年版】

パンくずリスト構造化データのSEO効果

パンくずリストの構造化データを設置すると、Googleがサイトの構造を正しく認識できるようになるため、SEO上の効果が見込めます。

また、構造化データも設置すると、検索結果にパンくずリストが表示されるようになります。

一方、構造化データを設置しないときは、検索結果にはURLが表示されます。

このように、構造化データはSEOに影響を及ぼす要素なのです。

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

JSON-LD 形式のパンくずリストでは、BreadcrumbList型の構造化データを JSON 形式として、script タグ内に記載します。記載する場所は、head 内でも、body 内でも構いません。

以下は、3階層のパンくずリストの例です。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "HOME",
      "item": "https://technical-seo.jp/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "SEO",
      "item": "https://technical-seo.jp/category/seo/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "SEO内部対策",
      "item": "https://technical-seo.jp/category/seo/on-page-seo/"
    }
  ]
}
</script>

パンくずリストごとに、構造化データ内で設定する項目は、以下の3つです。

項目	説明
position	パンくずリストの階層を整数で指定します。一番上の階層が1です。
name	パンくずの名前です。
item	パンくずのリンク先URLです。

検索結果には、次のようなリッチリザルトとして表示されます。

Google 検索結果では、最上位のノードのリンク先がドメインTOPの場合、最上位ノード（この場合は”HOME”）は省略されます。

Yahoo検索結果では、最上位のノードは省略されず、必ず表示されます。

なお、パンくずリストには最後のノードに該当する、現在のページを指定することもできます（以下の例ではpositionが4の部分）。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "HOME",
      "item": "https://technical-seo.jp/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "SEO",
      "item": "https://technical-seo.jp/category/seo/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "SEO内部対策",
      "item": "https://technical-seo.jp/category/seo/on-page-seo/"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "パンくずリストの構造化データの書き方",
      "item": "https://technical-seo.jp/category/seo/on-page-seo/structured-data-for-breadcrumb/"
    }
  ]
}
</script>

この場合でも、検索結果のリッチリザルトは、パンくずリストの最後のノードを指定していないときと同じ表示になります。

よくある問題を「7.リッチリザルトで表示されないときのチェックポイント」でまとめているので、参考にしてください。

関連ツール：各ページの構造化データがわかりやすい【アナトミー】

microdata形式のパンくずリスト

microdata 形式では、パンくずリスト全体やリンクを表す要素に、itemprop 属性などの属性を追加します。属性を追加する必要があるのは、以下の5つの部分です。

対象	追加する属性	代表例
パンくずリスト全体	itemscope itemtype=”https://schema.org/BreadcrumbList”	ul タグ
各パンくず	itemprop=”itemListElement” itemscope itemtype=”https://schema.org/ListItem”	li タグ
リンク	itemprop=”item”	a タグ
パンくず名	itemprop=”name”	a タグ直下の spanなど
順番	itemprop=”position”	meta タグ

microdata 形式のパンくずリストの HTML サンプルです。

<ul class="breadcrumb__list" itemscope itemtype="https://schema.org/BreadcrumbList">
  <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://technical-seo.jp/"><span  itemprop="name">HOME</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://technical-seo.jp/category/seo/"><span itemprop="name">SEO</span></a>
    <meta itemprop="position" content="2" />
  </li>
  <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://technical-seo.jp/category/seo/on-page-seo/"><span itemprop="name">SEO内部対策</span></a>
    <meta itemprop="position" content="3" />
  </li>
  <li class="breadcrumb__item">パンくずリストの構造化データの書き方</li>
</ul>

なお、順番を表す整数は、パンくずリストの HTML に通常含まれません。itemprop 属性を付ける要素が存在しないため、タグを追加し、itemprop 属性と content 属性を指定しています。body 内に meta 要素があると違和感を感じますが、HTML 5仕様では itemprop 属性を付与した meta タグを記述してよいことになっています。

よくある問題を「7.リッチリザルトで表示されないときのチェックポイント」でまとめているので、参考にしてください。

data-vocabulary.orgからschema.orgへの移行

2020年4月6日以降、Google は data-vocabulary.org スキーマで記述された構造化データをサポートしないと発表しています。data-vocabulary.org スキーマで指定されたパンくずリストは、リッチリザルト表示されなくなります。

Structured data schemas such as schema.org and data-vocabulary.org are used to define shared meaningful structures for markup-based applications on the Web. With the increasing usage and popularity of schema.org we decided to focus our development on a single SD scheme. As of April 6, 2020, data-vocabulary.org markup will no longer be eligible for Google rich result features.
https://webmasters.googleblog.com/2020/01/data-vocabulary.html

WordPressのテーマでは、data-vocabulary.orgスキーマのパンくずリストが利用されていることが多く、schema.orgスキーマへの移行が必要です。

data-vocabulary.org スキーマと schema.org との対応関係は以下の通りです。

対象	data-vocabulary.org スキーマ	schema.org スキーマ
パンくずリスト全体	（該当属性なし）	itemscope itemtype=”https://schema.org/BreadcrumbList”
各パンくず	itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”	itemprop=”itemListElement” itemscope itemtype=”https://schema.org/ListItem”
リンク	itemprop=”url”	itemprop=”item”
パンくず名	itemprop=”title”	itemprop=”name”
順番	（該当属性なし）	itemprop=”position”

たとえば、data-vocabulary.org スキーマで書かれた以下の HTML を例に挙げます。

<ul class="breadcrumb__list">
  <li class="breadcrumb__item" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="https://technical-seo.jp/" itemprop="url">
      <span itemprop="title">HOME</span>
    </a>
  </li>
  <li class="breadcrumb__item" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="https://technical-seo.jp/category/seo" itemprop="url">
      <span itemprop="title">SEO</span>
    </a>
  </li>
  <li class="breadcrumb__item">SEOツール26選 機能別に比較【2021年版】</li>
</ul>

これを schema.org に移行すると、次のようになります。

<ul class="breadcrumb__list" itemscope itemtype="https://schema.org/BreadcrumbList">
  <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a href="https://technical-seo.jp/" itemprop="item">
      <span itemprop="name">HOME</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>
  <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a href="https://technical-seo.jp/category/seo" itemprop="item">
      <span itemprop="name">SEO</span>
    </a>
    <meta itemprop="position" content="2" />
  </li>
  <li class="breadcrumb__item">【2019年最新版】SEOツール機能別20選【初心者必見】</li>
</ul>

テクニカルSEOブログで使用しているテーマ「LION Blog」の場合、functions.php を次のように変更して対応しました。

// 変更前
$str.= '<ul class="breadcrumb__list">';
// 変更後
$breadcrumbLevel = 1;
$str.= '<ul class="breadcrumb__list" itemscope itemtype="https://schema.org/BreadcrumbList">';

// 変更前
$str.= '<li class="breadcrumb__item" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">・・・</li>';
// 変更後
$str.= '<li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">・・・<meta itemprop="position" content="' . $breadcrumbLevel++ . '" /></li>';

// 変更前
itemprop="url"
// 変更後
itemprop="item"

// 変更前
itemprop="title"
// 変更後
itemprop="name"

アナトミーで構造化データを確認する

ページにパンくず構造化データが正しく設定されているかどうかは、ツールで確認すると便利です。

単一ページを確認するには、構造化データテストツールやリッチリザルトテストツールを利用します。

関連記事：リッチリザルトテストツールの使い方

サイト全体で構造化データを確認するには、SEO分析ツール「アナトミー」のタグ構造チェック機能を使います。ページごとの構造化データを確認できます。

リッチリザルトで表示されないときのチェックポイント

構造化データをマークアップしても、パンくずリストがリッチリザルトとして表示されない場合は、さまざまな原因が考えられます。

まずは、構造化データに対応したSEOツールでチェックしてみることをお勧めします。

関連記事：SEOツール26選機能別に比較【2021年版】

またよくある原因は以下の通りです。

構造化データの構文エラー
当該URLがまだインデックスされていない
パンくずの名前が長すぎる
複数のパンくずリストを構造化データに指定している
構造化データで指定したパンくずがページに表示されていない

原因１．構造化データの構文エラー

まずは、JSON-LD の構文エラーがないかどうかを Googleサーチコンソールで確認します。手順は以下の通りです。

URL を入力して Enter を押下する
URL 検査画面で [公開URLをテスト]ボタンをクリックする

以下は、JSON の書式エラーがあった場合の画面です。

JSON で書き間違いが多いのが「,」（カンマ）です。{}ブロック内の最後に「,」を記述しないように注意してください。また、 /* */ や // といったコメントも記述できません。

もしくは、構造化データテストツールでも構文チェックができます。

構造化データテストツール

エラーの対処方法については、以下ページにも詳しくまとめています。

関連記事：リッチリザルトテストツールの使い方

原因２．当該URLがまだインデックスされていない

クローラーがまだページをクローリングしていない可能性があります。
Googleサーチコンソールで URL を入力し、[インデックス登録をリクエスト]ボタンをクリックしてください。

早ければ数分～数十分程度でクローリングされ、検索結果画面に表示されるようになります。

関連記事：サーチコンソール「URL検査ツール」の使い方

原因３．パンくずの名前が長すぎる

パンくずの名前（name）が一定文字数を超えると、通常の URL が表示されるようです。スマホではPCよりも文字数の制限が厳しく、PC ではパンくずリストが表示されていても、スマホでは通常の URL が表示されているというケースもあります。どうしても表示させたい場合は、パンくずの名前を短くしてみてください。

原因４．複数のパンくずリストを構造化データに指定している

構造化データは複数指定が可能ですが、構造化データとしてパンくずリストを複数指定した場合は、最後に指定した構造化データが表示されます。

原因５．構造化データで指定したパンくずがページに表示されていない

Google の構造化データガイドラインでは、ページに表示されている内容と構造化データを一致させるように記載されています。

ページの読者に表示されないコンテンツをマークアップしないでください。たとえば、JSON-LD マークアップでパフォーマーが記述されている場合、HTML の本文でも同じパフォーマーが記述されている必要があります。
https://developers.google.com/search/docs/guides/sd-policies#content

構造化データで指定したパンくずが実際には存在しないような場合や、大きく異なる場合は Google のガイドライン違反となります。ガイドライン違反があると、構造化データが認識されなかったり、最悪の場合は検索順位への影響もあります。

まとめ

以上、パンくずリストを構造化データとしてマークアップする方法を説明しました。

パンくずリストの構造化データは、CMS で管理されたサイトでは標準で実装されているので心配はいりません。ですが、静的サイトや自作テーマの場合には、意識して構造化データを実装するようにしましょう。

シンメトリックが定期開催している無料のSEOセミナーでは、Google公式のSEOガイドを読み解き、構造化データの注意点や、コンテンツ制作上の注意点、ディレクトリ構造についても解説します。

これからSEOに取り組む方や、SEOについて何から学べばいいのか分からないといった方にお勧めのセミナーです。

最後に弊社ではサーチコンソールとGA4データを1つにまとめて分析ができる「SEO分析ツールアナトミー」を提供しております。運用しているサイトのSEOチェックを行うのに必要な機能が揃ったダッシュボードプランは全て無料でずっとご利用いただけます。是非、アナトミーに無料登録してサイトのSEOチェックをしてみてください。