[対象: 上級]
1つのページにのパンくずリストがあるときの構造化データのマークアップ方法についてこの記事では説明します。
パンくずリストはSEOにも重要な要素
パンくずリストは、ユーザビリティとSEOの2つの観点から重要な要素です。
- ユーザビリティ: 今どこにいるか、どこをたどってやってきたかをユーザーに伝える.
- SEO: 検索エンジンにサイトの論理的な構造を伝える。検索結果でURLの代わりにパンくずリストを表示できる。
2つめのSEOに関して言うと、検索エンジンにパンくずリストであることを的確に伝えるためにパンくずリスト用の構造化データでマークアップすることが推奨されます。
サイトによっては、複数のパンくずリストを表示させたいことがあります。
複数のカテゴリにそのページが所属している場合やタイプの異なるカテゴリで分類している場合です。
たとえば、米国のモダンホラー小説家、スティーブン キングの作品を下の2種類のパンくずリストで表示させたいとします。
- 書籍 > 著者 > スティーブン キング
- 書籍 > フィクション > ホラー
このとき、それぞれのパンくずリストはどのようにマークアップするのでしょうか。
パンくずリストが複数あるときは、1つのときと同じようにマークアップしません。
「childプロパティ」を使用して複数パンくずリストをマークアップ
1つのページにパンくずリストが2つ以上あるとき「childプロパティ」を使用します。
childプロパティは、階層内での次のパンくずを表します。
以下に、child プロパティを使った、microdataとRDFaのマークアップの例を示します。
microdataによる複数パンくずリストのマークアップ
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/books" itemprop="url">
<span itemprop="title">書籍</span>
</a> ›
<div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/books/authors" itemprop="url">
<span itemprop="title">著者</span>
</a> ›
<div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/books/authors/stephenking" itemprop="url">
<span itemprop="title">スティーブン・キング</span>
</a>
</div>
</div>
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/books" itemprop="url">
<span itemprop="title">書籍</span>
</a> ›
<div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/fiction" itemprop="url">
<span itemprop="title">フィクション</span>
</a> ›
<div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/books/fiction/horror" itemprop="url">
<span itemprop="title">ホラー</span>
</a>
</div>
</div>
</div>
RDFaによる複数パンくずリストのマークアップ
<div xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb">
<a href="http://www.example.com/books" rel="v:url" property="v:title">
書籍
</a> >
<span rel="v:child">
<span typeof="v:Breadcrumb">
<a href="http://www.example.com/books/authors" rel="v:url" property="v:title">
著者
</a> >
<span rel="v:child">
<span typeof="v:Breadcrumb">
<a href="http://www.example.com/books/authors/stephenking" rel="v:url" property="v:title">
スティーブン・キング
</a> >
</span>
</span>
</span>
</span>
</span>
</div>
<div xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb">
<a href="http://www.example.com/books" rel="v:url" property="v:title">
書籍
</a> >
<span rel="v:child">
<span typeof="v:Breadcrumb">
<a href="http://www.example.com/books/fiction" rel="v:url" property="v:title">
フィクション
</a> >
<span rel="v:child">
<span typeof="v:Breadcrumb">
<a href="http://www.example.com/books/fiction/horror" rel="v:url" property="v:title">
ホラー
</a> >
</span>
</span>
</span>
</span>
</span>
</div>複数のパンくずリストを同じページで表示させているサイトで参考にしてください。
最後に、この記事にはオチがあります。
偉そうに説明しましたが、公式ヘルプに書いてあります。
しかも自分で見つけたわけではなく、矢萩クンに教えてもらいました（ありがとう！）
僕自身、パンくずリストが複数あるときのマークアップについてはどうしたものかとモヤモヤしていて、とりあえず最も大切な1つにマークアップするように指示していました。
でも複数パンくずリストを上手に伝えるやり方があったのですね。
パンくずリストのヘルプは以前から参照していましたが、最終更新日が5月13日になっているので、比較的最近に追加された説明だと思われます。 [UPDATE] 以前からあったようです。
何はともあれスッキリしました。:)