WEB Tips WordPress Tips デザイン・コーディング

AMPエラー原因のAdsenseコードを修正する

2019-05-16

AMPエラー原因のAdsenseコードを修正する

ある日、Google検索結果で自サイトの表示に
「このページにはAMP実装エラーがあります」
との表示を発見。

GoogleサーチコンソールでAMPのエラーを確認してみます。

AMPを見てみると

サーチコンソールのAMPでエラー

「カスタム JavaScript は使用できません。」

とのメッセージ。
AMPバージョンのURLをクリックするとエラー部分がハイライトされて表示されます。

エラーの内容は「カスタムJavaScriptは使用できません」

どうやら原因は先日設置した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(ルクセリタス)

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ページにも関連コンテンツを表示してエラーが出ないかを確認します。

AMPテスト

AMPテストで「有効なAMPページです」と結果が出ました

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

最近人気のあるWordPressテーマには、既にSEO対策済みで、記事を装飾できるパーツが揃っていて、専門知識が無くてもブログのデザインができるものばかりです。

このようなテーマを使えば、今まで一からテーマ制作せずに大幅に工数削減できてしまいますね。

巷で評価の高いWordPressテーマの機能比較はこちらで確認できます。

WordPressテーマおすすめ8選!収益向上・グレードアップに最適

-WEB Tips, WordPress Tips, デザイン・コーディング
-