複数のパンくずリストをschema.orgで記述する方法

[レベル: 上級]

schema.orgのパンくずリストをGoogleは公式にサポートし、ドキュメントを2週間前に更新しました。
その後、2つの重要な更新がさらにドキュメントに入っています。

現在のページをパンくずリストに含めるかどうか

現在のページはパンくずリストに含めても含めなくてもどちらでもかまいません。

schema.orgのパンくずリストの記述例には、現在のページが含まれていません。
たとえば、スティーブン・キングが書いた小説、「ザ・スタンド」の商品ページでは次のようにパンくずリストを設定できます。

• ホーム › 本 › 著者 › スティーブン・キング › ザ・スタンド

最後の「ザ・スタンド」が示すページは、つまり自分自身です。

しかし「ザ・スタンド」のページで次のようなパンくずリストを設定していたとしても、（Googleに対しては）まったく同じ役割を果たします。

• ホーム › 本 › 著者 › スティーブン・キング

最後の「ザ・スタンド」のパンくずを省略しています。

一般的には、現在のページもパンくずリストに含めることが多いように思います。
ところが、Googleのドキュメントの記述例には現在のページが含まれていません。
「含めなくてもいいのだろうか？」と疑問を抱いた人もいたのではないでしょうか（僕は抱きました）。

答えは、含めても含めなくてもどちらでもいいということになります。

ところで記述例には、「HOME」のようにトップページを示すパンくずも含まれていません。
これもあってもなくてもどちらでもいいのでしょうか？
確認してみます。

複数パンくずリスト

サイトによっては、1つのページに対して2つ以上のパンくずリストを設置しているケースがあります。

芸術 › 本 › 詩
文学 › 詩

schema.orgを用いた複数のパンくずリストもGoogleはサポートしています。
ドキュメントに複数パンくずリストの記述例が加わりました。

こちらはJSON-LDをシンタックスに使った複数パンくずリストの記述例です。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement":
  [
    {
      "@type": "ListItem",
      "position": 1,
      "item":
      {
        "@id": "https://example.com/arts",
        "name": "芸術"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item":
      {
        "@id": "https://example.com/arts/books",
        "name": "本"
      }
    },
    {
      "@type": "ListItem",
      "position": 3,
      "item":
      {
        "@id": "https://example.com/arts/books/poetry",
        "name": "è©©"
      }
    }
  ]
}
</script>
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement":
  [
    {
      "@type": "ListItem",
      "position": 1,
      "item":
      {
        "@id": "https://example.com/literature",
        "name": "文学"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item":
      {
        "@id": "https://example.com/literature/poetry",
        "name": "è©©"
      }
    }
  ]
}
</script>

<script type="application/ld+json"> で始まるパンくずリストを単純に2つ記述しているだけです。

こちらはmicrodataでの記述例です（ドキュメントでは、JSON-LD、RDFa、microdataの順で記述例が出ています。microdataは初期状態で出ていないかもしれません。右にある「もっと見る」のドロップダウンから選択できます）。

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/arts">
        <span itemprop="name">芸術</span></a>
    <meta itemprop="position" content="1" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/arts/books">
      <span itemprop="name">本</span></a>
    <meta itemprop="position" content="2" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/arts/books/poetry">
      <span itemprop="name">è©©</span></a>
    <meta itemprop="position" content="3" />
  </li>
</ol>
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/literature">
        <span itemprop="name">文学</span></a>
    <meta itemprop="position" content="1" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/literature/poetry">
      <span itemprop="name">è©©</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

JSON-LDと同じように、<ol itemscope itemtype="http://schema.org/BreadcrumbList"> で設定したパンくずリストを単純に2つ繰り返しているだけです。

パンくずリストを複数設置している場合の、優先順位という概念はないようですね。
検索結果のパンくずリスト表示には、上（HTMLコードで先にかかれている方）が採用されると推測します。

JSON-LDでひとまとめにして記述

ここはおまけです。

microdataはともかくとして、JSON-LDの <script type="application/ld+json"> ã‚’2回（以上）繰り返すのは格好悪いと感じる人がいるかもしれません。
すっきりと書くことができます。

2つ紹介します。

• Arrayを使う
• @graphを使う

Arrayを使う

まず、Array（アレイ）を使った記述です。

<script type="application/ld+json">
[{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement":
  [
    {
      "@type": "ListItem",
      "position": 1,
      "item":
      {
        "@id": "https://example.com/arts",
        "name": "芸術"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item":
      {
        "@id": "https://example.com/arts/books",
        "name": "本"
      }
    },
    {
      "@type": "ListItem",
      "position": 3,
      "item":
      {
        "@id": "https://example.com/arts/books/poetry",
        "name": "è©©"
      }
    }
  ]
},
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement":
  [
    {
      "@type": "ListItem",
      "position": 1,
      "item":
      {
        "@id": "https://example.com/literature",
        "name": "文学"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item":
      {
        "@id": "https://example.com/literature/poetry",
        "name": "è©©"
      }
    }
  ]
}
]
</script>

<script type="application/ld+json"> が1つになりました。
[]（角カッコ）でくくるArrayは複数のバリューやJSONオブジェクトを列挙する働きを持っていましたね。

@graphを使う

次は @graph を使った記述です。

<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@graph" :
[
{
  "@type": "BreadcrumbList",
  "itemListElement":
  [
    {
      "@type": "ListItem",
      "position": 1,
      "item":
      {
        "@id": "https://example.com/arts",
        "name": "芸術"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item":
      {
        "@id": "https://example.com/arts/books",
        "name": "本"
      }
    },
    {
      "@type": "ListItem",
      "position": 3,
      "item":
      {
        "@id": "https://example.com/arts/books/poetry",
        "name": "è©©"
      }
    }
  ]
},
{
  "@type": "BreadcrumbList",
  "itemListElement":
  [
    {
      "@type": "ListItem",
      "position": 1,
      "item":
      {
        "@id": "https://example.com/literature",
        "name": "文学"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item":
      {
        "@id": "https://example.com/literature/poetry",
        "name": "è©©"
      }
    }
  ]
}
]
}
<script>

<script type="application/ld+json"> に加えて、"@context": "http://schema.org" ã‚‚1つにできました。

@graph は複数の“ノード”をグループ化するために使われるキーワードです。

Arrayを使っても @graph を使っても、Googleはきちんと認識します。
構造化データテストツールでも、正しい検証結果がもちろん返ってきます。

さて、最後のおまけは脇に置いて、schema.orgの複数パンくずリストをGoogleがサポートしていることをこの記事では伝えました。
1つのページに複数のパンくずリストをあなたのサイトで設置しているなら、利用してみるといいでしょう。

なおschema.orgで記述したパンくずリストの検索結果表示の不具合はおおむね解消されているようです 現在も続いています。。
ですがたいていの場合、インデックス直後は重複が見られたとしても、1、2日ほど経過すると正常になります。