アドセンス用jsに「AdSense head tag doesn't support data-deferred attribute.」が出た時の原因と解決法。

AdSense head tag doesn't support data-deferred attribute.とは？

ある日Chromeのデベロッパーツールで見慣れない注意が出ていました。

Chromeのデベロッパーツールに出た注意

「AdSense head tag doesn't support data-deferred attribute.」という注意で、直訳すると「アドセンスのheadタグはdata-deferred属性に対応していません。」という意味になります。

さっそく問題個所を特定したところ、どうやらGoogleアドセンス（広告）に使用される「adsbygoogle.js」というjsファイルから出力されている注意のようです。

「adsbygoogle.js」が原因の模様

警告ではなく注意なのでサイトに問題は起きませんが、アドセンス関係のjsファイルという事もあり、対処することにしました。

原因は遅延プラグイン

エラーメッセージから推測するに遅延読み込みが原因であることが濃厚ですので、adsbygoogle.jsを読み込んでいるヘッダー部分を確認します。

するとadsbygoogle.jsの読み込み部分に「defer data-deferred="1"」という見慣れない属性がついていました。

さらに、本来のコードには以下のような感じでasync属性が付与されているはずですが、defer属性で出力されています。

<!--アドセンスの埋め込みコード例-->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>

asyncをdeferに変更するのがコードの改変になるのかは不明ですが、一応defer自体は有効値なのでdata-deferred="1"の部分が問題のようです。
ここで”そんな属性はサポートしてないよ！”と怒られている模様…

その後、キャッシュが怪しいと睨んだところビンゴでした！
どうやらWordpressのキャッシュプラグインである「LiteSpeed Cache」によってdeta-deferred="1"という属性が自動付与され、出力されているようです。

解決法：該当jsの遅延読み込みを除外する

キャッシュプラグインを一時停止してみると注意が出なくなったので、これが原因ですがこのままではキャッシュが使えません…

それでは困るのでプラグインの設定画面を色々確認したところ「LiteSpeed Cache」には任意ファイルの遅延読み込みを除外する設定がありました。

LiteSpeed Cache＞ページの最適化＞チューニング

JS繰延を除外という欄があり、初期設定ではjqueryが除外設定されていました。
ここに「adsbygoogle.js」を追加してみたところ、ヘッダーに埋め込んだアドセンスのコードがそのまま出力されるようになり解決しました！

結局jsの遅延読み込みを除外することで解決したわけですが、adsbygoogle.js内には属性値の判定コードまで入っているんですね・ｗ・

なお説明には”HTMLコードの属性data-no-defer="1"を持つ要素は除外されます”とありますが、コード改変になる可能性があるのでこの方法は使いませんでした。

まとめ

今回問題となった「deta-deferred="1"」という属性はおそらくLiteSpeed Cache専用のものですが、デベロッパーツールによく似た注意が出ている時はその属性値を削除することで解決できるはずです。

キャッシュプラグインが自動的に遅延読み込みするように設定してくれるのはありがたいのですが、asyncをdeferに変更するのがアドセンスのコード改変に触れる可能性があるなら結構まずかったですね(;'∀')