長い間触っていなかった、WordPressサイトのパンくずリスト（BreadcrumbList）をGoogleの新しい形式に変更した。
以前はdata-vocabulary.orgという記述だったものが、schema.orgに変わったみたい。
私のもうひとつのサイト「サッぽろ、ニッキ。」は６年前程に一から作成した自作のテーマ。
こちらを新しい形式にしてみたので、忘れないよう書いておく。
変更前
<?php if(is_home()): ?>
<div id="breadcrumb" class="clearfix">
<ul>
<li itemtype="http://data-vocabulary.org/Breadcrumb" class="home"><a href="<?php echo home_url(); ?>/"><span class="icon-home3">ホーム</span></a></li>
</ul>
</div>
<?php endif; ?>
<div id="breadcrumb" class="clearfix">
<ul>
<li itemtype="http://data-vocabulary.org/Breadcrumb" class="home"><a href="<?php echo home_url(); ?>/"><span class="icon-home3">ホーム</span></a></li>
</ul>
</div>
<?php endif; ?>
変更後
<?php if(is_home()): ?>
<div id="breadcrumb" class="clearfix" itemscope itemtype="https://schema.org/BreadcrumbList">
<ul>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="home">
<a itemprop="item" href="<?php echo home_url(); ?>/"><span itemprop="name" class="icon-home3">ホーム</span></a>
<meta itemprop="position" content="1" />
</li>
</ul>
</div>
<?php endif; ?>
<div id="breadcrumb" class="clearfix" itemscope itemtype="https://schema.org/BreadcrumbList">
<ul>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="home">
<a itemprop="item" href="<?php echo home_url(); ?>/"><span itemprop="name" class="icon-home3">ホーム</span></a>
<meta itemprop="position" content="1" />
</li>
</ul>
</div>
<?php endif; ?>
class="…"のところはCSSの表示なので関係なし。
太字になっている部分が変更部分。
どこが変わったのかというと…
- 全体を囲んでいる<div>に
itemscope itemtype="https://schema.org/BreadcrumbList"
が追加されています。 - 各パンくず項目を囲んでいる<li>に
itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"
が追加されています。 - リンク部分である<a>に
itemprop="item"
が追加されています。 - <span>には
itemprop="name"
が追加されています。 - <a>タグが終わった後には
<meta itemprop="position" content="1" />
が追加されています。
出力されると以下の通り
<div id="breadcrumb" class="clearfix" itemscope itemtype="https://schema.org/BreadcrumbList">
<ul>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="home">
<a itemprop="item" href="https://1day.sorezore.net/"><span itemprop="name" class="icon-home3">ホーム</span></a>
<meta itemprop="position" content="1" />
</li>
</ul>
</div>
<ul>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="home">
<a itemprop="item" href="https://1day.sorezore.net/"><span itemprop="name" class="icon-home3">ホーム</span></a>
<meta itemprop="position" content="1" />
</li>
</ul>
</div>
上のはトップページの場合の表示だけど、階下のカテゴリー、例えば
ホーム＞カテゴリー名＞記事のタイトル
のときは、以下の様に書くとの事。
<div id="breadcrumb" class="clearfix" itemscope itemtype="https://schema.org/BreadcrumbList">
<ul>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="home">
<a itemprop="item" href="https://1day.sorezore.net/"><span itemprop="name" class="icon-home3">ホーム</span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="home">
<a itemprop="item" href="https://1day.sorezore.net/category/"><span itemprop="name" class="icon-home3">カテゴリー</span></a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="home">
<span itemprop="name" class="icon-home3">記事のタイトル</span>
<meta itemprop="position" content="3" />
</li>
</ul>
</div>
<ul>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="home">
<a itemprop="item" href="https://1day.sorezore.net/"><span itemprop="name" class="icon-home3">ホーム</span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="home">
<a itemprop="item" href="https://1day.sorezore.net/category/"><span itemprop="name" class="icon-home3">カテゴリー</span></a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="home">
<span itemprop="name" class="icon-home3">記事のタイトル</span>
<meta itemprop="position" content="3" />
</li>
</ul>
</div>
階層ごとに、meta itemprop=に順番がつきます。
最初ちょっとエラーになったけど、上記のように書くとOKでした。
（エラーの原因だったのは、「ホーム」のテキストがなかったため…CSSで家のアイコン表示しいて、テキスト出力がなしだった。）
他にも対応方法があるのだけど、変更もなかなか手間だし。
とりあえずはこんな感じでよいらしいので、これで行こうと思う。
今回空いた時間にSSL化の修正をするつもりが、ポロポロと色々な直し部分が見つかっている。
仕方ない。地道にちょっとずつやっていくしかないかなー。
初めての方へ