パンくずリストの構造化

先日、当サイトにもパンくずリストを設置しました(記事タイトル下の公開日下に設置)。リストでマークアップして、個々をフロートさせればパンくずリストは設置できるのですが、パンくずリストには構造化マークアップと言うものがあるんです。

Googleで検索すると以下のようにURL部分がパンくずリストになっているサイトを見ることがあると思います。

Googleの検索結果

googleがパンくず部分を読み取って表示してくれる場合もあるようなのですがHTMLマークアップで「ここがパンくずです」とGoogleに教えることで、このような表示になることがあるようです。

microdataでパンくずリストの構造化

microdataという記述を使ってパンくずリストを構造化します。
以下のようにマークアップされたパンくずリストがあるとします。

上記マークアップを構造化します。

1.パンくずリストを囲む

「itemscope」と「itemtype」を指定してパンくずリスト全体を囲みます。itemtypeには「http://data-vocabulary.org/Breadcrumb」を設定。これで囲まれたエリアがパンくずリストであることを示します。

2.aタグにitempropを記述

aタグには「itemprop=”url”」を追加します。

3.各項目にitemprop=”title”を追加

パンくずリストの各項目ごとに「itemprop=”title”」を追加。spanでマークアップします。

以上でパンくずリストが構造化されました。
最後にgoogleのテストツールでマークアップに間違えがないか確認します。
Google Testing Tool

Google Testing Toolでの検証結果

エラーは検出されませんでした。

※パンくずリストの構造化をやったからと言ってGoogleの検索結果のURL部分が必ずパンくず表示になるわけではないようです。

Googleのパンくずリストに関するページ

アマゾンのサーバでエラーが起こっているかもしれません。一度ページを再読み込みしてみてください。

  • このエントリーをはてなブックマークに追加
  • Pocket   
  • 5 follow us in feedly
comments powered by Disqus