今回はアフィンガーでAMPの設定エラーに対応するための話。
AFFINGERカスタム情報まとめ
「許可されていない属性または属性値が HMTL タグにあります」というエラーが発生
先日このブログをAMP(Accelerated Mobile Pages)に対応するための設定を行いました。
AMP対応のページにするためには、A8.netやもしもアフィリエイト、アマゾンアソシエイトと言ったアフィリエイトリンクが入っていてはいけなかったり、Twitterの埋め込み等があってはいけないなど色々な制約があります。
そうした課題をクリアしてついに完成したAMPですが、Search Consoleでこんなエラーを出すようになりました。
【許可されていない属性または属性値がHTMLタグにあります】
まったく身に覚えのないエラーです。しかもAMP化したすべてのページに対してエラーを表示しています。
言っている意味もわかりません。
いろいろと調べてみると、どうやらAMPのページの要件を満たすコードになっていないとのこと。
ようはアフィリエイトタグやTwitterなどのように、使ってはいけないタグが入っているということのようです。
まだ原因があるというのか…。
AMP化自体に問題があるとのことなので、AMPテストで原因を探ってみます。
AMPテストで「属性「loading」はタグ「amp-img」で使用できません」と表示される
さっそくAMPテストを使って問題がおきているページを確認します。
>>AMPテスト[Google Search Console]
するとデカデカとAMP対応ページではないと表示されました。
【有効なAMPページではありません 無効なAMPページは、Google検索結果にAMP固有の機能が表示されません】
おかしい…AMP化したときはきちんとできたはずなのに。
原因を探ってみると、このようなエラー表示が。
【検証の問題 AMPエラー 属性「loading」はタグ「amp-img」で使用できません ２個のインスタンス】
言っている意味がわからなかったのでさらにネットで確認をしてみると問題なのは、[amp-img]のタグの中にある、「loading=”lazy"」という記述が原因になっているようです。
Lazy LoadがONになっているとAMPページではエラーが起こる
このloading=”lazy"というのは、いわゆるLazy Load（遅延ロード）のこと。
webページを高速表示するために、容量の大きいファイルやページの下部のデータの読み込みをあえて遅延させ、ページの描画を早めるという手法です。
これはWordPress 5.5 からネイティブサポートされた機能なのですが、言われてみればONにする設定を数日前に行いました。これが原因か…。
ページ表示を高速化するHTMLコード「AMP」にするためには、サイト全体を高速化するためのレイジーロードをOFFにしないといけないジレンマが発生してしまいました。
どうにか、「AMPのページではLazy-LoadをOFFにして、それ以外の通常ページではLazy-LoadをONにしたままにする」ということができないか…。
AFFINGERテーマであれば、function.phpにコードをコピペするだけで問題解消
いろいろと調べてみるうちに、こんなページにいきあたりました。
>>【AFFINGER】AMPエラー”属性「loading」はタグ「amp-img」で使用できません。”の対処法
まさに同じ症状でトラブルを経験している記事で、さらにこの問題を解決するためのコードまで掲載されています。最高！愛してる！
このブログのテーマもAFFINGERですので、そっくりそのまま使わせていただきました。
function.phpに以下のコードを記述すればOKです。
funciton.php
function apm_no_lazy_loading(){
if(amp_is_amp())
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
}
add_filter( 'amp_initialized_filters', 'apm_no_lazy_loading' );
問題解決。AMPが正常に機能した。
function.phpにコードを貼り付けして、キャッシュをクリアして再度AMPテストを行いました。
結果はこのように「有効なAMPページです」と表示されました！ミッションコンプリート！
ブログ全ページのLazy LoadをOFFにする方法もアリ
この解決方法はAFFINGERのテーマでは有効ですが、それ以外のテーマでは通用しないかもしれません。
その場合、AMP化したページだけではなくすべてのページでLazy LoadをOFFにして、すべてのページからloading=”lazy"を消し去ってしまえばOKです。
その方法を取る場合、こちらのページが参考になるかと思います。
>>LION BLOG │ AMPエラー「許可されていない属性または属性値がHTMLタグにあります」を解消する
こちらの記事の中で紹介されている以下のコードを、同じくfunction.php内にコピペすればOKです。
funciton.php
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
Lazy Loadの強みごとなくなってしまいますが、それでもAMP化を優先したい場合は、ぜひ試してみてください。
AMPのLazy LoadをOFFにしても、PageSpeed Insightsのスコアにも影響がでなかった
今回はLazy-Loadを、AMP化したページだけで無効にしました。
その他の通常のページはLazy Loadは有効のままなので、 PageSpeed Insights で表示速度をチェックしても悪影響は全く出ていませんでした。
これで無事問題解決です。
同じような症状で悩む方のために、情報シェアさせていただきました。
役に立てば幸いです。
ここまでお読みいただきましてありがとうございました！
