2017/08/08 161views

【ワードプレス】プラグイン「AMP」使用時に、h2タグ上部にアドセンスを表示させているときのAMP対応方法

ワードプレスでお手軽にAMP対応できるAutomattic社のプラグイン「AMPなんですが、functions.phpを編集して最初のh2上部にアドセンスを表示するようにしていると、対策していない場合AMPがエラーを吐き出します。

理由は、AMPサイト用のアドセンスコード通常ページのアドセンスのコードが違うから。

これはググればすぐにやり方が出てくるのでやっている人が多いと思います。ですので、自分のページがAMPに対応しているかどうかの確認をしたことがない人はかならず確認しましょう!

「AMP」プラグインで対応してくれるのは「functions.phpで編集をしていない部分」だけと思っておいたほうがいいです。

確認は『AMP Test – Google Search Console』で出来ます。

スポンサーリンク

通常ページとAMPページのコードの違い

まず通常ページのアドセンスコードは以下のような形です。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

見てもらったらわかると思いますが<script>を使用している為、AMPページではエラーを吐き出します。

で、AMP対応のアドセンスコードはこちら。

<amp-ad
layout="responsive"
width=300
height=250
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>

全く記述の仕方が違いますよね(;´Д`)

なので条件分岐によって通常ページとAMPページで読み込むコードを変えてやらないといけません

AMPページの条件分岐

プラグイン「AMP」を使用している場合、プラグインに内包されている条件分岐を使用することが出来ます。

それがこちら。

<?php if(function_exists('is_amp_endpoint') && is_amp_endpoint()): ?>
//ここにAMPページのコード
<?php else: ?>
//ここに通常ページのコード
<?php endif; ?><!-- AMP分岐終了 -->

これで今までのコードを通常ページの部分に。

AMP対応のアドセンスコードをAMPページの部分に追加すればエラーが直ります。

せっかくAMP対応させるためにプラグインを導入しているのに、エラーになっては何の意味もありませんので、テーマを編集したりした場合にはしっかりとAMPに対応されているかの確認もしておきましょう!

スポンサーリンク

関連記事