wordpressで、THE THORというテーマを使っているのですが、wordpressをアップロードした際に、”属性「loading」はタグ「amp-img」で使用できません。”と出力されるようになってしまいました。そのため、対応方法をまとめておきます。
サーチコンソールで、有効な AMP ページではありませんとエラー表示された
Googleのサーチコンソール / https://search.google.com/test/amp を開くと、有効な AMP ページではありませんとエラー表示されました。
＋＋＋＋＋＋＋＋＋＋＋＋＋＋
有効な AMP ページではありません
無効な AMP ページは、Google 検索結果に AMP 固有の機能が表示されません
属性「loading」はタグ「amp-img」で使用できません。
＋＋＋＋＋＋＋＋＋＋＋＋＋＋
原因と対応をまとめていきます。
原因
2020/8/12に、wordpress5.5がリリースされたのですが、このバージョンが原因でエラーが起きています。wordpress5.5は、xmlサイトマップの自動生成、画像遅延読み込み機能などが追加されており、今までのバージョンと比べて、比較的大きめのアップデートで、メジャーアップデート並みのバージョンアップと言われています。
wordpress自体の利便性も大きく向上しましたが、一方で、様々な変化に影響を受けるかたちで、wordpressの各テーマで問題も起きているようです。今回、有効な AMP ページではありませんと出てしまっているのは、wordpressのアップデートに組み込まれていた、画像の遅延読み込み機能 loading=”lazy” が、AMPページでは扱えないため、結果的にエラーになるようです。
lazyloadは、web上で扱われるライブラリの1つですが、画像の遅延読み込み機能を持っており、画像が画面に映ったタイミングで読み込みことで、最初のページ読み込み時には読み込まないようになります。そのため、必要部分のみ読み込むため、ページ全体の表示速度を高速化させることができます。これがwordpressでも使われるのは良いアップデートなのですが、AMPページでは、imgタグの中に、このloadingを使ってはいけないルールになっているため、エラーになっています。
対応方法
loading=”lazy” を削除するようにします。削除の仕方ですが、wordpressの親テーマのfunctions.php にコードを追加します。
$ vim /var/www/html/wp-content/themes/the-thor/functions.php
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
上記のプログラムをfunctions.phpに追加することで、loading=”lazy” が追加されなくなります。そして勝手に、loading=”lazy”が入るのを防ぐことができます。
上記をした後に、再度、googleサーチコンソールを確認してみます。
https://search.google.com/test/amp
問題ないことが確認できました。