microdataを使って、Google検索結果にパンくずリストを表示する

WordPress本で知り、お試し。前にやったTwitter Bootstrapのパンくずリストに追記した。

確認ページ：bootstrap_breadcrumbs_with_microdata.html

• 各li要素をspan itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”で括った。最初divで括ったら改行が入ったので、spanにした。
• Googleのウェブマスターツールでどのように表示するかテストができる。

• <ul class="breadcrumb">
  	<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  	<li><a href="//yamakadoh.net" itemprop="url"><span itemprop="title">Home</span></a> <span class="divider">></span></li>
  	</span>
  	<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  	<li><a href="//yamakadoh.net/study" itemprop="url"><span itemprop="title">Page X</span></a> <span class="divider">></span></li>
  	</span>
  	<li class="active">Item X</li>
  </ul>
  

参考サイト

• パンくずリスト – ウェブマスター ツール ヘルプ
• Webmaster Tools – Rich Snippets Testing Tool

関連エントリーはありません

• 
• Tweet