ホーム WEBメディア戦略 WordPress カスタマイズ WordPressで、h2タグの上にAdSense広告を設置する方法

WordPressで、h2タグの上にAdSense広告を設置する方法

ライター

北野啓太郎

7月 13, 2018

近年Googleは、ウェブサイトの表示速度を評価対象にしています。ページが表示されるのに時間が掛かるサイト（ページ）は、Googleの検索結果の順位を下げられているのです。

ユーザーにとっても、サクサクと見られる方が良いですよね。

自分が運営するウェブサイトの表示速度はどうか？　これは、Google PageSpeed Insightsや、Google公式のChrome拡張機能「Lighthouse」を使うと計測することができます。

そこで、僕はあることに気づきました。

AdSenseは、PageSpeed Insightsの得点を下げる

ファーストビュー（スクロールせずに最初に表示される画面）にGoogle AdSenseの広告ユニットがあると、Google PageSpeed Insightsの得点が下がるのです。

どれくらい下がるのかというと、5〜10点くらい変わります。

逆にいうと、ファーストビューからGoogle AdSenseの広告ユニットを外せば、5〜10点上がるということです。

かつてGoogleは、「ファーストビューでバナーが見えている方が良い」と推奨していました。SEO（検索順位）に表示速度が影響しなかった時代は、できるだけページの上部に広告ユニットを配置するのが主流だったのです。

その手法は誤りではありませんが、表示速度の観点からは避けたいところなのです。

プラグインを使わずに、h2ダグの上にAdSenseを配置する手順

ここでは、WordPressを使ったウェブサイトでの手法をお伝えします。

h2タグの上にAdSense広告を配置するには、WordPressのプラグインを使う方法もあるのですが、期待通りの機能がなかったり、サイトの読み込みに負荷がかかったり、セキュリティのリスクもあり得るので、可能であればプラグインを使わない方法が良いでしょう。

その具体的な手順は、以下のとおりです。

AdSense コードを作成・カスタマイズする
WordPressの子テーマを作る
子テーマの function.php にコードを追記する

それでは、解説いたします。

h2タグの上に入れる用の「AdSenseコード」を準備

Google AdSenseのコードをそのまま設置するより、「広告サイズをレクタングルにする」「誤タップ（誤クリック）を防ぐ」というカスタマイズを施すことで、収益が上がると思われます。

バナーサイズが大きくなり、クリックの質が高まるからです。

その手順は以下の通りです。

【手順１】AdSense レスポンシブ広告のデフォルトタグ

Google AdSenseの管理画面へログイン
広告の設定 > 広告ユニット
テキスト広告とディスプレイ広告
自動サイズレスポンシブ

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 任意の広告ユニット名 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="xxxxxxxxx"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

これはGoogleが生成する、デフォルトのAdSenseコードです。

【手順２】AdSense レスポンシブ広告をレクタングルだけにする

広告コードの auto 部分を rectangle に変更する

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 任意の広告ユニット名 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="xxxxxxxxx"
data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

autoのままだと、長方形の小さなバナーが表示されることがあります。見た目にも貧相で、クリック率も低そうです。そこで、レクタングル（rectangle）に限定してやることで、レクタングル大（336×280）など、正方形に近いインパクトある広告だけを表示することができるのです。

【手順３】AdSense レスポンシブ広告を画面の横幅いっぱいにしない（左右に余白）

広告コードにパラメータを追加する
data-full-width-responsive=”false”

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 任意の広告ユニット名 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="xxxxxxxxx"
data-ad-format="rectangle"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Googleは、横幅いっぱいのバナーサイズの方が収益が上がると推奨していますが、スマートフォンで画面をスワイプでスクロールする際、左右に余白が無いと広告を誤タップしてしまう恐れがあります。

ユーザーに不便を掛けてしまわないよう、僕は左右に余白がある方が良いと考えています。

手順２・３のカスタマイズは、Googleが公式に認めているので問題ありません。

■参考にした記事
Google AdSense ヘルプ：レスポンシブ広告のタグパラメータの使用方法

【手順４】AdSense広告の上に「スポンサーリンク」の文字を小さく入れる

AdSenseコードの上に、1行追加する

<p style="color: #666; text-align: center;"><span style="font-size: 80%;">スポンサーリンク</span>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 任意の広告ユニット名 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="xxxxxxxxx"
data-ad-format="rectangle"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

本文中にある広告ユニットは、記事なのか、広告なのか、ユーザーにわかりづらくなります。そこで誤タップを防ぐため、広告の上に「スポンサーリンク」の文字を入れました。

フォントサイズは本文の80%で、色はグレーを指定しています。ここはお好みで変更可能です。

以上、h2タグの上に入れたい「AdSenseコード」が、まずは完成です。

■参考にした記事
DANDELIONGAMEBLOG：【グーグルアドセンス】スポンサーリンクのラベルを中央寄せで文字色を変更し小さくスタイリッシュにカスタマイズする方法（【追記2020年7月】記事の公開が終了しました）

WordPressの子テーマを準備する

h2タグの上にAdSenseタグを配置するには、「function.php」というファイルにコードを埋め込む必要があります。

function.phpは、非常に重要なファイルで、記述を間違えるとサイトが表示されなくなる恐れがあります。function.phpをカスタムする場合は、子テーマを作って追記するのが一般的です。

まずは、子テーマを作成しましう。

ただし、子テーマの作り方については、ここでは省略します。ご利用のテーマによっては、子テーマ用のテーマを配信している場合があるからです。

参考までに、本サイトは海外テーマ「Newspaper」を使用していますが、子テーマ（Child Theme）も同梱されています。有料・無料に関わらず何かテーマをご利用の方は、それぞれのテーマ配布サイトの「子テーマ」を確認してください。

また、デフォルトのテーマをカスタマイズしている方は、こちらの記事が参考になります。

■関連リンク
WordPress Cortex 日本語版：子テーマ

h2タグの上にAdSense広告ユニットを配置

いよいよ最後のステップ。
実際にh2タグの上に、AdSense広告ユニットを配置して行きます。

子テーマの「function.php」に、以下のコードを追記

function add_ad_before_h2_for_3times($the_content) {
//広告（AdSense）タグを記入
$ad = <<< EOF
//////////////////////////
//ここにアドセンスコードを挿入//
//////////////////////////
EOF;

  if ( is_single() ) {//投稿ページ
    $h2 = '/^<h2.*?>.+?</h2>$/im';//H2見出しのパターン
    if ( preg_match_all( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
      if ( $h2s[0] ) {//チェックは不要と思うけど一応
        if ( $h2s[0][0] ) {//1番目のH2見出し手前に広告を挿入
          $the_content  = str_replace($h2s[0][0], $ad.$h2s[0][0], $the_content);
        }
        if ( $h2s[0][1] ) {//2番目のH2見出し手前に広告を挿入
          $the_content  = str_replace($h2s[0][1], $ad.$h2s[0][1], $the_content);
        }
        if ( $h2s[0][2] ) {//3番目のH2見出し手前に広告を挿入
          $the_content  = str_replace($h2s[0][2], $ad.$h2s[0][2], $the_content);
        }
      }
    }
  }
  return $the_content;
}
add_filter('the_content','add_ad_before_h2_for_3times');

上記コードにある「ここにアドセンスコードを挿入」部分には、先に用意したAdSenseのカスタムコードをコピー＆ペーストしてください。「//」は不要です。

ただしこの場合、上から3つ目のh2タグの上までに、それぞれAdSenseコードが設置されてしまいます。これでは広告が多すぎる、と思う方にいるでしょう。その場合は、以下のようにコードを書き換えます。

■参考にした記事
本文記事1、2、3番目のH2見出し手前にアドセンスを挿入するWordPressカスタマイズ方法

最初のh2タグの上だけに、AdSenseバナーを配置

function add_ad_before_h2_for_3times($the_content) {
//広告（AdSense）タグを記入
$ad = <<< EOF
//////////////////////////
//ここにアドセンスコードを挿入//
//////////////////////////
EOF;

  if ( is_single() ) {//投稿ページ
    $h2 = '/^<h2.*?>.+?</h2>$/im';//H2見出しのパターン
    if ( preg_match_all( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
      if ( $h2s[0] ) {//チェックは不要と思うけど一応
        if ( $h2s[0][0] ) {//1番目のH2見出し手前に広告を挿入
          $the_content  = str_replace($h2s[0][0], $ad.$h2s[0][0], $the_content);
        }
//      if ( $h2s[0][1] ) {//2番目のH2見出し手前に広告を挿入
//        $the_content  = str_replace($h2s[0][1], $ad.$h2s[0][1], $the_content);
//      }
//      if ( $h2s[0][2] ) {//3番目のH2見出し手前に広告を挿入
//        $the_content  = str_replace($h2s[0][2], $ad.$h2s[0][2], $the_content);
//      }
      }
    }
  }
  return $the_content;
}
add_filter('the_content','add_ad_before_h2_for_3times');

「//」でコメントアウトすることで、2番目のh2タグ、3番目のh2タグには、AdSense広告ユニットを表示させないようにすることができます。コメントアウトさせずに消しても良いのですが、後から「やっぱり設置したい」と思ったときのために、コメントアウトにしておいた方が便利です。

これは、先の「寝ログ」さんの参考記事の、コメント欄の28番に書かれていたカスタマイズ方法です。

以上、作業はこれで完了です。
お疲れさまでした。

【余談】Google AdSenseの収益は増えた？　クリック率は上がった？

本サイトは、以下の位置にAdSense広告を配置しています。今回のカスタムでは、以下のように変更しました。

■改良前の配置（PC・モバイル共通）
・アイキャッチ画像の下
・記事最後

↓

■改良後の配置（PC）
・アイキャッチ画像の下
・一番最初のh2タグの上
・記事最後

■改良後の配置（モバイル）
・一番最初のh2タグの上
・記事最後

さて、その結果。

まだ実装して1週間程度なので、はっきりしたことは言えませんが、正直収益は変わっていません。最も収益を上げている広告ユニットが「記事最後」というのが理由かもしれませんが。

収益に関しては、引き続き見ていきたいと思います。

また、冒頭で書いた通りGoogle PageSpeed Insightsの得点は上がりました。これがSEOに効果があれば、PV数の増加へとつながりますので、こちらにも期待したいと思います。

Swingin’ Thinkin’「AdSense」関連記事

自動広告はイヤだ！　記事内の好きな場所にアドセンスを配置したい WordPressでAdSenseのショートコードを作って、記事内の好きな位置に配置する方法