弊社ではホームページの納品前にhtml5チェッカーで、文法エラーがないかチェックいたします。

今回、WordPressプラグイン【Breadcrumb NavXT】の導入時後にチェックしたところ、発見したエラーがあったので記事にさせて頂きます。

解決方法はいたって簡単なのですが、文法チェックされない方にとっては意外な落とし穴かもしれません。

パンくずリストの設置個所に記述するソースにご注意を

プラグイン【Breadcrumb NavXT】のインストール・有効化の後、パンくずリストを設置する箇所にソースを記述します。

記述するソースは、多くの参考サイトで以下のものが紹介されています。

<div class="breadcrumbs" vocab="http://schema.org/" typeof="BreadcrumbList">
  <?php if(function_exists('bcn_display'))
  {
  bcn_display();
  }?>
</div>

<div>の開始タグに記述されている【vocab=”http://schema.org/” typeof=”BreadcrumbList”】の箇所が文法エラーの原因となります。

解決策はいたって簡単。

<div>の開始タグに記述されている【vocab=”http://schema.org/” typeof=”BreadcrumbList”】の箇所を削除します。

削除後のソースは以下の通りです。

<div class="breadcrumbs">
  <?php if(function_exists('bcn_display'))
  {
  bcn_display();
  }?>
</div>

不要な属性を削除してソースもすっきり。

パンくずリストの動作にも全く問題ありません。

html5チェッカーによるエラーの内容は

html5チェッカーでチェックすると【vocab=”http://schema.org/”】、【typeof=”BreadcrumbList”】のそれぞれに対してエラーの内容が表示されます。

01. 【vocab="http://schema.org/"】の属性に対して<DIV> に不明な属性 `VOCAB` が指定されています。

02. 【typeof="BreadcrumbList"】の属性に対して<DIV> に他のHTML用の属性 `TYPEOF` が指定されています。

それぞれ、解説もついてますので、一度html5チェッカーで試してみてください！