リッチリザルトに対応したパンくずリストの構造化データのマークアップ。

検索サイトの検索結果での見栄えを変えるリッチリザルトに対応させるためのパンくずリストの構造化データを、JSON-LDの書式でマークアップする方法のメモ。

リッチリザルトと構造化データ、JSON-LDの書式の詳細は前の記事を参照。

Googleのパンくずリスト公式ドキュメント。

schema.orgのパンくずリスト公式ドキュメント。

サイト内に表示させているパンくずリストの情報を、検索クローラーに提供するための構造化データとしてJSON-LDの書式で記述する。

1. オブジェクトのcontextを定義。「”@context”: “https://schema.org”」
2. オブジェクトがパンくずリストであることを定義。「”@type”: “BreadcrumbList”」
3. パンくずリストの必須プロパティー「itemListElement」を定義。
4. 「itemListElement」の必須プロパティー、「position」、「item」、「name」を定義。
5. Googleのリッチリザルトテストツールで確認。

パンくずリストのマークアップ

HTML内の任意の場所に、MIMEタイプ「application/ld+json」のscript要素タグで囲い、JSON-LDの書式でパンくずリストの構造化データを記述する。

パンくずリストが複数の場合は、[]で配列にして記述できる。

<script type="application/ld+json">
[{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "item": "https://memo.ag2works.tokyo",
    "name": "memo メモ [AG2WORKS]"
  },{
    "@type": "ListItem",
    "position": 2,
    "item": "https://memo.ag2works.tokyo/category/google/",
    "name": "Google"
  },{
    "@type": "ListItem",
    "position": 3,
    "item": "https://memo.ag2works.tokyo/post-1719/" //最後のアイテムのURLは省略可能,
    "name": "リッチリザルトに対応したパンくずリストの構造化データのマークアップ方法。"
  }]
},
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "item": "https://memo.ag2works.tokyo",
    "name": "memo メモ [AG2WORKS]"
  },{
    "@type": "ListItem",
    "position": 2,
    "item": "https://memo.ag2works.tokyo/category/SEO/",
    "name": "SEO"
  },{
    "@type": "ListItem",
    "position": 3,
    "item": "https://memo.ag2works.tokyo/post-1719/" //最後のアイテムのURLは省略可能,
    "name": "リッチリザルトに対応したパンくずリストの構造化データのマークアップ方法。"
  }]
}]
</script>

1.「BreadcrumbList」

パンくずリストを記述するには、「”@type” : “BreadcrumbList”」として情報を定義する。

「BreadcrumbList」は、リスト内のすべての要素を保持するコンテナアイテムで、少なくとも2つの「ListItem」を含む必要がある。必須プロパティーは「itemListElement」。

2.「itemListElement」
「itemListElement」プロパティーは「”@type” : “ListItem”」で定義される情報を持つ。

3.「ListItem」
「ListItem」には、リスト内の個々のアイテムに関する詳細情報を含める。
必須プロパティーは、「position」、「item」、「name」。
※ 「ListItem」のschema.org公式ドキュメント。

4.「position」
「position」プロパティーは、パンくずリスト内でのパンくずの位置。
パンくずリストの一つめ(普通はサイトのトップページ)のパンくずが「”position” : “1”」。

5.「item」
「item」プロパティーは、個々のパンくずを表すウェブページのURL情報。
値の指定方法は、ページのURLを直接指定する「URL」か、IDでURLを指定する「Thing」の2通りある。JSON-LDでは、「Thing」の場合、「@id」を使用してURLを指定する。

6.「name」
「name」プロパティーは、ユーザーに表示されるパンくずのタイトル。
値の指定方法は「Text」。

※ nameのある「Thing」を使用して「item」プロパティーを指定している場合、このプロパティーは不要。

リッチリザルトのテスト

Google公式のテストツール(リッチリザルトテスト)を使って、記述したコードが正しくリッチリザルト対応しているか確認する。

リッチリザルトの可否と、コード内から検出されたリッチリザルト対象のアイテムが表示される。

公開しているページのURLでチェックする方法と、リッチリザルト該当箇所のscriptコードだけを直接貼り付けてエラーチェックする方法がある。