Google Search ConsoleのAMP解析結果が根こそぎ無効となっていたため対処しました

2021-02-25Web,WordPress

はじめに

ブログのアクセス数がついに 月間30,000万PV となりました！

10年以上続けていたブログです。
全くアクセス数伸びませんでしたが、ここ数年で急にアクセス数が増えました。
ITエンジニアの需要が増えたことが関係しているのかな？

さて、昨日久しぶりに Google Search Console を覗いたところ、AMPページについてエラーが発声していました。

今日はどのような問題が発生していたのかと、対処法を取り上げたいと思います。

WordPress環境（バージョン、テーマ）

WordPress 5.6.1 (Luxeritas Child Theme テーマ)

"Google Search Console" のAMPページクローリングでエラーが発生していた

冒頭でも触れましたが、久しぶりに Google Search Console を覗いてみました。

左メニューからいくつかの内容を流し見していたところ、 「AMP」 ページを開いてびっくり。

「せっかくAMP対応していたページが根こそぎエラーになっている！」

なぜAMPページのクローリングでエラーが発生していたのか？

エラーとなっているページを1つ選んで詳細を確認してみました。

タグ内に、 loading="lazy" というHTML属性が設定されていることが原因でした。

ただ、僕はこのような設定を行った記憶がありません。

WordPress5.5から導入された「画像の遅延ローディング機能」が原因

Web上で調べてみると、 WordPress5.5 から 「画像の遅延ローディング機能」 が導入されたようです。

デフォルトの動作として、エントリの中に埋め込まれている画像には loading="lazy" が自動的に設定されるようです。

対処法1 ： wp-includes/functions.php に「遅延ローディング」の無効ロジックを追記

「遅延ローディング」を無効化するためには以下のようにWordPressのコードを書き換えます。

（注意：次にアップグレードした際に、また変更内容が消えてしまう可能性はあるので、様子を見たいと思います。）

2021-02-25追記：やはりWordPressのアップグレードで変更内容が戻ってしまいました。後述する対処法2を参考ください。

  1. WordPressのソースコードを開きます。 ( wp-includes/functions.php )
  2. 一番下に以下の1行を追記します。
add_filter( 'wp_lazy_loading_enabled', '__return_false' );

実際に変更されたコードは以下のようになります。

対処法2 ： wp-content/themes ディレクトリ配下の functions.php に「遅延ローディング」の無効ロジックを追記

WordPressのアップグレードを考慮するとこちらの方法が勧めです。

それぞれのテーマ別に functions.php というファイルがあるのでそちらに「遅延ローディング」の無効ロジックを追記します。

まずは対象ファイルを探してみます。

$ find wp-content/themes -type f  | grep functions
wp-content/themes/luxeritas/functions.php
wp-content/themes/luxech/functions.php

僕は Luxeritas というテーマの「子テーマ」というものを利用していますが、見つかった2つのファイルの内、後者が現在有効なテーマのファイルになります。

以下の１行をファイル末尾に追記して問題は解決しました。

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

動作確認

問題になったAMPページをどれでもよいので1つ開き、 「公開URLをテスト」 ボタンを押します。

僕のサイトはこれで、 Google Search ConsoleのAMPページクローリングのエラーが解消されました！

ひとこと

皆さんのために更に便利な技術情報を発信していきたいと思います。
引き続き応援よろしくおねがいします！

サイトのシェアも宜しくおねがいします！！！

2021-02-25Web,WordPress