CLUSTER SEO BLOG
テクニカルSEOにフォーカスしたSEO対策をまとめています

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

こんにちは、テクニカルSEO対策サービス「CLUSTER SEO」開発チームの江頭です。

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

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

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

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

JSON-LD形式で指定する場合

JSON-LD 形式では、構造化データを 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://cluster-seo.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "SEO",
      "item": "https://cluster-seo.com/blog/category/seo/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "SEO内部対策",
      "item": "https://cluster-seo.com/blog/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://cluster-seo.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "SEO",
      "item": "https://cluster-seo.com/blog/category/seo/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "SEO内部対策",
      "item": "https://cluster-seo.com/blog/category/seo/on-page-seo/"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "パンくずリストの構造化データの書き方",
      "item": "https://cluster-seo.com/blog/category/seo/on-page-seo/structured-data-for-breadcrumb.html"
    }
  ]
}
</script>

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

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

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://cluster-seo.com/"><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://cluster-seo.com/blog/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://cluster-seo.com/blog/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 タグを記述してよいことになっています。

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

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://cluster-seo.com/blog/" itemprop="url">
      <span itemprop="title">HOME</span>
    </a>
  </li>
  <li class="breadcrumb__item" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="https://cluster-seo.com/blog/category/seo" itemprop="url">
      <span itemprop="title">SEO</span>
    </a>
  </li>
  <li class="breadcrumb__item">SEOツール機能別24選【2020年版】</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://cluster-seo.com/blog/" 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://cluster-seo.com/blog/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ツールでチェックしてみることをお勧めします。

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

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

原因1.構造化データの構文エラー

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

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

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

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

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

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

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

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

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

原因3.パンくずの名前が長すぎる

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

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

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

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

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

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

https://developers.google.com/search/docs/guides/sd-policies#content

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

まとめ

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

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

またSEOで上位を狙うには、構造化データのだけでなく、その他の内部対策も必要です。テクニカルSEOによるSEO対策サービス「CLUSTER SEO」なら、Googleガイドラインに準拠した内部対策をサイト全体で効率的に進めることができます。

Page Top