「パンくずリスト」は昔からあるものなので、慣れ親しんでいるものですが、これに「構造化マークアップ」が加わると重圧感が滲み出てくるような。もっとも「構造化マークアップ」も Google さんが以前から推奨していますけどね。

但し、当オフィスでは、パンくずリストを設置したサイト構築はあまり受けていませんでしたので、この度、受けてしまったことから、「パンくずリストの構造化マークアップ」の方法を改めて調べました。結果は、そんなに難しいものではないです。

構造化マークアップしていないパンくずリスト

<ol>
<li><a href="/">HOME</a></li>
<li><a href="/sample/">第一下層</a></li>
<li>第二下層</li>
</ol>

構造化マークアップしたパンくずリスト

<ol itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<li><a href="/" itemprop="url"><span itemprop="title">HOME</span></a></li>
<li><a href="/sample/" itemprop="url"><span itemprop="title">第一下層</span></a></li>
<li>第二下層</li>
</ol>

パンくずであることを「itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”」で示し、リンク先を「itemprop=”url”」で、アンカーテキストを span で囲い「itemprop=”title”」で指定する。

最後は、Google さん提供の「構造化データテストツール」でチェックし問題なければ OK。