読者です 読者をやめる 読者になる 読者になる

すなばいじり

はてなブログを使って、トンピーを揃えるまで止めないブログ。ふっくらかわいい。

パンくずリストの考え方を整理する (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

 

JavaScriptで動的にパンくずリストを挿入できますか?

可能です。

ただし、幾つかのスクリプトが動作してページ内に挿入・更新される項目が多い場合、構造化テストツールで処理されない(検出されない)事があります。

また、既に存在するパンくずリストmicrodataを追加するようなスクリプトの場合は、構造化テストツールでは上手く検出できません。ブラウザで処理が完了した状態のHTMLをテストツールに貼り付けることで調査する事ができます。

 

すなばいじりで提供しているやつについて

更新されます。

psn.hatenablog.jp

 

 

NEW リズムでともだち こぐまのトンピー

NEW リズムでともだち こぐまのトンピー

 

 

*1:他にも方法はありますが、ここでは紹介しません。