Warning: count(): Parameter must be an array or an object that implements Countable in /home/kyameron333/meriek.com/public_html/wp-includes/post-template.php on line 310

GoogleAdsenceのスマホでの見切れを直す方法【CSSは不要】

グーグルアドセンスのディスプレイスクエア型の広告は端末のサイズに合わせて広告のサイズを決めてくれる便利な広告なのですが、

「スマホだと中身が広告サイズに合ってなくて見切れてる!」

こんなことありませんか?

そのまま放置していれば、クリック率は激減して間違いなく収益が下がります

この記事では、自分でCSSを加えずにディスプレイスクエア型の広告がスマホで見切れるのを直す方法をわかりやすく教えます。

グーグルアドセンスの広告がスマホだと見切れる

一様モザイクをかけているのでわかりにくいですが、(モザイクがいるのかどうかは不明です)

私の持っている端末では以下のように広告が見切れてクリック率を確実に下げていました

スマホだとアドセンス広告が見切れる

 

グーグルアドセンスの広告がスマホで見切れるのを直す方法

アドセンスの広告コードを修正する

方法は簡単で、記事に貼り付ける広告コードをコピペせずに少し改造します

勝手にコードを書き換えていいのか?

ここで、「勝手に書き換えたら規約違反ではないのか?」と思われる方はいらっしゃると思いますが、安心してください。

むしろ「規約違反なのでは?」と考えられることはいいことです。

アドセンス広告コードの修正について、公式のAdSenseヘルプには以下のように書かれています

禁止されているコードの改変方法

AdSense コードを以下の方法で改変することは禁止されています。

  • display:none などを使用して広告ユニットを隠す(ただし、レスポンシブ広告ユニットを実装している場合を除く
  • コンテンツが隠れてしまうような方法、またはコンテンツが広告を覆い隠すような方法で AdSense 広告コードを設定する
  • モバイルサイトやレスポンシブ デザインのサイトでコンテンツと広告が重なるような方法で広告ユニットを配置する
  • 非表示キーワード、iframe、その他の方法を使用して広告のターゲット設定を操作する
  • メールやソフトウェアで広告を配信する
  • 広告の配信方法や表示方法を操作して不当に注目を集める(画面内にスライドイン表示される広告、ズームイン / ズームアウトされる広告など)
  • ユーザーがモバイル ウェブページでドラッグ操作を行ったときに広告クリックを発生させる

AdSense 広告コードの修正 – AdSenseヘルプより引用

専門用語が多いので意味がわからない方もいると思いますが、要するに

この禁止されているコードの改変方法さえ守っていれば、自分の好きなように広告コードを書き変えて大丈夫ということです。

以下で解説する方法はグーグルAdsense公式に書いてあった方法なので絶対に規約違反にはなりません

広告コードを改変する手順

1. グーグルアドセンスでディスプレイスクエア型の広告を作成

まず普通にディスプレイスクエア型の広告を広告サイズをレスポンシブルにして作成してください

googleアドセンスでディスプレイスクエア型の広告ユニットを作成

2. 作成した広告のコードを確認(これは記事に貼り付けない)

一部隠してありますが、作成したコードの赤線部分を次に使います。このコードは使いません

data-ad-clientとdata-ad-slotを後で使用する

3. 以下のコードを自分の設定に合わせて書き変える
  • 赤字部分の2カ所にさっき取得したコードの同じ項目(data-ad-client、data-ad-slot)をコピペして書き変えてください
  • 青字部分は自分で英数字のわかりやすい名前に変更できます(変更する場合は5カ所すべて同じものにしてください)
  • 緑字部分は上から①横幅が500px以下 ②横幅が500~800px ③横幅が800px以上のときの広告のサイズを表しているので、自分のサイトに合うように数値を変えられます。

(言っている意味がよくわからないという方は赤字部分のみ書き変えればOK)

<style>
.auto_ad { width: 320px; height: 100px; }
@media(min-width: 500px) { .auto_ad { width: 468px; height: 60px; } }
@media(min-width: 800px) { .auto_ad { width: 728px; height: 90px; } }
</style>
<script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– auto_ad –>
<ins class=”adsbygoogle auto_ad
style=”display:inline-block”
data-ad-client=ca-pub-9307261209790000
data-ad-slot=”8639930000“></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

4. 書き加えた上のコードを広告コードとして記事に貼り付ける

今までと同じようにこのコードを広告のコードとして記事に貼り付ければ完了です

結果

アドセンス広告が見切れていない

モザイクのせいでかなりわかりにくいですが、見切れるのが解決しました!

参考サイト

レスポンシブ広告コードを修正する方法 – AdSense ヘルプ

当サイトでも利用している筆者愛用のWordPressの有料テーマ「THE THOR(ザ・トール)」

圧倒的なSEO対策の強さ!しかもプラグインはほぼ不要!そして他のテーマとは明らかに違ったおしゃれなデザイン!。

SEO対策は標準で搭載されているので知識がほとんど不要で、初心者にこそおすすめできる最強の有料テーマとなっています

THE THORの使い方の記事も要チェック! >>THE THORの記事一覧へ

デモサイトの確認やテーマの購入はこちらからできます!

【圧倒的にSEOに強く・上位表示されやすいWordPressテーマ】 THE・THOR(ザ・トール)|テーマ&サポートプラン