パンくずリストの考え方を整理する (2016年版)

前回のエントリーから1年ほど経過して、Googleをはじめとする検索エンジンが必要とするデータのあり方も変化してきました。
今回は、2015年版の変更点と最近のトレンドを確認して、検索エンジンにも快適な環境を提供しましょう。:)

※2015年版はこちら

psn.hatenablog.jp

サマリー

変わらない事
- パンくずリストの表示
変更されたこと
すなばいじりで提供しているやつについて

変わらない事

TL;DR

基本的な要件は変わっていません。

パンくずリストの表示

ここでは、Google Developers の例に合わせてスティーヴン・キングの「ザ・スタンド」という著書を例に紹介します。

基本パターン

(1)ホーム > (2)本 > (3)作者別 > (4)スティーヴン・キング > (5)ザ・スタンド

(1)http://www.example.com/
(2)http://www.example.com/books/
(3)http://www.example.com/books/authors/
(4)http://www.example.com/books/authors/stephenking/
(5)http://www.example.com/books/authors/stephenking/thestand.html
(現在のページ)
http://www.example.com/books/authors/stephenking/thestand.html

この例では「(5)ザ・スタンド」のページ自身のリンクもパンくずリストに含まれています。
このページは、その親となる「(4)スティーヴン・キング」のページに紐づけされます。
また、「(3)作者別」はその親からの2つめの階層を表しています。

一部を省略する

パンくずリストは、自身のリンクを省略することもできます。

(1)ホーム > (2)本 > (3)作者別 > (4)スティーヴン・キング

(1)http://www.example.com/
(2)http://www.example.com/books/
(3)http://www.example.com/books/authors/
(4)http://www.example.com/books/authors/stephenking/
(現在のページ)
http://www.example.com/books/authors/stephenking/thestand.html

複数のパンくずリスト

サイトの階層には別ルートが存在することもあります。その場合は、複数のパンくずリストを利用する事ができます。

(1)ホーム > (2)本 > (3)作者別 > (4)スティーヴン・キング

(2)本 > (6)ジャンル：小説 > (7)ホラー
(6)http://www.example.com/books/fiction/
(7)http://www.example.com/books/fiction/horror
(現在のページ)
http://www.example.com/books/fiction/horror/thestand.html

ホーム(サイトのTOPページ)の扱いについて

到達できるリンクがページ内に存在すれば、省略する事ができるようです。
※基本的なことですが、ページ内のどこにもリンクが無い場合、検索エンジンが到達できなくなる可能性があります。

変更されたこと

TL;DR

microdataやRDFa、JSON-LDが利用できます。
JSON-LDは、ページ(HTML)のheadタグ内やbodyタグ内の好きな場所に設置する事ができます。

語彙がdata-vocabulary.org/Breadcrumbからschema.org/BreadcrumbListに変更されました。
※このエントリー時点ではdata-vocabulary.org/Breadcrumbも利用可能です。

JSON-LDで記述しよう

ページ内の内容と重複する事になりますが、完全に分ける事でデザインの変更やメンテナンスが簡単になるという利点があります。
また、他のマークアップよりも、言語や環境を跨いで利用しやすい形式でもあります。

使い方

それでは、一例として

(1)ごはん > (2)けもの用 > (3)ねこのごはん

(現在のページ)
http://www.example.com/food/kemono/cat/catfood.html

こちらをJSON-LDとして表現してみましょう。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "item": {
      "@id": "http://www.example.com/food",
      "name": "ごはん"
    }
  },{
    "@type": "ListItem",
    "position": 2,
    "item": {
      "@id": "http://www.example.com/food/kemono",
      "name": "けもの用"
    }
  },{
    "@type": "ListItem",
    "position": 3,
    "item": {
      "@id": "http://www.example.com/food/kemono/cat",
      "name": "ねこのごはん"
    }
  }]
}
</script>

階層の親子関係がスッキリとした、人間にも機械にも見通しの良い表現となりました。

複数のパンくずリストがある場合は、素直に2つ用意したり、

<script type="application/ld+json">
[
{"@context":"http://schema.org",
"@type":"BreadcrumbList",
"itemListElement":[　…　]
},{
"@context":"http://schema.org",
"@type":"BreadcrumbList",
"itemListElement":[　…　]
}
]
</script>

配列として定義する事もできます。*1

補足説明

さて、Google Developersの使用例には

Note: the schema.org/BreadcrumbList vocabulary is used in slightly different ways in each of these cases, due to the differences in the rules for each underlying structured data format.

Breadcrumbs | Structured Data | Google Developers

(意訳：ほんの少しだけ本来の定義と異なる使い方をしています。)

とありますが、schema.orgの例文も、ほぼ同じ方法となっているようです。

schema.org