1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. サーチコンソールのパンくずリストの「項目idがありません」エラーの解決方法!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
完全防水IPX7のTribit MaxSound Plus Bluetoothスピーカーを使ってみた!

完全防水IPX7のTribit MaxSound Plus Bluetoothスピーカーを使ってみた!

今回紹介するのは防水のBluetoothスピーカーであるTribit MaxSound Plusの最新2019年モデルです。防水はIPX7に対応しており、お風呂場などで水に沈んで使用しても大丈夫な...

Fire TV Stickでプライムビデオなどをテレビで見よう!

Fire TV Stickでプライムビデオなどをテレビで見よう!

今回はAmazonプライムビデオをより便利に活用できるFire TV Stickを購入したので、レビューを書きたいと思います。Fire TV Stickを使えばプライムビデオをテレビの大画面で...

LINEが使えるスマートスピーカーClova Friendsが驚異の88%オフの1480円!

LINEが使えるスマートスピーカーClova Friendsが驚異の88%オフの1480円!

現在、楽天スーパーセールにてLINEが提供するスマートスピーカーClova Friendsが驚異の88%オフの1480円で販売されています。スマートスピーカー「Clova Friends SALLY」と...

12/6よりAmazonサイバーマンデーセールが開始!今年最後の大セール!

12/6よりAmazonサイバーマンデーセールが開始!今年最後の大セール!

本日12月6日9時より、Amazonでは年末の大セールとなるAmazon Cyber Monday(サイバーマンデー)2019を実施されます。開催期間は12月6日(金)9時00分から12月9日(月)23時...

日本郵便が無償提供する年賀状ソフト「はがきデザインキット2020」がすごい!

日本郵便が無償提供する年賀状ソフト「はがきデザインキット2020」がすごい!

今年も残すところあと30日間を切り、もうそろそろ年賀状を用意して送らないといけない時期ですね。そこで今回は年賀状作成ソフトについて書きたいと思います。ちなみにみな...

DearMob iPhoneマネージャーを使ってiTunesなしで動画を転送しよう!

DearMob iPhoneマネージャーを使ってiTunesなしで動画を転送しよう!

前回までにDearMob iPhoneマネージャーでiTunesを使わないバックアップ方法、写真転送、音楽転送と3本シリーズ記事として書いてきました。iTunesを使用せずにDearMob iPhon...

Gearbestでブラックフライデーセールでスマホやタブレットが激安!

Gearbestでブラックフライデーセールでスマホやタブレットが激安!

Gearbestでは11月26日よりGearbestブラックフライデーセールを実施しています。Gearbestではスマホやタブレット、スマートウォッチなどの製品を数多く取り揃えた中国のネッ...

WWTECKSのUSB電熱ベストが72%OFFの1,294円の超激安!

WWTECKSのUSB電熱ベストが72%OFFの1,294円の超激安!

現在AmazonではWWTECKSのUSB充電電熱ベストが通常販売価格4,588円のところ1,294円で購入が可能となっています。超激安の1,294円で購入するには50%OFFクーポンと1000円引き...

11月22日からAmazonで日本初開催のブラックフライデーセールがスタート!

11月22日からAmazonで日本初開催のブラックフライデーセールがスタート!

本日より海外で人気のブラックフライデーセール(Black Friday)が日本のアマゾンでも初開催されます。ブラックフライデーセールの開催期間は11月22日[金]9:00から11月24日...

NetaGear RSS News

Now Loading

Article

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

Webデザイン > html+CSS+javascript 
Console_Breadcrumb_000.png

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

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

Google Search Consoleとは?


Search Console


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



パンくずリストとは?


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


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

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

<script type="application/ld+json">
{
"@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"
},{
"@type": "ListItem",
"position": 4,
"name": "Ancillary Justice",
"item": "https://example.com/books/authors/ancillaryjustice"
}]
}
</script>


macrodata


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」がありません


Console_Breadcrumb_001.png

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

Console_Breadcrumb_007.png

構造化データテストツールを使って確認してみた所、エラー内容は「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」がありません


Console_Breadcrumb_002.png

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>


修正完了後は?


Console_Breadcrumb_003.png

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

今回の個人的感想




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

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

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

Related article

COMMENT TO THIS ENTRY

この方法で問題が解決できました!ありがとうございました!

10846

項目「id」がありませんのエラーが直りました。素晴らしい記事ありがとうございます

10847

Most Popular

Now loading...