ブログに命を燃やしています！
どうも、あみさかです
最近、なかなかアドセンス広告のクリック率が上がらなくて困っています。
現時点では、
- 目次下広告
- 記事の中央の広告
- インフィード広告
- 関連コンテンツ
の4つの広告を設定しているのですが、なかなかアクセス数に対しての広告の働きが良くありません。
そのため記事上に広告を設置することにしたのですが、レスポンシブ広告を設置するとスマホのページでは非常に邪魔になってしまいます。
ファーストビューに入ってくる画面の半分を広告で埋めてしまうと、それだけでサイトを離れてしまう人もいるでしょう。
というわけで今回は「タイトル下の位置に横長の広告を貼り付けます」という記事です。
広告の貼り付けに失敗したり、上手く表示されなかったり紆余曲折あったため、順を追って説明していきます。
- タイトル下に貼り付ける広告のサイズ
- はてなブログのレスポンシブの問題点
- はてなブログのタイトル下に広告を設置
- 広告をレスポンシブにしサイズを固定する
- レスポンシブ広告のコードの設置の注意点
- まだ広告の配置については試行錯誤中
タイトル下に貼り付ける広告のサイズ
まずは、広告のサイズの問題を解決する必要があります。
アドセンスのディスプレイ広告を貼り付けるのですが、広告のサイズをレスポンシブにしてしまうとサイズが大きすぎてユーザビリティを下げてしまうことになります。
大きい広告の方が単価も高くなりますが、記事が読みにくくなってしまっては意味がありません。
ページの表示速度も大きく落としてしまう可能性があります。
スマホでの広告は320×50か320×100
（画像のスマホの広告サイズは320×100です）
タイトル下に貼り付けるスマホでのバナー広告では、320×50か320×100のサイズが主流です。
横幅をめいっぱい使いながら、広告の縦の幅は短くあまり邪魔にならないサイズです。
どちらが良いかは個人の好みと言いたいところですが、それぞれ多少の差はあります。
320×50サイズの広告は種類が多く、広告主の競争も高いためクリックされやすい広告が表示される可能性も高くなります。
一方320×100サイズの広告は、広告自体に大きさがあるため単価はやや高くなります。
ただ、一番主流ということではなく種類がそこまで多くないため、クリックされる数が低くなる可能性があります。
それぞれにメリットもデメリットもあるため、良いと思った方を選びましょう。
パソコン・PCでの広告は728×90
パソコンでタイトル下に広告を入れるのであれば、728×90のサイズが断トツでオススメです。
PCで横長の広告を貼るのであればこのサイズです。
他のサイズでは広告の種類が少なくなってしまうため、特にこだわりがなければこのサイズにしておきましょう。
はてなブログのレスポンシブの問題点
この時に、一つの問題が起こります。
僕は、はてなブログのサイトをレスポンシブ設定にしているため、スマホとPCの広告が同じものに設定されてしまいます。
広告を使い分けることができないため、スマホかパソコンのどちらかに合わせてタイトル下の広告を設置するか、広告自体をレスポンシブにする必要があります。
もちろん、僕はそんなコードの組み方を知らないためとりあえずアクセスの多いスマホに合わせて320×100のサイズの広告を設置してみました。
はてなブログのタイトル下に広告を設置
先に書いておきますが、この広告の設置の仕方は正解ではありません。
※一度最後まで記事を読んでから広告を設置してください。
レスポンシブデザインを使っていない人や、スマホとPCのそれぞれで広告を設置する場合のみこちらを参考にしてください
レスポンシブデザインの設定をしているため、スマホとPCで共通した広告が入ってしまいます。
仕方がないのでアクセスの多いスマホに合わせるため、320×100のディスプレイ広告をタイトル下に設置します。
広告はご存知の通り、アドセンスの新しい広告ユニットの作成から「ディスプレイ広告」を選択します。
広告ユニットの名前は自分が分かりやすいものをつけて、右上にある広告サイズを「固定」に変更します。
サイズは幅を320、高さを100に設定して広告を作ります。
そして、できたコードをはてなブログのデザインから「カスタマイズ⇒ヘッダ」と選択し、タイトル下という場所にコードを貼り付ければ完成です。
ただ、その場合広告が左寄せになってしまうと思われます。
広告を中央に戻すためには、
<div align="center">
アドセンス広告のコード
</div>
このコードでアドセンス広告のコードを挟むと広告が中央に寄ります。
出来上がるのは、先ほどスマホのバナー広告のサイズで紹介したものです。
問題はPC・パソコンでの表示のされ方です。
見て分かるように、広告がとてもコンパクトです。
軽くモザイクをかけてあるので分かりにくいかもしれませんが、ブログタイトルよりも短い広告になってしまいます。
ユーザビリティを下げてしまう恐れはありませんが、せっかくのパソコンの画面を無駄遣いしてしまっています。
できるだけ横の長さがある広告を貼った方が、広告の単価も上がります。
そのためにどうするか？
先ほど書いた「広告をレスポンシブにする方法」を使います。
アドセンスの広告はポリシーなどが厳しいため、勝手にコードを書き換えたりなど難しいことはできません。
だから、Googleアドセンスで認められている広告の貼り付け方を利用します。
広告をレスポンシブにしサイズを固定する
ブログ自体をレスポンシブデザインに設定していても、広告を使い分ける方法を探していると、このようなサイトが見つかりました。
Googleのサイトのページです。アドセンスのヘルプのページです。
サイトに飛んでみてもらうのが一番分かりやすいです。
このサイトでどういうことを紹介しているのかというと、一つのコードをヘッダに挿入するだけで、サイトの幅に合った広告を貼り付けてくれるということです。
例えば、
- スマホでサイトを見ると320×100のサイズの広告
- タブレットで見ると468×60のサイズの広告
- パソコンで見ると728×90のサイズの広告
のように、サイトの幅に合った広告が自動で表示されます。
僕が探していたものでした。
はてなブログのレスポンシブデザインに設定していても、何の問題もありません。
注意書きにも書いてあるのですが、「AdSense広告コードの許可されている変更方法」となっています。
このやり方であれば「AdSeseプログラムポリシーに違反することはない」と書かれているため、安心して使うことができます。
レスポンシブ広告のコードの設置の注意点
このコードを使う際には、いくつか注意点などがあるため説明させていただきます。
まず、この広告コードを使うときはディスプレイ広告をレスポンシブのまま使ってください。
広告のサイズを固定してしまうと正常に動きません。
そして、広告の名前は「英字・数字・＿（アンダースコア）」の3種類しか使うことができません。最初の文字は必ず英字です。
ひらがなや漢字や「.（ドット）」などを広告の名前に入れてしまうと正常に広告が作動しません。
スマホやPCなどのサイトを見る端末によっての広告のサイズを固定することができますが、その固定するサイズも選択できます。
特にこだわりがなければそのままのサイズで問題ありません。
コードの書き換えは間違えずに行いましょう。
- サイト運営者ID 1か所
- 広告ユニットID 1か所
- 広告の名前 5か所
広告の名前を書き換える場所5か所を含め、全部で7カ所書き換える場所があるため全て自分のものに変更してください。
ブログのヘッダにコードを入れてから、広告の変更が適用されるまでに時間がかかることもあるため、その場合は少し待って見て下さい。
上手くいかない場合は、おそらくコードを間違えている可能性が高いため良く見直してみましょう。
はてなブログでも使うことができますので。
最後に、繰り返しになりますが
<div align="center">
レスポンシブ広告コード
</div>
今回作成したコードも同じように、このHTMLで挟むことで中央寄せができます。
まだ広告の配置については試行錯誤中
今回はタイトル下に広告を設置したため、この記事を投稿した時点での当ブログの広告は5つになりました。
しかし、まだこれで終わりではありません。
タイトル下に広告をつけるというのもまだ実験段階です。
サイドバーに広告を貼り付けた方が良いのか？
記事の中に貼る広告の数はいくつが丁度良いのか？
結果が出てみないと正しいかどうかは分かりません。
まだブログ自体のアクセスも多くはなく、小さな個人ブログのサイトでしかありません。
しかし、それを大きくするまでには長い時間があります。
アクセスが増えてもクリック数が増えないのであれば、クリックを増やす工夫はできます。
今できることを一つずつこなしていかなければ成長していくことはできません。
ブログについての知識を少しずつでも蓄えていきましょう
それでは、今日がかけがえのない日となりますように...