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

{
"@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）

「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=”数字連番”

この中の属性セレクターのひとつでもかけると、警告が表示されます。

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

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

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

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

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

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();
  }
}
?>

まとめ

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

もし、構造がおかしい場合は、エラーの場所を教えてくれます。

作成した構造をチェックする
・Google構造化データテストツール（外部リンク）

以上、GoogleSearch（グーグルサーチコンソール）のパンくずリストで警告が大量発生した場合の対応方法と、自作パンくずリストを紹介しました。

何をしたらよいのか分からず困っている場合は、参考にしてください。

Pch.vector – jp.freepik.com によって作成された people ベクトル

タグ: パンくずリスト