よこはまの司法書士日記

ブログをご覧いただきありがとうございます。横浜市瀬谷区の司法書士です。HPはこちらhttps://oasis-lawoffice.com/

許可されていない属性または属性値がHTMLタグにあります アフィンガー版

こんにちは。司法書士の廣澤です。

 

わかりにくいエラー解除の記事が乱立しており、意味不明なエラーを前にして、大切な時間を失っていませんか?

 

先ほど、AMPエラーが解決できたので、アフィンガー5を利用している方向けに、その方法をご紹介しておきます。

 

 

まず検証用に、AMPテストページのタブを出しておきましょう。

エラーが出ているURLをコピペすることで、有効になったかすぐにこちらのページで確認できます。

 

早速、エラーを解消していきましょう。

まず、サーチコンソールで、左下のAMPページを開きます。 

 

許可されていない属性または属性値がHTMLタグにあります

 

AMPページの中から「許可されていない属性または属性値がHTMLタグにあります」と記載されているエラーをクリックします。

 

すると、エラーがあるURLがでてくるので、どれでもいいのでクリックします。

 

そうすると、次のような原因が表示されます。

 

 

属性「loading」はタグ「amp-img」で使用できません。

属性「decoding」はタグ「amp-img」で使用できません。

 

これらのエラーについては、アフィンガーの場合、親テーマのfunctions.php(外観→テーマファイルエディター→アフィンガー親テーマを選択→functions.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' );

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

 

アフィンガーURL

 

私の場合は、なぜかこれだけだとダメだったので、追加CSS(子テーマ)に次のコードを貼ることで解決しました。

 

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

 

これでAMPが有効になりました。ここまでに休日の1時間を使いました…。

 

 

 

 

原因についてですが、もともとの画像の属性が、wordpressのアップデートによって利用できなくなったという、これも、よくわからない理由のようです。上記コードによって、利用できない属性を消すとのこと。エラーが治りさえすれば、原因はどうでもいいですね!

 

 

AMP HTML タグの属性で指定されたレイアウトが無効です。

 

必須属性「height」がタグ「amp-img」にありません。

 

このエラーは上記のエラーとは違って、記事の中の画像が小さすぎるのが問題のようです。なので記事の中にある小さい画像を大きくしてみた結果、有効になりました。

 

 

まとめ

上記の対応でエラーはなくなりましたが、画像が消えるなどの問題は残ります。

場合によってはAMPへの対応はさせないというのも一つの方法かと思います。 

 

以上、参考になれば幸いです。

 

 

 

この記事が役に立ったという方はワンクリックのご協力 よろしくお願いいたします。↓↓ にほんブログ村 士業ブログへ
にほんブログ村 士業ブログ 司法書士へ