1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. サーチコンソールのパンくずリストの「項目idがありません」エラーの解決方法!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
HTML+CSSだけで実装された走る馬のアニメーションがすごい!

HTML+CSSだけで実装された走る馬のアニメーションがすごい!

今回紹介するのはHTML+CSSだけで走る馬のアニメーションを実装されているClip Clop Clippity Clop [CSS Only]という作品です。CodePenに実物がアップロードされているので...

Bluetooth対応のスマート体重計・体組成計が送料込み1290円の大特価!

Bluetooth対応のスマート体重計・体組成計が送料込み1290円の大特価!

現在AmazonではBluetooth対応のスマート体重計・体組成計がなんとクーポンコードを使用することで衝撃の1290円で販売されています。スマート体重計・体組成計はスマホやタ...

DearMob iPhoneマネージャーでiTunesなしで簡単に写真を転送する方法!

DearMob iPhoneマネージャーでiTunesなしで簡単に写真を転送する方法!

前回はDearMob iPhoneマネージャーでiPhoneやiPadを簡単にバックアップする方法を紹介しましたが、今回の記事ではiTunesを使用せずにDearMob iPhoneマネージャーで簡単に写...

BOOK☆WALKERで電子書籍が50%還元されるキャンペーン!9/11までに配信された全作品対象!

BOOK☆WALKERで電子書籍が50%還元されるキャンペーン!9/11までに配信された全作品対象!

BOOK☆WALKERでは、BOOK☆WALKERとニコニコ書籍のスマホアプリの統合1周年を記念した「祝!結婚1周年!感謝のコイン最大50%還元キャンペーン」を実施しています。このキャン...

Audio Input FX LEを期間限定でプレゼントするキャンペーンを実施中!

Audio Input FX LEを期間限定でプレゼントするキャンペーンを実施中!

ニコニコ動画などの運営しているドワンゴのニコトクというサービスで、Amazonなどで通常販売価格8000円の音声マルチエフェクトソフトウェア「Audio Input FX LE」が期間限...

無料版あり!DVDFab動画ダウンローダーでYouTube動画を簡単ダウンロード!

無料版あり!DVDFab動画ダウンローダーでYouTube動画を簡単ダウンロード!

前回の記事では「DVDFab 11 Blu-rayコピー」についての紹介を行いましたが、今回はDVDFab動画ダウンローダー(DVDFab Downloader)について紹介したいと思います。DVDFab 11 ...

電子書籍が50%OFFでさらにコイン50%還元のニコニコカドカワ祭り2019!初回は100%還元!

電子書籍が50%OFFでさらにコイン50%還元のニコニコカドカワ祭り2019!初回は100%還元!

現在、電子書籍ストアのBOOK☆WALKERでは、2019年9月4日までに配信されたKADOKAWA作品が50%コイン還元、それに加えて15,000点以上が50%OFFで購入できるニコニコカドカワ祭...

激安10インチ中華タブレットの「ALLDOCUBE iPlay10 Pro」を使ってみた!

激安10インチ中華タブレットの「ALLDOCUBE iPlay10 Pro」を使ってみた!

最近10インチで激安タブレットを探していたのですが、10インチタブレットでなんと価格が1万円ちょっとというALLDOCUBE iPlay10 Proをゲットしたのでレビューを書きたいと思...

「iZotope Ozone 8 Elements」が無料でゲットできるキャンペーンが実施中!

「iZotope Ozone 8 Elements」が無料でゲットできるキャンペーンが実施中!

現在SONICWIREでは、省機能/高性能なマスタリングソフトウェアiZotope ( アイゾトープ )の「Ozone 8 Elements」を無償でプレゼントするキャンペーンを実施中です!Windows/...

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...

Social Links

Sponsored Link

Popular Article

Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位15位が表示されます。今ならリンクするだけで簡単に上位に表示されます。