Breadcrumb NavXTは標準でマークアップエラーが出る

はじめに

Breadcrumb NavXTは2024/06/06現在、プラグインをインストールした素のままだと、
マークアップエラーが検出される状態です。
皆さん以下のようなエラーが出ていませんか?

• 「項目「itemListElement」がありません」
• 項目「position」がありません（「itemListElement」に含まれる）
• 「name」または「item.name」のどちらかを指定してください（「itemListElement」に含まれる）

今回はそのようなエラーが出ているときの対処法を紹介します。

そもそも「項目「itemListElement」がありません」とは?

itemprop=”itemListElement”は構造化データに使うものなのですが、
これが、ol(もしくはul)の中のアイテムに存在していないときに出るエラーです。
下記が正しいコードです(Googleのサイトから引用)。

      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>

https://developers.google.com/search/docs/appearance/structured-data/breadcrumb?hl=ja

一方これはBreadcrumb NavXTの標準で出力されるコードです。

<span property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" title="%title%" href="%link%" class="%type%" bcn-aria-current>
<span property="name">%htitle%</span>
</a>
<meta property="position" content="%position%">
</span>

比べて見るとわかると思うのですが、「itemprop=”itemListElement”」が、
「property=”itemListElement”」となっており、項目「itemListElement」が存在しない判定になっており、
エラーになっているようです。
また、「itemscope itemtype=”http://schema.org/ListItem”」という超重要な記載も存在していません。
標準だと全体的に色々足りなかったり、古いものが出力されたりしています。

対処法

以下のコードをコピペしてテンプレートたちに貼り付けてください。
(以下のサイトから引用させてもらいました。)
そしたら正常になるはずです。

<span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" title="%title%" href="%link%">
<span itemprop="name">%htitle%</span>
</a>
<meta itemprop="position" content="%position%">
</span>

https://design.aekana.com/blog/breadcrumb-warning

まとめ

「項目「itemListElement」がありません」は、
構造マークアップのエラーで、子アイテムに「itemprop=”itemListElement”」が存在しないので
エラーが起きているようです。

また、その他の項目も古かったり、欠けてたりしているのが多々あるので、
このプラグインはあまり使うべきではないかもしれません。

一応無理やりさっきの対処法のコードで、エラーなく使えるようになりますが、
やはり標準で正常ではないので、あまりよろしくはないですよね。

日本圏ではパンくずリスト機能単体のプラグインでは、ほぼこれが一強なので、
どうしようもないかもしれませんがね。