WordPress
WordPress

Google Search Consoleのエラーを修正する

GoogleSearchConsoleでのエラー概要
2020.10.15

こんにちは。

ブログを始めてからもう２年にもなりますが、未だにWordPressやSEOの勉強が疎かになっているマスクロです。

今回はそんな私がGoogle Search Consoleのエラーを修正するお話です。

今起きているエラーの確認

Search Consoleで検出されるエラーは以下のようにサマリー画面に表示されるため、エラー有無を見つけるのは簡単です。

GoogleSearchConsoleでのエラー概要

それぞれレポートを開くと個別のエラーを見ることができるようになっています。

私の場合は以下の３つのエラーが発生していました。

エラー①(カバレッジ)

エラー：送信された URL に noindex タグが追加されています

(Error: Submitted URL marked ‘noindex’)

エラー②(モバイルユーザビリティ)

エラー
・テキストが小さすぎて読めません
・クリック可能な要素同士が近すぎます
・コンテンツの幅が画面の幅を超えています

(Error: Text too small to read, Clickable elements too close together, Content wider than screen)

エラー③(パンくずリスト)

エラー：項目「id」の URL が無効です

(Error: Invalid URL in field "id")


また、各エラーをクリックすると、発生しているページや問題箇所といった詳細が表示されます。

GoogleSaerchConsoleでのエラーURLの表示
エラーの数とエラーが発生しているURL
GoogleSearchConsoleでのエラー詳細
実際にエラーが発生している箇所の情報

エラーの対処

ここからは実際にエラーを修正した際の対処を書いていきます。

エラー①(カバレッジ)

エラー：送信された URL に noindex タグが追加されています

このエラーは単純に該当ページにnoindexタグがついていただけでした。

かなり古い記事だったのでなぜnoindexタグを付けたのかは覚えていませんが、恐らくAll in One SEOの設定をいじっている際に間違えて設定してしまった等でしょう。

当該記事のnoindexタグを外せばエラーは解消されました。
(今までこの記事インデックス化されてなかったのか…もっと早く確認しておけばよかった…)

エラー②(モバイルユーザビリティ)

エラー
・テキストが小さすぎて読めません
・クリック可能な要素同士が近すぎます
・コンテンツの幅が画面の幅を超えています

この３つのエラーは全て折り返しのできない長いURLリンクが原因でした。
下図のようなリンクです。

長すぎて折り返しのできないURLを貼ってしまった例

これらの長すぎるURLを短く修正すると、３つともエラーは解消されました。

エラー③(パンくずリスト)

エラー：項目「id」の URL が無効です

このエラーが一番厄介でした。

まずは原因から見ていきます。

↓こちらが私のパンくずリストでエラーになっていた箇所です。

<li itemprop="itemListElement" itemscope
     itemtype="http://schema.org/ListItem" class="trail-item trail-end">
    <span itemprop="item">
        <span itemprop="name">VS CodeでUML図を作成してみた</span>
    </span>
    <meta itemprop="position" content="3" />
</li>


↓そしてこちらがGoogleがDeveloper Guideで紹介しているsampleです。

<li itemprop="itemListElement" itemscope
   itemtype="https://schema.org/ListItem">
　　　　<span itemprop="name">Award winners</span>
　　　　<meta itemprop="position" content="3" />
</li>

私の方は<span itemprop="item">~</span>が余分についていることが分かります。

そして、まさにここがエラーの原因だったんです。

Developer Guideのパンくずリストの条件には以下の記載があります。

item: パンくずを表すウェブページの URL。

〜中略〜

パンくずがパンくずリストの最後のアイテムである場合、item は必須ではありません。最後のアイテムに item が含まれていない場合、Google はそのページの URL を使用します。

https://developers.google.com/search/docs/data-types/breadcrumb#list-item


つまり、パンくずリストの末尾(つまり表示中のページ)にはitemのプロパティは不要なんです。

それなのに無駄に付けていて、しかもリンク切れになっていたせいでエラーになっていたと言うことですね。

これで原因が分かったので後は修正するだけです。

※ここから先の修正方法については、このブログで使用しているdelivery-lite以外のテーマでは異なるかもしれません。

まずはテーマの中でパンくずリストを設定している箇所を探します。

テーマをローカルにダウンロードしてきて、VS Codeで開きます。
そして、フォルダ内一括検索で”breadcrumb”や”itemListElement”等で検索して当たりを付けていきます。

すると、delivery-lite/inc/hybrid/breadcrumb-trail.phpというファイル内に以下の記述を発見しました。

// Allow developers to overwrite the items for the breadcrumb trail.
$this->items = array_unique( apply_filters( 'breadcrumb_trail_items', $this->items, $this->args ) );

‘breadcrumb_trail_items’というフィルターを追加することでitems(パンくずリストの各要素のリスト)を加工できるみたいです。

なので、子テーマのfunctions.phpに以下を追加します。

// ----------------------------------------------------------------------------
// (delivery-liteテーマ用)パンくずリストを加工
// ----------------------------------------------------------------------------
add_filter('breadcrumb_trail_items', 'add_blog_page_link', 10, 2);
function add_blog_page_link($items, $args) {
  array_pop($items);
  $items[] = sprintf( '<a href="%s">%s</a>', esc_url( get_permalink( $post_id ) ), get_the_title( $post_id ) );
  return $items;
}

該当箇所を消すよりも、正しいリンクを付ける方が修正量が少なそうだったので、パンくずリストの末尾要素にリンクを付けるようにしています。

たった数行の修正でエラーが直りました◎
(ここに辿り着くまで半日以上かかりましたが…)

終わりに

一応、修正後の状態はこんな感じです。

エラー修正後のGoogleSearchConsoleエラー概要画面


エラーが全て解消されています◎

期間が空いてしまったので3ヶ月程経過してしまっていますが…

期間が空いたのには、理由がありまして、、
もちろん文章を書くのが遅いのも理由の一つなんですが…

なんか、パンくずリストのエラー解消が予想以上に時間がかかったんですよね…

エラー修正後のパンくずリストエラーグラフ

100記事に達していない記事数なんですが、2ヶ月かかったんです。

他のは割とスッと解消されたのになんでなんですかね。謎。


まあエラーが全部解消されてスッキリしたのでよかったです。


同じエラーに当たってしまった人の参考になれば幸いです。


終わり。

コメント

タイトルとURLをコピーしました