ある日、Google検索結果で自サイトの表示に
「このページにはAMP実装エラーがあります」
との表示を発見。
GoogleサーチコンソールでAMPのエラーを確認してみます。
AMPを見てみると
「カスタム JavaScript は使用できません。」
とのメッセージ。
AMPバージョンのURLをクリックするとエラー部分がハイライトされて表示されます。
どうやら原因は先日設置したGoogle Adsenseの関連コンテンツのコードのようでした。
AMPページでは使用できるタグやコードに制限がありJavascriptも利用不可のため、Adsenseのコードも修正が必要だったのです。
関連コンテンツのコードをAMPページとAMPでない時で条件分岐して表示するように修正します。
関連コンテンツのコードをAMP対応にする
関連コンテンツに限らずAdsenseの広告コードをAMP対応にする場合、現在のところ手動で修正する必要があるようです。
Adsense管理画面でAMP対応のコードが発行されるようになっています。（2022年）
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>※AdsenseのコードをAMP用に修正することはポリシー違反ではないとのとことです。
Adsenseヘルプ：レスポンシブ AMP 広告コードを修正する方法
Adsense管理画面でAMP対応のコードが発行されるようになっています。（2022年）
Adsenseコードの取得画面で、AMP対応コードも取得できるようになっています。
<head></head>内と<body></body>タグにそれぞれコードを設置する必要があります。
WordPressテーマ「Luxeritas」での修正方法
Luxeritas（ルクセリタス）はWordPressが高速化できることで人気のある無料テーマです。
LuxeritasはAMP対応されているテーマで、ボタン一つでON/OFFを切り替えることができます。プラグインを導入しなくてもAMP対応できるのは嬉しいところです。
AMP 対応（プラグインでは実現できない多機能 AMP）
https://thk.kanzae.net/wp/point/t2789/
LuxeritasでAMPページとPC用にAdsenseのコードを切り替えるようにします。
LuxeritasでAMPかどうか条件分岐
LuxeritasでAMPページかどうかを判断するには以下のコードを記述します。
<?php if(isset($luxe['amp'])): ?>
AMPページで表示する内容をここに記述
<?php else: ?>
PCで表示する内容をここに記述
<?php endif; ?>AMP: Step1のコードを挿入する
<head></head>内にタグを挿入する方法は、WordPress管理画面内のLuxeritasメニューの中にある「子テーマの編集」で行います。
編集するのは「アクセス解析（head）」です。
子テーマフォルダにあるadd-analytics-head.phpを直接編集してもOKです。
アクセス解析（head）[add-analytics-head.php]に追記
<?php if(isset($luxe['amp'])): ?>
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<?php endif; ?>AMP: Step2のコードの挿入方法
Step.2のコードは、実際に広告を表示させたい場所に挿入する必要があります。
LuxeritasにはAMP用のウィジェットが多数用意されているのでそこにコードを記述します。
直接テンプレートファイルに挿入する場合
<?php if(isset($luxe['amp'])): ?>
<amp-ad width="100vw" height="320"
type="adsense"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="zzzzzzzzzz"
data-auto-format="mcrspv"
data-full-width="">
<div overflow=""></div>
</amp-ad>
<?php else: ?>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="zzzzzzzzzz"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<?php endif; ?>WordPressテーマ[Cocoon]での修正方法
こちらもレンタルサーバー各社のWPインストールにも組み込まれているWordPressの無料テーマとして絶大な人気のCocoonでのAMP対応方法です。
AMP: Step1のコードを挿入する
CocoonではAMP用のタグはテーマ側で挿入してくれるので特に何もする必要はありません。
AMP: Step2のコードの挿入方法
実際に広告を表示する場所へ設置する広告タグは、ウィジェットで設置できます。
カスタムHTMLをウィジェットに配置し、「チェック・入力したページで表示」をAMPページにチェックしAMPページだけに表示されるようにします。
AMPテストで確認
これでAMPページにも関連コンテンツを表示してエラーが出ないかを確認します。
これでエラーが解消されました。
最近人気のあるWordPressテーマには、既にSEO対策済みで、記事を装飾できるパーツが揃っていて、専門知識が無くてもブログのデザインができるものばかりです。
このようなテーマを使えば、今まで一からテーマ制作せずに大幅に工数削減できてしまいますね。
巷で評価の高いWordPressテーマの機能比較はこちらで確認できます。
