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

harada 218views 更新:2014年5月27日

検索結果の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>

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

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません