【パンくず】bootstrap3のパンくずをリッチスニペット化する際の注意点【microdata】

bootstrap3になって、パンくずのパークアップが変更されたのは皆さんご存知ですよね。
その変更によって、パンくずをmicrodata形式でリッチスニペット化する際に問題が起きるようになりました。

bootstrap2のパンくずのリッチスニペット

bootstrap2の時は以下でgoogleリッチスニペットのパンくずを実現していました。
microdata形式です。

<ul class="breadcrumb">
  <li>
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="/" itemprop="url"><span itemprop="title">TOP</span>&nbsp;<span class="divider">/</span></a>
    </div>
  </li>
  <li>
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="${categoryTopUrl}" itemprop="url"><span itemprop="title">Apache Solr</span>&nbsp;<span class="divider">/</span></a>
    </div>
  </li>
  <li class="active">
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="${currentUrl}" itemprop="url"><span itemprop="title">solrのReplicationHandlerで簡単レプリケーション！</span></a>
    </div>
  </li>
</ul>

bootstrap3のパンくずマークアップ

続いてbootstrap3です。<ul>が<ol>に変わったのと、
区切り線のdividerが無くなった点が主な変更点です。
Redirecting…

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

googleリッチスニペットによるパンくずのマークアップ

googleリッチスニペットのパンくずをmicrodata形式で記述する場合の公式サンプルは以下のとおりです。
Enhance Your Site's Attributes | Search | Google Developers
googleのサンプルでは<div>にitemscopeとitemtype属性を書いていますね。

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses" itemprop="url">
    <span itemprop="title">ドレス</span>
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses/real" itemprop="url">
    <span itemprop="title">ドレス</span>  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
    <span itemprop="title">緑のドレス</span>  </a>
</div>

bootstrap3で2と同じ形式で記述してみる

<ul>を<ol>に変更して、dividerを削除してみます。

<ul class="breadcrumb">
  <li>
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="/" itemprop="url"><span itemprop="title">TOP</span></a>
    </div>
  </li>
  <li>
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="${categoryTopUrl}" itemprop="url"><span itemprop="title">Apache Solr</span></a>
    </div>
  </li>
  <li class="active">
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="${currentUrl}" itemprop="url"><span itemprop="title">solrのReplicationHandlerで簡単レプリケーション！</span></a>
    </div>
  </li>
</ul>

ではこの状態で描画されるhtmlを確認してみます。
f:id:treeapps:20130929141653p:plain

区切り線(divider)部分がガタガタになっていますね。
原因はitemscope itemtype属性のタグが<div>だからズレるのです。
googleのサンプルが<div>を使っているので何も考えずに<div>を使っていますが、これではズレます。

最終的なbootstrap3でのmicrodata形式のパンくずのマークアップ

最終的には以下のようになりました。
itemscope itemtype属性を記述するタグを<div>から<span>に変更しました。
<div>はブロック要素なので、ブロック要素でない<span>にしました。

<ol class="breadcrumb">
  <li>
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="/" itemprop="url"><span itemprop="title">TOP</span></a>
    </span>
  </li>
  <li>
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="${categoryTopUrl}" itemprop="url"><span itemprop="title">Apache Solr</span></a>
    </span>
  </li>
  <li class="active">
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="${currentUrl}" itemprop="url"><span itemprop="title">solrのReplicationHandlerで簡単レプリケーション！</span></a>
    </span>
  </li>
</ol>

これをhtmlで描画してみます。
f:id:treeapps:20130929142600p:plain

ズレなくなりましたね！
さて、html描画は問題ありませんが、googleはこのマークアップをパンくずとみますでしょうか。
googleのウェブマスターツールには「構造化データテストツール」があるので、試してみます。
f:id:treeapps:20130929143753p:plain
f:id:treeapps:20130929143800p:plain