WordPressをお使いのお客様について、カテゴリが複雑で、それぞれのfunctionを用意するのが面倒だったらので、プラグインの「Breadcrumb NavXT」を使ったあと、クライアントから構造化データにできてないってGoogle Consolからエラーが出ているとお話頂いた際、構造化データについて全く知識がなかったため調べながら作業をしました。
色々なサイトを参考にしたのですが、構造化チェックをかけるとエラーが出たり、パンくずなのに構造化できてなかったソースを載せているサイトも多く、ちゃんと構造化チェックをしているのか疑わしいSEO対策のサイトが多かったです。
その中でどのサイトだったかブクマしてなかったのでサイト先を見失っちゃったんですけど、以下のようにするときちんと構造化できたよっていう自分へのメモ。
普通のHTML
<div class="container">
<ol class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
<li>
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" title="TOPページへ戻る" href="/"><span itemprop="name">TOPページ</span></a>
<meta itemprop="position" content="1" />
</span>
</li>
<li><span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" typeof="WebPage" title="一つ前へ移動" href="%link%"><span itemprop="name">一つ前</span></a>
<meta itemprop="position" content="2" />
</span>
</li>
<li><span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="name">現在地</span>
<meta itemprop="position" content="3">
</span></li>
<li>
</ol>
</div>Breadcrumb NavXTのカスタマイズ
プラグインの設定から、各所にコピペ
TOPページに戻る部分
<li>
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" title="TOPページへ戻る" href="/"><span itemprop="name">TOPページ</span></a>
<meta itemprop="position" content="%position%" />
</span>
</li>現在地の部分（リンクなし）
<li><span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="name">%htitle%</span>
<meta itemprop="position" content="%position%">
</span>
</li>
TOPページと現在地の間の階層の部分（リンク有り）
<li>
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" typeof="WebPage" title="%title%へ移動" href="%link%"><span itemprop="name">%title%</span></a>
<meta itemprop="position" content="%position%" />
</span>
</li>テンプレートへ記載する部分
<ol class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
<?php if(function_exists('bcn_display')){
bcn_display();
}?>
</ol>liに構造化データをくっつけようとしたらプラグインが自動でなにもついてないliに戻しちゃうので苦心のspanで囲むという…ココどうにかしてほしいと思っていたら、ちゃんと用意されてたｗ