検索結果にパンくずリストを表示するためのマークアップ

検索結果のURLの部分が、たまにパンくずリストのように階層的になっているサイトがあります。
あれを実行するためには以下のようにマークアップします。

マークアップ前のパンくずリスト

<a href="http://www.example.com/food/">食べ物</a> › 
<a href="http://www.example.com/food/fruit/">フルーツ</a> › 
<a href="http://www.example.com/food/fruit/citrus/">柑橘類</a>

マークアップ後のパンくずリスト

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/food/" itemprop="url">
    <span itemprop="title">食べ物</span>
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/food/fruit/" itemprop="url">
    <span itemprop="title">フルーツ</span>  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/food/fruit/citrus/" itemprop="url">
    <span itemprop="title">柑橘類</span>  </a>
</div>

マークアップ後のパンくずリストを見ると分かるように同じタグで囲んでいる部分を階層的に出しているだけですので、パンくずリストを設置していない場合でも順番さえ気をつければ検索結果にパンくずリストを表示することができるようです。

業務管理SaaS「クロジカ」のエンジニアメンバーを募集!
自社開発のSaaSプロダクトをアジャイル開発して、実践的な経験を積んでいただけます。