Accelerated Mobile Pages (AMP)でアドセンスを掲載するには、つぎのコードのように、サイズ指定しなければなりません
<amp-ad width=”300″ height=”100″
type=”adsense”
data-ad-client=”ca-pub-0000123456789″
data-ad-slot=”123456789″>
</amp-ad>
すなわち、レスポンシブ広告ユニットを設置することができません。
しかし、レスポンシブ広告ユニットを設置したのと同じような効果を得る方法があります。
それは、広告ユニットにid（あるいはclass）を付け、メディアクエリで表示・非表示を切り替える方法です。
たとえば、id=”adsense1″、id=”adsense2″、id=”adsense3″を使って、以下のように設定します。
＜HTML＞
広告を設置したい場所に広告コードを３つ連続で記載します。
<amp-ad id=”adsense1″ width=”300″ height=”100″
type=”adsense”
data-ad-client=”ca-pub-0000123456789″
data-ad-slot=”123456789″>
</amp-ad>
<amp-ad id=”adsense2″ width=”468″ height=”60″
type=”adsense”
data-ad-client=”ca-pub-0000123456789″
data-ad-slot=”123456789″>
</amp-ad>
<amp-ad id=”adsense3″ width=”728″ height=”90″
type=”adsense”
data-ad-client=”ca-pub-0000123456789″
data-ad-slot=”123456789″>
</amp-ad>
＜CSS＞
そして、CSSでは、メディアクエリで表示を制御します。
<style amp-custom>
#adsense1 {display:none}
#adsense2 {display:none}
#adsense3 {display:block}
/* Tablet view */
@media screen and (max-width:769px)
{
#adsense1 {display:none}
#adsense2 {display:block}
#adsense3 {display:none}
}
/* Mobile view */
@media screen and (max-width:480px)
{
#adsense1 {display:block}
#adsense2 {display:none}
#adsense3 {display:none}
}
</style>
これで、端末の横幅にあわせて、アドセンスの表示が切り替わると思います。