[レベル: 中〜上級]
Googleは、schema.orgを使用したパンくずリストをサポートしました。
これまでは、schema.orgで定義されているもののパンくずリストを表す構造化データとしてschema.orgを利用することはできませんでした。
パンくずリストのドキュメント更新
パンくずリスト (breadcrumbs) の開発者向けドキュメント（英語）が2015年6月12日付で更新され、schema.orgを使ったパンくずリストの記述を説明するようになっています。
以前は、Data-Vocabulary.org を使った例でした。
Data-Vocabulary.orgは、すでに運営維持を停止しその役割をschema.orgに譲っています。
Googleがschema.orgのパンくずリストのサポートを開始したことは、Dan Brickley（ダン・ブリックリー）氏に確認が取れているので確かな情報です。
Brickley氏は英Googleの人で、schema.orgの開発運用を担当しています。
We got there eventually. Let me know if you find any problems!
やっとここまでたどりついた（パンくずリストをサポートできた）。問題があったら教えてくれ。
schema.orgのパンくずリスト実装方法
それでは、schema.orgでのパンくずリストの実装方法を見てみましょう。
schema.orgでパンくずリストをマークアップするには次の2つのタイプを使用します。
細かくいうと、ListItem は BreadcrumbList に“エンベッド”します
下のパンくずリストをマークアップします。
芸術 › 本 › 詩
JSON-LD
まずは、シンタックスに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>記述されている以外にどんなプロパティがあるかなどの詳細を知りたい方は、schema.orgのページを見てください。
この記事では必要最低限の記述に絞ります。
環境に合わせて置き換えるのは次の3つのプロパティです。
- @id
- name
- position
@id
@id はそのパンくずで示されるページのURLです。
例でいうと、https://example.com/arts や https://example.com/arts/books です。
name
name はそのパンくずリストのラベルです。
例でいうと、「芸術」や「本」です。
position
position はパンくずリストの順番です。
先頭が「1」、2番目が「2」と続きます。
パンくずリストの数だけ ListItem のエンベッドを繰り返します。
ちなみに itemListElement の要素としてのパンくずが複数あるので、アレイ（[ ]）を使っていることに気付いていればJSON-LDを十分に理解できている証拠です。
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>次の3つの要素をマークアップします。
- URL
- ラベル
- 順番
URL
そのパンくずリストが示すページのURLを、itemprop="item" でマークアップします。
ラベル
パンくずリストのラベルは、itemprop="name" でマークアップします。
順番
パンくずリストの順番は、itemprop="position" でマークアップします。
例で注意すべき点は、meta タグを使っている点です。
<meta itemprop="position" content="1" />
position（順番）の値は、ブラウザに表示する必要がない情報です。
言い換えれば、人間のユーザーには不要です。
検索エンジン（コンピュータ）のためだけの情報です。
なので、ブラウザは表示させずにソースコードのなかだけに現れるようにしています（meta descriptionタグと同じ）。
metaで隠さずに、ブラウザに本当に表示する数字をマークアップしてもなんら問題ありません（おススメはしませんが）。
順番は、content で指定します。
1番目（パンくずの先頭）なら content="1"、2番目なら content="2" です。
JSON-LDとmicrodataではプロパティが少々異なっている点にも気を付けてください。
こういうのは他のタイプには見られません。
なお、RDFa (RDFa Lite) もシンタックスとして使えますが省略します。
RDFaを使う人は僕の説明など不要でしょう。
ドキュメントの例を見れば自分で理解できるはずです。
構造化データテストツールでチェック
マークアップが適切かどうかを必ず構造化データテストツールで検証します。
「問題ありません」が出れば合格です！
ホント、ようやくパンくずリストにもschema.orgが使えるようになりました。
近いうちに、このブログのパンくずリストをschema.orgに僕は移行します。
とはいえ、Data-Vocabulary.orgなどのすでに利用されている仕様のサポートをGoogleがやめたわけではありません。
したがって既存の設定を変更する必要はまったくありません。
新しいサイトを公開したり、今までマークアップしていなくてこれからパンくずリストをマークアップしたりするならschema.orgを採用するといいでしょう。
個人的には、シンタックスにはJSON-LDがやっぱりわかりやすくて使いやすいと思います。
microdata（とRDFa）は記述していて混乱しがちです。
【UPDATE】
パンくずラベルが検索結果で複数表示されるという不具合が出ているので、実装は待ったほうがいいかもしれません。
【UPDATE 2】
不具合は解決済みです。
schema.orgのパンくずリストを問題なく使うことができます。