読者です 読者をやめる 読者になる 読者になる

文系プログラマによるTIPSブログ

文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。

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

bootstrap

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が無くなった点が主な変更点です。
Components · Bootstrap

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

googleリッチスニペットによるパンくずのマークアップ
googleリッチスニペットのパンくずをmicrodata形式で記述する場合の公式サンプルは以下のとおりです。
リッチ スニペット - パンくずリスト - ウェブマスター ツール ヘルプ
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

google上で正しくパンくずとして認識されました!
<span>でも正しく構造として認識されています。
これで問題無くbootstrap3でmicrodata形式のパンくず(リッチスニペット)が使えますね!!

レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法

レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。