WordPressで「属性「loading」はタグ「amp-img」で使用できません。」となる問題を修正する
久々の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のキャッシュが残存している影響で、すぐにはこのエラーを削除することが出来なかった。そのことに気が付くまで時間を要してしまった。更新をサボるとこれだから恐ろしい。