アドセンス広告の対応

viewportタグ(<meta name="viewport" content="width=device-width, initial-scale=1.0">)を使用時、アドセンス広告が原因で、スマホ画面のレイアウトが崩れてしまうことがあります。もちろん、「モバイルフレンドリーテスト」でも、「コンテンツの幅が画面の幅を超えています」と警告されてしまいます。

アドセンスのリンクユニットがスマホ画面のレイアウトを崩してしまう例

上の画像のように「リンクユニット」は、スマートフォンに非対応の広告ユニットですので、特にレイアウト崩れを起こしやすいです。スマートフォン用のスタイルシートを用いて、スマホからの閲覧時には、リンクユニットは非表示にしましょう。

【CSS】

#ads_link {
	display:none;
}

アドセンスのコード改変については規約違反が懸念されますが、公式サイトでは、「レスポンシブ広告ユニットを実装している場合は、display:none などを使用して広告ユニットを隠すこと」など、ユーザーの利便を図る上でのコード改変は許可されている為、今回の件も違反にならないと解釈しています。

幅の広いディスプレイ広告・テキスト広告にも注意

ビッグバナーなど横幅がある広告ユニットを使用している場合も、スマホ画面のレイアウトを崩してしまします。現在、スマートフォン専用の「レスポンシブ広告ユニット」が配信されていますので、その広告ユニットを使用するようにしましょう。

スポンサードリンク