WordPressで「属性「loading」はタグ「amp-img」で使用できません。」となる問題を修正する

WordpressカスタマイズWordpress, AMP

 

久々のBlog投稿である。ネタがなくなったというわけではなく、単純にブログを書くという習慣がなくなってしまったのだ。ただ、どこかにアウトプットをしていかないと次々と忘れていってしまうので、メモ程度の内容でも良いからここに残していくようにしようと考えた。

さて、久々にWordpressをいじり、バージョンアップをしたところ、AMPページに関して以下のエラーが出現していることに気が付いた。というか、Search Consoleを確認したところ、Wordpressのアップデートに関係なく、このエラーは1年以上前から出続けていたようだ。

許可されていない属性または属性値がHMTLタグにあります。
属性「loading」はタグ「amp-img」で使用できません。

正直、どのプラグインがどのような悪さをしているのか分からないため、関数を使って一括して処理してしまおう。

AMPページで「loading="lazy"」を削除する

私の場合、悪さをしていたのは loading="lazy" のタグ。このタグがプラグインによって書き込まれたのか、はたまたWordpress本体なのかテーマなのかは調べてみないと分からないが、どうやらサムネイル画像に出力されているようだ。そこで、functions.phpに記載をし、出力されるAMPページのサムネイル記述からこの表記を全面的に削除することにする。

もっとも、これによってAMPの利点である「高速なページ描写」が失われる気がしてならないが、しかしテストに合格しないことにはままならないのだ。

従って、以下のコードで無理矢理修正することとした。

add_filter( 'post_thumbnail_html', 'remove_loading', 10 );

functionremove_loading($html){
   $html = preg_replace( '/loading="lazy"/', "", $html );
   return $html;
}

これによって、なんとかこのエラーが出現することはなくなった。が、あくまでも一次的対応であり、恒久対応ではない点にご注意を。

ちなみに、Google Search Consoleから修正をかけた際、Nginx – fastCGIのキャッシュが残存している影響で、すぐにはこのエラーを削除することが出来なかった。そのことに気が付くまで時間を要してしまった。更新をサボるとこれだから恐ろしい。


執筆者紹介

Thir

購入したガジェットの紹介やサーバーの構築方法、スマートホーム化等、そのときハマっていたもののメモ書き・趣味の備忘録ではありますが、お役に立つ情報があれば幸いです。最近はYouTubeでもレビュー動画やVlogをあげています。サイト紹介・プロフィールはこちら。依頼・お問い合わせはこちらから。