サーチコンソールのパンくずリストの「項目idがありません」エラーの解決方法！

2019.09.202020.04.26

本日よりGoogle Search Console(サーチコンソール)にパンくずリストの項目が追加されるようになりました。Google Search Consoleの左のメニューに「パンくずリスト」というメニューが加わっています。構造化データについては以前の旧バージョンのSearch Consoleにもありましたが、今回は新バージョンの方に新たに項目が追加されています。

サイトに構造化データをマークアップしている場合は、ここにステータスが表示されるようになります。コードの間違いや問題があればメールでの通知も行ってくれるので、サイト運営者にとっては非常にありがたいです。

Google Search Consoleとは？

Search Console

Google Search Consoleは、Googleが提供するサイト運営者向けの管理ツールのことで、Google検索結果でのサイトの掲載順位を監視、管理、改善するのに役立つ無料サービスです。サイト運営者なら絶対に使ったほうがいい便利ツールです。Search Consoleに登録しなくても Google 検索結果にサイトが表示されるようにすることはできますが、Search Consoleに登録することで、Google のサイトに対する認識を理解し、改善できるようになります。また、実際にユーザーがどのワードでどの程度来ているかなどの詳細を確認することができたり、サイトを運営する上で役に立つ情報が沢山手に入るので登録しておくべき必須ツールの一つです。

Google Search Console

パンくずリストとは？

BreadcrumbList

パンくずリストとはWebサイト上で現在いる位置をツリー構造を持ったリンクの一覧として表示するものです。英語ではBreadcrumb Listと表記します。言葉の通りパンのクズを使って来た道を辿れるような構造になっています。言葉で説明しても分かりにくいとも思うので、実際にこのサイトでも記事の上部に表示しているものがパンくずリストとなります。一般的な表示だと以下のような感じで使われることが多いです。たぶん、色々なサイトを回っていればどこかで目にしたことがあると思います。

Home > Webサービス > 便利 > 適当な落書きをリアルな風景画にしてくれるサイト「GauGAN」がすごい！

パンくずリストを設置する意味とは？

SEO

パンくずリストを作ることによってユーザーに現在位置や階層を直感的にわかりやすくするユーザービリティの向上とともに、SEO的にも効果がります。このようにパンくずリストを構造化データとしてマークアップすることでGoogleからの評価が上がりやすくなる以外にも、検索結果にパンくずリストが表示されるようになるのでクリック率が上がると言われています。

これはGoogleの検索結果にもパンくずリストが表示されるようになっており、検索結果内のリンクが多いほどユーザーのクリック率が高くなります。よって、サイトへのアクセスも少しアップすることができます。まだ設置していない人は絶対に設定しましょう。

パンくずリストのマークアップ方法

Markup

現在パンくずリストをマークアップする方法として主流はJSON-LDとmacrodataとRDFaです。GoogleはJSON-LDを推奨していますが、macrodataがダメなわけではありません。昔からパンくずリストを使っているサイトはmacrodataでパンくずリストを作っているサイトが多いと思います。以下にGoogleが提供しているサンプルを引用して2つの具体例も示していますので、扱いやすい方を選ぶと良いでしょう。

JSON-LD

JSON-LDを使うメリットは、scriptで書かれているため、画面上に表示されずとも構造化データの設定が可能な点です。このサイト上にパンくずリストが表示されない(表示させるためには別途コードを書かなければいけない)というのはユーザビリティ的には微妙なのですが、設置場所を選ばずhtmlのどこでも記述可能というのは大きなメリットとなります。またJSON形式を使用しているため、表記が分かりやすく扱いやすいのも良いですね。Googleも推奨しているので、特に理由がなければこちらを使うことをおすすめします。

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

macrodata

macrodataはJSON-LDより以前からある構造化データ形式です。ちょっと前に作っているサイトはmacrodataでパンくずリストを作っている場合が多いと思います。macrodataでのパンくずリストの記述は、JSON-LDのようにどこにでも設置できるわけではありません。mcrodataでの構造化データは、パンくずリストを表示する場所に記述する必要があります。書いたコードがそのままユーザーの見えるデータとなるので、直感的ですし、間違えがあっても気が付きやすいというメリットもあります。私のサイトの上部のパンくずリストはmcrodata+schema.orgで記述しています。

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

<ol itemscope itemtype="https://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemtype="https://schema.org/Thing" itemprop="item" href="https://example.com/books"> <span itemprop="name">Books</span></a> <meta itemprop="position" content="1" /> </li> › <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemtype="https://schema.org/Thing" itemprop="item" href="https://example.com/books/sciencefiction"> <span itemprop="name">Science Fiction</span></a> <meta itemprop="position" content="2" /> </li> › <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemtype="https://schema.org/Thing" itemprop="item" href="https://example.com/books/sciencefiction/ancillaryjustice"> <span itemprop="name">Ancillary Justice</span></a> <meta itemprop="position" content="3" /> </li> </ol>

Google Search Consoleでパンくずリストのエラー！

「Fix Breadcrumbs markup for https://shopdd.jp/. Google systems show that your site is affected by 717 instances of Breadcrumbs markup issues.」というエラーのメールがGoogle Search Console Teamからのメールが届き、実際にGoogle Search Console開いてみるとエラーが発生していました。以前に構造化データテストツールで検証していた時はエラーが出てなかったのですが、どうやら新しくなったことでチェックが厳しくなったようです。私の環境で確認できたエラーは「項目itmeがありません」と「項目idがありません」の以下の2つでした。

項目「item」がありません

1つ目のエラーは「項目itemがありません」(Missing field "item")というエラーでした。このエラー表示だけだと詳細がよくわからないので、そういう時は構造化データテストツールを活用すると、構造化データのどの場所がエラーなのかがすぐに分かるからおすすめです。

構造化データテストツールを使って確認してみた所、エラー内容は「itemフィールドの値は必須です」となっていました。itemが見つからないというのはパンくずリストの最後をリンクにしていなかったために、最後のitemが見つけられないというエラーが発生していました。なので、コードは以下のように修正しました。

        <li itemprop="itemListElement" itemscope

              itemtype="http://schema.org/ListItem">

              <span itemprop="name">適当な落書きをリアルな風景画にしてくれるサイト「GauGAN」がすごい！</span>

            <meta itemprop="position" content="4" />

        </li>

　　　　　　↓↓↓↓

        <li itemprop="itemListElement" itemscope

              itemtype="http://schema.org/ListItem">

              <a itemtype="http://schema.org/Thing"

               itemprop="item" href="https://shopdd.jp/blog-entry-1464.html">

              <span itemprop="name">適当な落書きをリアルな風景画にしてくれるサイト「GauGAN」がすごい！</span>

              </a>

            <meta itemprop="position" content="4" />

        </li>

項目「id」がありません

2つめのエラーは、「項目idがありません」(Missing field "id")というエラーでした。macrodataのパンくずリストでidというのはURLのことであり。aタグのhrefで設定しているもののことを指します。さすがにhrefでURLが設定していないということはありえないと思い、こちらの方も構造化データテストツールでチェックしてみましたが「idフィールドの値は必須です。」と表示されるだけでした。

URLをhrefで設定しているのになぜこんなエラーが出るのかよく確認してみると、なぜかaタグ内にitemscopeが入っていることが確認できました。なんでこんなものが入っているのか分かりませんが、たぶん打ち間違えたのでしょう。なので、コードは以下のように修正しました。これでエラーは消えるようになりました。

        <a itemscope itemtype="http://schema.org/Thing"

               itemprop="item" href="blog-category-3.html">

            <span itemprop="name">Webサービス</span>

        </a>

　　　　　　↓↓↓↓

        <a itemtype="http://schema.org/Thing"

               itemprop="item" href="blog-category-3.html">

            <span itemprop="name">Webサービス</span>

        </a>

修正完了後は？

修正が完了したらサーチコンソールの、項目「id」がありません、項目「id」がありませんのページで「修正を検証」を押すと、Googleが再度エラーが有ったページをクリーリングして、問題がなければエラーが無くなるようになります。エラーページのチェックには時間がかかる場合があるので、気長に待ちましょう。

今回の個人的感想＆まとめ

今回はGoogleサーチコンソールでパンくずリストの項目が追加されたので、パンくずリストの追加の仕方の紹介とエラーが出た際の修正方法について紹介しました。パンくずリスト自体はサイトに絶対あったほうがいいのでまだ実装していない人は絶対に作るようにしましょう。作り方も比較的簡単ですし、SEO的にも良いなら設置しないのは損ですからね。

サーチコンソールにパンくずリストが追加されたことで出ていたエラーの件ですが、今まで構造データテストツールでチェックした時は大丈夫だったのに、今回からいきなりエラーが出たというのはチェック項目が厳しくなったということでしょう。むしろ今までのテストツールがザルだった可能性もありますが、とりあえずエラーと表示されるのは気持ち悪いので早急に修正したほうがいいでしょうね。Googleからの評価が下がるのも嫌ですので。

今回の件のようにパンくずリストに表示されていたエラーエラー内容がちゃんと認識できれば修正するのはそんなに難しくないので、しっかり原因を突き止めるのは大事ですね。興味のある人は、ぜひパンくずリストを実装してサーチコンソールを活用してみてはいかがでしょうか？