Lan's note

高速HUGOブログで脱WordPress!静的ブログでもココまでできるを実証中!

2019-07-07

HUGOのフルAMPで究極のブログ爆速化 その5~最適なアドセンスサイズとコード~

今回はフルAMPHUGOブログにおける最適なアドセンスのサイズとコードを紹介します。

フルAMPのブログの場合テンプレートにもよりますが、PCページでアドセンス広告の表示がきれいに表示されない、または、表示されないケースがあります。

そこでアドセンスに多く広告出稿されているバナーサイズを網羅できるアドセンスコードを検証してみました。

アドセンス広告ユニットの選択

広告ユニットは、ディスプレイ広告を選択します。

理由は、Googleが推奨しているということと、AMPに完全対応しているからです。

ディスプレイ広告を選択したらスクエアにて、通常のアドセンスコードを生成し、

  • data-ad-client="ca-pub-1234567890123456
  • data-ad-slot="1234567890

この番号を採番します。

AMP用アドセンスコード

ずばり以下のコードがフルAMPサイトにとって有効なコードです(オレオレ的検証)

<ad 
  layout="fixed-height"
  height=250 type="adsense" 
  data-ad-client="ca-pub-1234567890123456" 
  data-ad-slot="1234567890">
</amp-ad>

上記で採番した番号を、data-ad-clientとdata-ad-slotの箇所に記載します。

アドセンスの幅と高さ

width=300 height=250と固定してもアドセンス広告はキレイに様々な広告が表示さます。(固定値なので当たり前ですが。)

しかし、PCページで見ると、アドセンス広告の横幅が300pxと短く、空白が大きくなり間抜けな感じになります。

そこで、width="100vw" height=250としてみます。

この場合、当サイトではサイドバーにまでアドセンス広告が突き出てしまい、アドセンスが表示されないため却下としました。

最終的に、layout="fixed-height" height=250としました。

widthの設定はありません。高さを250に固定して、幅はレスポンシブに変更されるコードです。

高さ250は多くのアドセンス広告で使われているようで、高さ250にしておくと幅がレスポンシブに変わっても鮮明な画像でアドセンス画像が表示されたり、様々な広告が表示されるようになったことを確認しました。

まとめ

当ブログでは右にサイドバーを設け新着記事を置いています。

ここにインフィード的なアドセンス広告を貼りたかったのですが、高さ100pxのこの箇所にはいろいろ工夫してもアドセンスは表示されませんでした。

高さ100pxのディスプレイ広告は少ないのでしょうか?(レスポンスのはずなので表示されると思ったのですが・・・)

ということで、サイドバーにも高さ250pxの広告を置いています。

フルAMPブログはまだまだ少ないと思いますが、参考になれば幸いです。