【Google AdSense】解決→|広告バナーがはみ出る|Failed to load resource|TagError|Unexpected token% エラー

【Google AdSense】解決→|広告バナーがはみ出る|Failed to load resource|TagError|Unexpected token% エラー

この記事内では、Google AdSenseを記事内に設定した際に遭遇した、様々なトラブルをご紹介しています。

自分で対応したもののみ載せているので、これ以外のエラーもあるかもしれませんが、もし同じようなケースだと思われた場合は参考にしてみてください。

JavaScriptのコンソール(Console)に表示されるエラーについて

Google Search Console error エラー画面
Google Search Console error エラー画面

JavaScriptのコンソール(Console)に表示されるエラーの赤い文字のエラーは修正しましょう。

黄色い文字のエラーは基本的には、そのままで大丈夫だと思います。

ブラウザの幅をものすごく狭めて表示した場合、赤文字のエラーが表示される場合がありますが、一般的なブラウザの表示幅でエラーが表示されなければ大丈夫です。

JavaScriptのコンソールエラーはページ読み込み時、または、更新時に表示内容が作られます。

幅を縮めたり、広めたりしてから更新し、エラーが出ていないかを確認しましょう。

JavaScript:コンソール(Console)エラーの簡単解説

広告のロードエラー(Google AdSense広告が表示されませんでした)
Failed to load resource: the server responded with a status of 400 ()

AdSenseの広告がまだ準備できていなかったり、何らかのエラーで表示できない状態

AdSense画像幅の領域サイズエラー(画像が入りきりませんでした)

TagError: Fluid responsive ads must be at least 250px wide

Unexpected token % エラー

AdSenseの広告が表示エリア内に入りきらない状態

AdSense広告の表示が崩れないようにCSSを設定する

Google AdSense内のCSSに注目しましょう。

「クラス:adsbygoogle」には、以下のように設定してありますが、「display: block」の後にはスタイルを何も設定しないのが、おすすめです。

AdSense広告の上下に空白:マージン(margin)を設定する

ただ、AdSense広告の配置が初期表示のままだと、記事の本文とAdSense広告がくっつき、ポリシー違反となってしまう可能性もあります。

広告前後に空白を入れるとそれが解決します。

広告の前後をあけたい時、空白行(margin)を入れたい時は、AdSense広告のタグをdivタグで囲い、以下のスタイルを指定します。

AdSense広告にpaddingは設定しない

AdSense広告にpaddingの設定をしてしまうと、広告表示のためのエリアが狭くなり、広告全体が表示されないことがあります。

AdSense広告がどうしてもはみ出る

AdSense広告がどうしてもはみ出てしまう時は、「overflow」を設定しましょう。

値は「scroll」を設定します。
hiddenにしてしまうと広告の表示されない部分ができてしまいますので、控えましょう。

最後まで読んでいただき、ありがとうございました。