Google Adsenseの自動広告を崩さずにキレイに表示する方法

不要なfloatやflexボックスを回避する

Google Adsenseの自動広告で「レイアウトが崩れる」「コンテンツを広告が突き抜ける」といった不具合が起きるのは、自動広告側がレイアウトの計算（主に横幅計算）を出来ないことが主な要因です。

ですので、floatやflexボックスなどの、ボックス幅が可変だったり算出しづらい（確定しない）レイアウトを組んでいると、Adsense側がwidthを100%と勘違いして横幅いっぱいの広告ユニットを挿入してしまったり、レイアウトを幅を超えたユニットを挿入することがあります。

ちなみに、自動広告ユニットは横幅がわからない時には「width = 100vh」で広告ユニットを挿入することが多いため、もし自動広告で「この横幅で入って欲しくない」という広告が挿入されたら、親要素の横幅を確定すれば解決することがあります。

通常の広告ユニットを差し込んでおく

Google Adsenseの自動広告は、通常の広告ユニット共存が可能です。

Google Adsenseで自動広告と通常広告ユニットを組み合わせて使う方法

ですので、レイアウト的に「ここは確実に広告を入れたい」というところに通常の広告ユニットを入れておくと自動広告が入れられる広告数が減るため、レイアウトが崩れる可能性が低くなります。

この時、Google Adsenseの管理画面で自動広告に関する「既存の広告ユニットを最適化しますか？」をオフにするのを忘れないようにしましょう。

表示したい場所をブロッキングをする

Google Adsenseの自動広告は、HTMLレイアウトを解析して適切な箇所へ広告ユニットを自動挿入してくれる機能です。ポイントは「HTMLレイアウトを解析する」というところ。

いかにGoogle Adsenseの自動広告が高機能でも、オリジナルのレイアウトを崩さないように広告を挿入するので、どうしてもページのレイアウト構造に依存されます。ですので、広告が表示され得る場所にはは、あらかじめHTMLマークアップした時点で空ブロッキングしておくと良いでしょう。

具体的には、

• ヘッダー
• フッター
• サイドカラム

など、広告が挿入されそうな部分に空ブロック入れておきます。ただし、Google Adsenseの自動広告がそこに広告を入れてくるかはわかりませんので、確実な方法ではありません。

---

Google Adsenseの自動広告を崩れずにキレイに表示する方法を見てきました。

便利な一方、きちんとサイズを判定してくれなったり、見た目が崩れることも多いデメリットもあります。しっかりとページデザインを組むことである程度は回避できるので、ぜひ試して見てください。