【WordPress】The attribute loading may not appear in tag amp-imgのAMPエラー修正

WEB制作

久々に記事を書いて、AMPチェックをしてみたら、

エラーが出てる!!!

どうして突然エラーになった

サーチコンソールで「AMPエラー」の連絡が来なかったから気が付かなかった。。。

The attribute ‘loading’ may not appear in tag ‘amp-img’.というエラー表示

The attribute ‘loading’ may not appear in tag ‘amp-img’.ってエラーが乱立されている!

どうやら画像imgタグに付与されている「loading=”lazy”」というのはAMPでは対応されていないという意味らしい。

「Jetpack」の画像遅延読み込みもOFFだし、

「Autoptimize」の画像遅延読み込みもOFFなはず。。。

ちなみに「Native Lazyload」はインストールしていない。。。

そもそも何も今までエラーがなかったのに、どうしてこうなった!?

WordPress5.5以降、imgタグに自動で「loading=”lazy”」が付与されるようになっていた!

そもそも最近何かやったっけなーと思ったら、WordPressのバージョンアップ原因だった!

WordPress5.5からはimgタグに自動で「loading=”lazy”」が付与されるようになった。もともとはプラグインを入れてわざわざ追加していた機能なだけに、この画像遅延読み込み機能は素晴らしいことなのだが、AMPはこのタグを認めていない。。。

WordPress5.5にアップデートして久々記事書いたから、ぜんぜん気が付かなかったよ(笑)

WordPress5.5以降の「loading=”lazy”」を、AMPの場合は削除する

答えは簡単、単純にAMPの場合のみ「loading=”lazy”」を取り除けばいいだけだね。

function.phpに、

を追加すると、「loading=”lazy”」がimgタグから削除される!

無事削除されてValidation Statusをパスした!

まとめ

いやー、パスしてよかったー!サーチコンソールから「AMPエラー」の連絡が来なかったからぜんぜん気が付かなかった!

たまに記事書いてエラーチェックしないとダメよね!