ジョー・ヒタギの止リ木 | 「ものづくり」や「ものなおし」をするブログ

色々なものを作ったり直したりするブログです。主な話題は日用品・電子機器・エアガンなど。

ジョー・ヒタギ の 止リ木

【Google AdSense】はてなブログで自動広告を消して手動で広告を設置する&レスポンシブの設定

苦労の末にGoogle AdSenseの審査に合格したのだが、いざ自動広告を使ってみると非常に見た目が悪い。

そこで、自動広告を止めて手動で広告を設置した。以下、その手順をご紹介する。

▼Google AdSenseの審査に合格した体験記はこちら▼

【2019年11月】はてなブログ無料版でGoogle AdSenseの「サイトの停止または利用不可」を乗り越えて審査に合格した方法

自動広告の設置の仕方

アドセンスが発行したコードを、はてなブログの「設定」→「詳細設定」でhead部分に貼り付ける。基本的にこの操作は審査の段階ですでに完了しているだろうから、改めて行う必要はない。

注意点として、head部分に広告コード以外のコードが書かれていると広告がうまく配信されない可能性がある。私の場合は、head部分にFont Awesomeのコードを入れたら広告のプレビューが表示されなくなった。これは審査時に「サイトの停止または利用不可」と言われて不合格になるのと同じ現象で、グーグル側からはコードが見つからないのではないだろうか。

Font Awesomeのコードは「デザイン設定」→「ヘッダ」に移植しておいた。

コードを設置しただけでは広告は配信されず、アドセンスの「編集」から自動広告をオンにする必要がある。

f:id:Jo-Bitaki:20191129001811p:plain

オンにすると「広告の配信開始までには最長で1時間かかります」といった通知が出るが、私の場合は2時間以上かかった。人によっては1日かかることもあるらしい。

自動広告の問題点

自動広告が配信され始め、当ブログの上部に表示された広告がこちら。

f:id:Jo-Bitaki:20191129001806p:plain

少し広告の主張が強すぎではないだろうか。まるでヘッダー画像と張り合っているかのような大きさである。さらに、この位置ではメニューを見ようとしてくれた人が間違って広告をクリックしてしまうおそれもある。

これ以外にもリンク先と、リンク先についての説明文の間に表示された広告もあった。これでは広告がコンテンツの一部と誤認される可能性がある。

上のような配置はアドセンスのプログラムポリシーに違反する恐れがある。ポリシーの「広告の配置」には以下の記述がある。

Google 広告、検索ボックス、検索結果については、次のことが禁止されています。

(中略)

  • ボタンなどのすぐ近くまたは直下など、アプリや広告に対する一般的な操作の妨げになるような位置に広告を配置すること。

また、「クリックや表示を促す(リワード広告枠以外)」にも次の記述がある。

AdSense をユーザーと広告主の皆様に快適にお使いいただくため、AdSense プログラムに参加するサイト運営者様には次の行為が禁止されています。

(中略)

  • ページの他のコンテンツと見分けがつかないような広告のデザインやレイアウトを使用すること。

出典:AdSense プログラム ポリシー - AdSense ヘルプ

自動広告に任せると、「自分ならこのサイトには二度と来たくないな」と思うような広告だらけのレイアウトになってしまった。

自動広告が止められない

自動広告を消すには、設置の時とは逆にアドセンスの「編集」から自動広告をオフにする。念のため、はてなブログのheadに追加した広告コードも削除した。

実際に自動広告が消え始めたのは1時間近く経ってからである。

しかし、一番消えてほしいページ上部の広告は1日待っても残ったままだった。

そこでもう一度自動広告をオンにし、アドセンスの設定でページ上部の広告エリアを削除して設定を上書きした。すると30分ほどで広告が消えたため、改めて自動広告をオフにした。

※2019年11月30日 追記

消えははずの巨大広告がなぜか復活している。原因は不明。

※2019年12月2日 追記

ようやく自動広告が表示されなくなった。

削除するにはプレビュー画面でゴミ箱マークをクリックする。

f:id:Jo-Bitaki:20191129200838p:plain

削除時にはフィードバック送信用のウィンドウが表示されるが、これをきちんと送らないと広告の削除が完了しないので注意。削除した広告エリアは「広告のフォーマット」から復元可能である。

手動広告の設置

自動広告ではサイトの見栄えが悪くなる。そこで、以下のサイトを参考に手動で広告を設置することにした。

www.tumuji2.com

アドセンスのメニューから「広告」を開き、「広告ユニットごと」のタブを開くと手動で設置する広告を作成できる。

f:id:Jo-Bitaki:20191129001801p:plain

なお、「手動」なのは設置だけで表示される広告内容は自動で切り替わる。今は亡きAmazonアソシエイトのライブリンクのようなものだろうか。

また、アドセンスの広告は前後にあらかじめ余白が設定されるため、自分で改行を入れたりする必要はない。

広告の種類は次の3種類である。

f:id:Jo-Bitaki:20191129001757p:plain

ディスプレイ広告

いわゆるバナー広告のようなもの。正方形の広告が2つ並んだもの(実際の配信時には1つになることもある)・横長・縦長の3種類から選べる。

f:id:Jo-Bitaki:20191129001824p:plain

私はスクエアタイプを、邪魔になりにくそうな記事の下と目次の下に設置することにした。

なお、アドセンスのレポートは広告ユニットごとに表示される。そのため、同じタイプの広告であっても、設置場所ごとに広告ユニットを作成したほうが成果の確認がしやすい。上の私の例で言えば、「記事下用ディスプレイ広告」と「目次下用ディスプレイ広告」の2つを作成するということである。

インフィード広告

ニュースサイトなどの記事一覧のなかにさりげなく紛れ込んでいるタイプの広告である。記事と見間違えやすく閲覧の邪魔なので個人的には好きではない。

f:id:Jo-Bitaki:20191129001817p:plain

昔はもっと紛らわしかったが、一時期問題になってから改善されたのだろうか。

当ブログに設置するつもりはないので今回はノータッチ。

記事内広告

記事本文の中に挿入するための広告らしい。正直、ディスプレイ広告との違いが分からない。 

f:id:Jo-Bitaki:20191129001753p:plain

物は試しということで、段落の最後に設置することにした。

おわりに

Google AdSenseの審査になかなか合格できなかったり、合格しても広告の表示・非表示の設定がちっとも反映されなかったりと、はてなブログとアドセンスはつくづく相性が悪いようである。

追記1:手動広告を自動で設置する方法

以下のサイトに、アドセンスの手動広告を記事内の定位置に自動で挿入するコードが紹介されている。

uxlayman.hatenablog.com

awacafe-tokushima.work

atumetaize.com

これらを使うと「すべての記事の最初の見出しの上に広告を表示する」といったことが自動化できるとのこと。

特に一番上のサイトのツールは簡単かつ多機能なのでぜひご覧いただきたい。
そのツールでは「あるカテゴリーに属する記事には広告を載せない」という設定も可能である。
この機能を使う場合、広告禁止用カテゴリーを非表示にすることをおすすめする。やり方はこちらのサイトを参考にしていただきたい。

clrmemory.com


既に手動で広告コードを貼ってしまったが自動設置に切り替えたいという場合、一度すべての広告コードを削除したほうが良いだろう。
詳細な方法については下の記事をご覧いただきたい。

【はてなブログ】手動で設置したアドセンス広告を一括で削除(置換)する方法

追記2:詳細なレスポンシブ設定をする

「スマホに表示する広告はPCよりも小さくしたい」という場合がある。
アドセンスの広告サイズ設定には「レスポンシブ」という項目があるが、自分で具体的な大きさを設定することはできない。せいぜい正方形か横長かといった広告の形を選べるだけである。

ところが、公式ヘルプの方法で広告コードを改変すれば詳細な設定ができる。

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

上のサイトを参考に、記事タイトルの下に表示するための広告コードを作ってみた。

<style>
.responsive_ad { width: 468px; height: 60px; }
@media(min-width: 800px) { .responsive_ad { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 広告ユニット名 -->
<ins class="adsbygoogle responsive_ad"
     style="display:inline-block"
     data-ad-client="xxx"
     data-ad-slot="xxx">
</ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

デフォルトでは468×60のバナー型広告を表示する(2行目)。しかし、画面サイズが800px以上の場合は728×90の一回り大きな広告が表示される(3行目)。
※追記:このコードでは広告の横幅が画面からはみ出すことが判明したため、2か所あるwidthの値を100%に修正していただきたい。

9行目のdata-ad-clientと10行目のdata-ad-slotには表示したい広告ユニットの値を設定する。その広告ユニットの「広告サイズ」には「レスポンシブ」が指定されている必要がある点に注意。

また、広告サイズには細かい規定があるのでガイドラインも併せて確認していただきたい。以下の引用部は2020年1月24日時点での情報である。

  • 450 ピクセルを超えてよいのは高さか幅のどちらか一方のみ
  • 最小幅は 120 ピクセル
  • 最小高さは 50 ピクセル
  • 高さと幅のどちらも 1,200 ピクセルまで

出典:固定サイズのディスプレイ広告ユニットのガイドライン - AdSense ヘルプ