[無料WordPressテーマ] Luxeritasでamp-ad extension .js scriptが無いと言われたらAMP用の広告タグを見直そう

WordPressテーマ

無料WordPressテーマ Luxeritas イメージ

LuxeritasにはAdSenseのタグを自動でAMP対応してくれたり必要なスクリプトを挿入してくれるすばらな機能がありますが、私のサイトではAMP用ウィジェットのAdSense広告タグの書き方が悪かったようで、全ての投稿・固定ページで『「amp-ad」で必要なタグ「amp-ad extension .js script」がないか、正しくありません。これはまもなくエラーとなります。』というエラーが出てしまっている事に今更ながら気付きました。

冷静に思い返してみると「放っとけばその内にエラー消えるんじゃね？」とそのまま放置していたような気もしますが…それはそれで。エラーと言っても警告レベルなのでAMPページ自体は有効ですし広告も表示はされていますが、「まもなくエラーとなります。」というのが激しく気になるので、ここらでズバっと対応する事にしました。

AMPエラーが出ている理由

AdSenseの広告をAMPページで表示するには以下のスクリプトを追加する必要があり、LuxeritasではAMPページにAdSenseの広告コードがあれば自動でこのスクリプトを挿入してくれるようになっています。

AMP用AdSense広告の表示に必要なスクリプト

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

ところが、何かしらが原因でこれがうまく機能していなかったようなんですね。テーマ側に不具合があればもっと早くから問題になっているはずなので、どうやら私が設置したAMP用の広告タグに問題がありそうな気配が濃厚な感じです。

Luxeritas作者さんのサイトを参考にしてみる

正常に機能している例を見るのが一番手っ取り早いので、Luxeritas作者さんのサイトで適当にAMPページを表示してソースを確認してみると、やはりAMP広告用のスクリプトがしっかり挿入されています。ただ、私のサイトとはAMP用広告コードのフォーマットが微妙に違うような…

原因はAMP用ウィジェットの広告コードっぽい

さすがに自分のサイト以外ではウィジェットに書かれたコードがどうなっているかまでは確認しようがありませんが、私のサイトではこちらのAdSenseヘルプページからまんまコピペしたフォーマットのものを貼り付けていました。

参考レスポンシブ AMP 広告コードを修正する方法

幅と高さが固定の AMP 広告
<amp-ad
   layout="responsive"
   width=300
   height=250
   type="adsense"
   data-ad-client="ca-pub-1234567891234567"
   data-ad-slot="1234567890">
</amp-ad>

レイアウトではレスポンシブと言っておきながら幅と高さを固定にしていたり（それってレスポンシブじゃなくね？）その値をダブルクォーテーションで括ってなかったり（無くても効くのかもしれませんが）とツッコミどころはあるものの、素直にこのコードを使っていました。

これを以下のように修正してみたところ、Luxeritas側でAMP広告用スクリプトが正しく挿入されるようになり、結果的にAMPのValidateもエラー無しで通るようになりました。

修正後のAMP用広告コード

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

LuxeritasのAMP用AdSense広告コードの変換について

そもそもLuxeritasには自動でAdSenseの広告コードをAMP用に変換してくれるという便利な機能があるのに、なぜわざわざ自分でAMP用の広告コードを貼り付けていたかなんですが、それには理由があります。

私の場合、広告コードの先頭についているスクリプトのタグが1ページに1つあればいいのに全ての広告についているのがムダだと思ったので、その部分だけhead内にあらかじめ仕込んでおいて、各広告コードからは外してしまっていたんですね。それが災いしてLuxeritasでAMP用の広告タグに変換してもらえなかったようです。

AdSense広告コードのこの部分を外すとAMP用に変換されない…っぽい

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

その時は原因がさっぱりわからなかったので、自分でAMP用のコードを貼っていたといういきさつがありまして。そういうわけでレスポンシブ広告ユニットのコードをコピペする場合は、余計な事はせず単純にまるっとそのまんま貼り付けましょう。

同様のAMPエラーでお困りの方はお試しを

ごく一般的な使い方をしていればLuxeritasでは出るはずの無いエラーでしたが、もし私以外にも同様のAMPエラーが出てしまって困っているという方がみえましたらお役に立てば幸いです。

WordPressテーマAdSense,AMP対応,Luxeritas,トラブルシューティング