悩む人
Googleアドセンスをレスポンシブ表示させるのってどうやるの?
Googleアドセンスをレスポンシブ表示させるのってどうやるの?アドセンス広告を縦長や横長で表示させたいんだけど、やり方を教えてください。もう、Googleアドセンスの貼り方とかわけわかんねー…
こんなお悩みを解決します。
✔︎本記事の内容
- Googleアドセンスをレスポンシブ表示させる方法
- Googleアドセンスがスマホで横幅いっぱいに表示される場合の対処法
- Googleアドセンスの広告最適化は破滅するという矛盾した未来
この記事を書いている僕は、ブログ歴2年ほど。基本的に、Googleアドセンスの使い方はマスターしてます。
本記事では、Googleアドセンスをブログ内にレスポンシブ表示で貼り付ける方法を解説します。
なお、ちょっとだけコードをいじる作業があります。とはいえ、プログラミングができなくても問題ないのでご安心を。
なお、Googleアドセンスの審査に合格してない方は、【必見】Googleアドセンス審査に一発合格する7つのコツ【Googleに愛される秘訣】をどうぞ。
Googleアドセンスをレスポンシブ表示させる方法
Googleアドセンスは、レスポンシブが必須。
Googleや読者からの評価も悪くなるので。
SEO対策としても、レスポンシブは重要ですよ。
スマホ・タブレット・PCなど、どのデバイスでも大きさや形が崩れないで表示させることです。
Googleアドセンスの作り方
そもそも広告が必要なので
まず、下記の手順より広告を作りましょう。
Google AdSenseの管理画面より
「広告」→「サマリー」→「広告ユニットごと」から新しい広告ユニットを作成します。
広告ユニット名を決めます。
広告サイズを「レスポンシブ」か「固定」を選択し、htmlコードを作成する。基本的にレスポンシブでOK。
作成されたhtmlコードをコピーし、ブログに貼り付けます。
基本的に、WordPress管理画面からウィジットで「カスタムhtml」や「広告専用のウィジット」に貼り付ければ問題ないです。
生成されるhtmlコードの雛形
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-＊＊＊＊＊＊＊＊＊＊＊＊"
crossorigin="anonymous"></script>
<!-- top-ad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊"
data-ad-slot="＊＊＊＊＊＊＊＊＊＊"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
//重要な数字は伏せています...このようなhtmlコードが出来上がると思います。
あとは、コピーして貼り付ければ終わり。
本記事では「data-ad-format="auto"」「data-full-width-responsive="true"」をいじります。
「よくわかんねー」ってのが感想だと思います。
- data-ad-format=”auto”→広告の型を設定する（横とか縦とか）
- data-full-width-responsive=”true”→（横幅いっぱいのレスポンシブにするか）
順番に解説していきます。
広告が反映されるまで、最長1時間程度かかることもあるみたいですね。とはいえ、すぐ反映されるので、反映されない場合は気長に待ちましょう。
広告の形状は3つ【縦長・横長・レクタングル】
広告の形は
下記の3種類あります。
- 縦長：縦にズラーって長い広告
- 横長：横にスラーって長い広告
- レクタングル：長方形の広告
基本的にコードはいじらなくてもOKです。
コードを少しだけいじることで
挿入したい所に好きな型の広告を設定できます。
本記事では、ココにフォーカスします。
上記のコードを観察してもらうとわかりますが、「deta-ad-format="auto"」が初期設定。こちらを少しいじると、広告を好きな形に変更できるようになります。
縦長の広告にする方法
変更前：deta-ad-format="auto" 変更後：deta-ad-format="vertical"
横長の広告にする方法
変更前：deta-ad-format="auto" 変更後：deta-ad-format="horizontal"
レクタングルの広告にする方法
変更前：deta-ad-format="auto" 変更後：deta-ad-format="rectangle"
横長またはレクタングルなどの広告にする方法
変更前：deta-ad-format="auto" 変更後：deta-ad-format="horizontal, rectangle"
組み合わせは、半角カンマで区切ります。
少しコードをいじるだけで
自由に広告の形を変更できます。
Googleアドセンスがスマホで横幅いっぱいに表示される場合の対処法
レスポンシブが「なんか嫌だな」という方は
下記の方法で横いっぱいに表示されなくなります。
全横幅サイズの解除方法
実は、レスポンシブ設定にすると
スマホでは、広告が横いっぱいに表示されます。
その設定を解除できる方法です。
それは下記のとおり。
変更前：data-full-width-responsive="true" 変更後：data-full-width-responsive="false"
左右にマージンがとれ隙間ができます。
とはいえ、この方法はおすすめしません。
なぜなら
広告収益に悪影響があることが確認されたから。
ただし、これによって収益増加の機会が減る可能性があります。Google のテストにより、モバイル デバイスが縦表示の場合には全幅サイズのレスポンシブ広告の成果が高いことが判明しています。
よって
「data-full-width-responsive=”true”」のままでOK。
横一杯に広告が表示される理由は
このように、広告収益に関係あるからです。
とはいえ、コードの改変って違反じゃないの？
下記に違反ではないと書かれているので
コード改変は問題ないです。
ただし、本記事で紹介した限りです。
アドセンス広告掲載のガイドラインを守りましょう。
Googleアドセンスの広告最適化は破滅するという矛盾した未来
さいごに、ちょっとだけ未来予想。
広告の最適化は、破滅する未来ですよ。
Googleアドセンスのベタ塗りは、よくない
よく見かけますけど、サイト内に広告を貼りまくるのは、よくないですよ。
- 理由①：読者にストレス
- 理由②：サイトが遅くなる
- 理由③：結果、Googleから低評価
理由①：読者にストレス
シンプルに、読者にストレスです。
たとえば、記事をクリックした時、ポップアップ広告が表示される場合がありますよね?ストレスじゃないですか?別にそんな広告に興味はないですし...
それに、記事内にいろいろ広告が貼ってあると、誤クリックするときもありますよね?シンプルにストレスかと。
というと、Googleアドセンスの張り過ぎは、読者の操作性に悪影響を与えるハズ。つまり、サイト離脱が高まります。Google広告の最適化は、運営者の未来を破滅させるかと。
理由②：サイトが遅くなる
Googleアドセンスは、シンプルに重いです。
なぜなら、スクリプトを読み込むから。
Googleは、サイトの高速化を重要視していますよ。えっ?矛盾しているんじゃ...
というと、サイト高速を阻害するGoogleアドセンス広告は、運営者の未来を破滅させるかと。
WordPressブログをグーんと高速化させる極意3つ【紳士になりましょう】
理由③：結果、Googleから低評価
ここまで読めば、お分かりかと。
Googleアドセンスを最適化しようとGoogleの方針に従うと、読者とGoogleから逆に嫌われるという「矛盾」を...
これ如何に?
Googleアドセンスは、ほどほどにすべきです。詳しくは、【SEO】Googleが重視するCore Web Vitals（コアウェブバイタル）とは?【LCP・FID・CLS】をどうぞ。
というわけで、カンタンな未来予想でした。
なお、Googleはモバイルファーストに完全移行しますので、対応してないと完全アウト。スマホ設計も意識していきましょうね。今回は、以上です。
【無料】サルでもできる!?WordPressブログの始め方【たった10分で人生が変わった】
初心者でもできるアフィリエイトの始め方【手順は3つ/即日5万保証】
