GoogleSearch（グーグルサーチコンソール）のパンくずリストの項目に、突然下記のようなエラーが大量にでて困ったことはありませんか？

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

そのため、これらの警告を修正するためには、見た目だけのパンくずリストから、構造化したパンくずリストに変更しなければいけません。

WordPressの場合、有料テーマでパンくずを含めて制御している場合は、テーマが対応してくれるまで待つしかありません。

プラグインを使っている場合も同様に対応してもらうまで待つしかありません。

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

ここから、警告がでている原因とschema.orgにあったパンくずリストの修正方法について紹介していきます。

パンくずリストに「項目「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）

• 「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構造化データテストツールを使って確認できます。

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

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

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

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