【解決方法】AMPの記事に広告が表示されない時の対処方法

何気なくスマホで自分の書いた記事を検索し、閲覧すると広告が表示されていないではありませんか？

Google Adsenseに登録してPCで見ると広告が表示されてるにも関わらず、です。

しかも若干見栄えも違う。なんじゃこりゃ。という現象に陥り色々と試行錯誤してやっと落ち着いたので解消方法をまとめます。

前提として、Google Adsense に登録＆設定しており、PCで見ると広告が表示されているものとします。にもかかわらず、スマホで見ると以下の通り、

ブログ名と記事名の間に広告のコの字もありません。

現象としてはこのように、AMPの記事だけに広告が表示されなくなりました。記事によらず、ただ「AMP化された記事」というだけで、広告が表示されなくなります。

スマホからのアクセス数が多い記事であれば死活問題というわけです！

若干長くなりますが、要約すると①Google AdsenseでAMP記事にも広告を表示させるという設定をする②AMPのプラグインをいじる。だけです。

Google AdSenseでAMP記事に広告表示の設定手順を説明します。

Google AdSenseにログインし、広告→自動広告→AMP 自動広告と選択し、「手順 1: テキスト広告とディスプレイ広告のフォーマットをオンにします」の右側を下のようにします。

次に、Google AdSenseの「手順 2: このスクリプトをコピーして、AMP HTML の head タグ内に貼り付けます」をクリックし、出てきたコードをコピーします。（後述しますがこのコードを少しカスタマイズする必要がありました）

AMP HTMLがどこかわからず探しましたが、

WordPressのダッシュボート内の、プラグイン→プラグインエディター→右上の「編集するプラグインを選択」でAMPを選び、back-compat→single.phpの中にheadタグがあります。

</head>の直上に、先ほどコピーしたコードを貼り付けます。

amp-auto-adsをamp-adに置き換えます。以下の通り二か所になります。

次に、「手順 3: この広告コードをコピーして、AMP HTML の本文に貼り付けます」をクリックし、出てきたコードをコピーします。（モザイクをしている箇所は各ブログ特有の数値です。）
（後述しますがこのコードも少しカスタマイズする必要がありました）

templates→single.phpの、以下の部分　<header～の直前に貼り付けます。

以下のようにカスタマイズします。先ほどと同様にamp-auto-adsをamp-adにし、サイズとタイプを指定してあげます。

<amp-ad width=”300″ height=”100″
type=”adsense”
data-ad-client=”ca-pub-(あなたのコードを入れます)例123456789012345″>
</amp-ad>

<amp-ad width=“300” height=“600”
type=“adsense”
data-ad-client=“ca-pub-(あなたのコードを入れます)例123456789012345”>
</amp-ad>
</article>

結果的に以下の通り広告が表示されるようになりました。反映まで設定後約20分程度かかります。

実はこんなにすんなり広告が表示されたわけではありませんでした。

どうやら反映までものすごい時間がかかったか、AMPのエラーの一つである必須の構造化データ要素のエラーというものを解消させたか、のいずれかで広告が表示されるようになりました。

Googleが提供しているAMPテストを行います。以下リンクにURLを入れてテスト実行を押すだけ。URLのお尻には/ampを付けます。

WordPressの管理画面の外観→カスタマイズ→サイト基本情報を選び、ロゴ画像を登録するとこのエラーは解消されました。AMPで表示された記事のブログ名の右などに表示されるロゴです。

アイキャッチ画像を登録しないと同様のエラーになるようです。（imageエラー）

他にもAMPエラーがある場合は解消すると広告が表示されるようになるかと思います。「「amp–ad」で必要なタグ「amp–ad extension .js script」がないか、正しくありません。これはまもなくエラーとなります。」はあっても広告の表示には関係ありませんでした。

最後に、普段コードをいじらない私でもできました。コードの修正は自己責任の上、慎重におこなってくださいね。

投稿タグ: AMP, HTML, どこ, 広告, 手順 2: このスクリプトをコピーして、AMP HTML の head タグ内に貼り付けます, 手順 3: この広告コードをコピーして、AMP HTML の本文に貼り付けます, 表示されない