Search Consoleのパンくずリストに「itemListElementがありません」などの警告やエラーがでた場合

2020年5月18日

当サイトはアフィリエイト広告を利用しています。

疑問

Search Console（サーチコンソール）のパンくずリストの項目に、突然下記のような警告やエラーが大量にでた・・・

Search Consoleのパンくずで表示される警告・エラー

  • 項目「item」がありません。
  • 項目「itemListElement」がありません。
  • 「name」または「item.name」のどちらかを指定してください。
  • 項目「position」がありません。
  • 「id」フィールドの値は必須です。

エラーの原因は、Googleがschema.orgの「BreadcrumbList」を採用したため、この構造に合わないパンくずリストがエラーとなってしまいます。

そのため、エラーを解消するには、見た目だけのパンくずリストから、構造化したパンくずリストへの変更が必要です。

WordPressで有料テーマでパンくずが制御されている場合は、テーマの対応を待つしかありません。また、プラグインの場合も同様に対応してもらうのを待つしかありません。

待てない人のために、後半でパンくずリストの自作方法も紹介しています。

以下からエラーや警告がでている場合のパンくずリストの修正方法を解説していきます。

パンくずリストに「項目「itemListElement」がありません。」とでた場合の対応方法

schema.orgの「BreadcrumbList」には、構造があるので、それを満たさないと、上記のような警告が表示されます。

パンくずリストの構造は下記のようになっており、これに当てはまるように修正が必要です。

{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Books",
    "item": "https://example.com/books"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Authors",
    "item": "https://example.com/books/authors"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Ann Leckie",
    "item": "https://example.com/books/authors/annleckie"
  }]
}

HTMLで記述すると下記のようになります。

<ol vocab="https://schema.org/" typeof="BreadcrumbList">
  <li property="itemListElement" typeof="ListItem">
    <a property="item" typeof="WebPage" href="https://example.com/books">
      <span property="name">Books</span>
    </a>
    <meta property="position" content="1">
  </li>
  ›
  <li property="itemListElement" typeof="ListItem">
　   <a property="item" typeof="WebPage" href="https://example.com/books/sciencefiction">
     　<span property="name">Science Fiction</span>
　　　</a>
    <meta property="position" content="2">
  </li>
  ›
  <li property="itemListElement" typeof="ListItem">
    <span property="name">Award Winners</span>
    <meta property="position" content="3">
  </li>
</ol>

パンくずリストの大きなくくりをolタグにして、各パンくずをliタグにしています。各タグに必要な属性セレクター（attribute）は下記のようになっています。

liタグの中には、aタグ（aタグの中にはspanタグ）とmetaタグが必要です。パンくずリストの最後で、aタグがいらない場合は、liタグの中には、spanタグとmetaタグが必要です。

必要な属性セレクター（attribute）

HTMLタグ 属性セレクター
olタグ typeof="BreadcrumbList"
vocab="https://schema.org/"
liタグ property="itemListElement"
typeof="ListItem"
liタグの中のaタグ property="item"
typeof="WebPage"
aタグの中のspanタグ span property="name"
liタグの中のmetaタグ property="position"
content="数字連番"

この中の属性セレクターがかけると警告やエラーが表示されます。

下記の4項目については、上記の属性セレクターを確認して抜けている部分がないかを確認します。

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

下記の項目「id」というのは、aタグのリンクを指しています。リンクの設定もれがないか確認しましょう。

  • 「id」フィールドの値は必須です。

ちなみに、構造化していれば、olをdiv、liをspanに変えても警告はでません。

注意点としては、Dockerなどで、URLに「:8080」などがついていると、「itemがない」という表示が消えないので正しいURLにしてチェックしてみましょう。

WordPressを利用している場合に自作パンくずリストで回避する方法

テーマやプラグインが修正されるまで待っていられない場合や、無料のWordpressテーマを利用している場合に、「自作パンくずリスト」を使った回避方法を紹介します。

テーマを編集する時は子テーマを作成してから修正した方が安全です。

子テーマの作成方法

functions.phpの修正

まず、functions.phpから修正します。下記のパンくずリストコードをfunctions.phpに記述します。

function my_breadcrumb() {

  $home = '<li property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" href="'.get_bloginfo('url').'" ><span property="name"><i class="fa fa-home" aria-hidden="true"></i> HOME</span></a><meta property="position" content="1"></li>';

  echo '<ol class="wp_breadcrumb" vocab="https://schema.org/" typeof="BreadcrumbList">';

  if ( is_front_page() ) {

    // トップページの場合

  } else if ( is_category() ) {

    // カテゴリページの場合
    $position_count = 2;
    $cat = get_queried_object();
    $cat_id = $cat->parent;
    $cat_list = array();

    while ($cat_id != 0){
      $cat = get_category( $cat_id );
      $cat_link = get_category_link( $cat_id );
      array_unshift( $cat_list, '<li property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" href="'.$cat_link.'"><span property="name">'.$cat->name.'</span></a><meta property="position" content="'.$position_count.'"></li>' );
      $cat_id = $cat->parent;
      $position_count++;
    }

    echo $home;
    foreach($cat_list as $value){
      echo $value;
    }

    the_archive_title('<li property="itemListElement" typeof="ListItem"><span property="name">', '</span><meta property="position" content="'.$position_count.'"></li>');

  } else if ( is_archive() ) {

    // 月別アーカイブ・タグページの場合
    echo $home;
    the_archive_title('<li property="itemListElement" typeof="ListItem"><span property="name">', '</span><meta property="position" content="2"></li>');

  } else if ( is_single() ) {

    // 投稿ページの場合
    $position_count = 2;
    $cat = get_the_category();

    if( isset($cat[0]->cat_ID) ) {
      $cat_id = $cat[0]->cat_ID;
    }

    $cat_list = array();
    while ($cat_id != 0){
      $cat = get_category( $cat_id );
      $cat_link = get_category_link( $cat_id );
      array_unshift( $cat_list, '<li property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" href="'.$cat_link.'"><span property="name">'.$cat->name.'</span></a><meta property="position" content="'.$position_count.'"></li>' );
      $cat_id = $cat->parent;
      $position_count++;
    }

    echo $home;
    foreach($cat_list as $value){
      echo $value;
    }
    the_title('<li property="itemListElement" typeof="ListItem"><span property="name">', '</span><meta property="position" content="'.$position_count.'"></li>');

  } else if( is_page() ) {

    // 固定ページの場合
    echo $home;
    the_title('<li property="itemListElement" typeof="ListItem"><span property="name">', '</span><meta property="position" content="2"></li>');

  } else if( is_search() ) {

    // 検索ページの場合
    echo $home;
    echo '<li property="itemListElement" typeof="ListItem"><span property="name">「'.get_search_query().'」の検索結果</span><meta property="position" content="2"></li>';

  } else if( is_404() ) {

    // 404ページの場合
    echo $home;
    echo '<li property="itemListElement" typeof="ListItem"><span property="name">ページが見つかりません</span><meta property="position" content="2"></li>';

  }
  echo "</ol>";
}

CSSの修正

パンくずリストの見た目を整えるために、cssに下記を記述します。

ol.wp_breadcrumb {
  margin-bottom: 15px;
  margin-left:1em;
  margin-right:1em;
}
.wp_breadcrumb > li {
  display: inline-block;
  padding: 0 10px 0 0;
  font-size:0.85rem;
}
.wp_breadcrumb > li a::after {
  content:">";
  padding-left:10px;
}

パンくずリストが使われている部分の修正

header.phpなど、パンくずリストが使われている部分を下記のコードに変更します。

<?php
if(!is_home() && !is_front_page()) {
  if(function_exists('my_breadcrumb')) {
    my_breadcrumb();
  }
}
?>

まとめ

Search Console（サーチコンソール）のパンくずリストで警告やエラーがでている場合は、構造のチェックをしてみましょう。

自作のパンくずリストや修正版のパンくずリストのHTMLが正しいのかどうかは、下記のGoogle構造化データテストツールを使って確認できます。

「リッチリザルト テスト」の方が使いやすいと思います。

Google構造化データテストツール（外部リンク）

-SearchConsole
-,