AMPエラー「カスタム JavaScript は使用できません。」、原因のAdsenseコードを修正する
ある日、Google検索結果で自サイトの表示に
「このページにはAMP実装エラーがあります」
との表示を発見。
なに!?
GoogleサーチコンソールでAMPのエラーを確認してみます。
AMPを見てみると

「カスタム JavaScript は使用できません。」
とのメッセージ。
AMPバージョンのURLをクリックするとエラー部分がハイライトされて表示されます。

どうやら原因は先日設置したGoogle Adsenseの関連コンテンツのコードのようでした。
AMPページでは使用できるタグやコードに制限がありJavascriptも利用不可のため、Adsenseのコードも修正が必要だったのです。
single.phpに設置しているAdsense関連コンテンツのコードをAMPページとそれ以外のページで条件分岐して表示するように修正しました。
現在利用中のWordPressのテーマは「Luxeritas 」です。表示が早く、とても気に入って利用させていただいています。
名前を覚えるのにちょっと時間がかかります。。。。
LuxeritasではAMP対応されていて、ボタン一つでON/OFFを切り替えることができます。プラグインを導入しなくてもAMP対応できるので嬉しいことです。
AMP 対応(プラグインでは実現できない多機能 AMP)
https://thk.kanzae.net/wp/point/t2789/
LuxeritasでAMPページとPC用にAdsenseのコードを切り替えるようにしました。
※AdsenseのコードをAMP用に修正することはポリシー違反ではないとのとことです。
AMP用ページにGoogleアドセンスを問題なく設置する方法
Adsenseヘルプ:レスポンシブ AMP 広告コードを修正する方法
LuxeritasでAMPかどうか条件分岐
LuxeritasでAMPページかどうかを判断するには以下のコードを記述します
<?php if(isset($luxe['amp'])): ?>
AMPページで表示する内容をここに記述
<?php else: ?>
PCで表示する内容をここに記述
<?php endif; ?>
関連コンテンツのコードをAMP対応にする
関連コンテンツに限らずAdsenseの広告コードをAMP対応にする場合、現在のところ手動で修正する必要があるようです。
Adsenseで作成した広告コードから、
data-ad-client(サイト運営者ID)
data-ad-slot(広告ユニットID)
の二つを見つけます。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-XXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
上記コードの5行目、6行目の
ca-pub-XXXXXXXXXXX
XXXXXXXXXX
(実際は数字)をコピーして以下のコードに貼り付けます。
<amp-ad
layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-XXXXXXXXXXX"
data-ad-slot="XXXXXXXXXXX">
</amp-ad>
AMPテストで確認
これでAMPページにも関連コンテンツを表示してエラーが出ないかを確認します。

これでエラーが解消されました^^