• SEO塾ブログnew

    モバイルファースト / マテリアルデザイン / JSON-LD
    WebP/ 4K DPR3 レスポンシブイメージ
    gridレイアウト / flexboxコンテンツ / レガシーWeb終焉!
    モダンWebの証明! comからjpへ

  • SEO塾ブログnew

AdSense横2つダブルレクタングル WordPressスマホ振り分け 記事内でもショートコードで挿入

AdSense レクタングル大336x280 2つ横並びとスマホ振り分け
WordPress子テーマのfunctions.phpにis_mobile関数でスマホ振り分け。スマホはレクタングル中300x250のみ。パソコンのレスポンシブ広告コードではautoをrectangleに変更して横長を阻止、max-width:336pxでAdSenseポリシー違反を回避。振り分け用phpファイルをショートコードで読み込めば、記事内で広告のスマホ振り分けができる。

AdSenseはレクタングル大336×280で収益に

AdSenseは、広告サイズの大小(広告の面積?)で、クリック率も高くなったり低くなったりする。
日本のAdSenseの広告サイズのベストは、レクタングル大336×280と言われている。

きっかけは、レクタングル大をコンテンツ末で2つ表示させたいとの相談があり、このサイトで実験検証してみたこと。

WordPressでは意外にも簡単にスマホ振り分けができる。
パソコン・タブレットとスマートフォンで、表示されるAdSense(大きさや数)を変えることが可能。

同じくWordPressでは、プラグインによって比較的自由に希望する箇所にAdSenseを挿入することができるが、ショートコードを自作すると複数の広告ユニットを自在に配置して効果測定(A/Bテスト)にも活用できる。

スマホではレクタングル大2つはAdSenseポリシー違反

そのままレクタングル大の2個並びを決行すると、スマホでは明らかにAdSenseポリシー違反となる。
そもそもスマホでは、レクタングルの大や中は使えるのだろうか?

スマホ振り分けができるなら、パソコンとは違う広告を表示させることも可能である。
というか、AdSenseの収益化のためにはやるべきことでもある。

逆に、面倒臭いので、レスポンシブ広告コード一択なら、AdSenseの収益はどうなるか?
レスポンシブ広告コードなら、スマホではポリシー違反とはならないような安全策なのか?

なお、AdSenseが貼れる個数は、1ページに3つまでというのは、過去の常識と分かったことは収穫だった。

ダブルレクタングルはスマホでは画面を占領するのでAdSenseポリシー違反

AdSenseは、とにかくレクタングルがもっとも収益につながると、あちらこちらで検証を踏まえて語られている。

レクタングル大は横336px縦280pxであり、スマホの縦画面ではAdSenseは横2つとはならず縦2つになる(コーディングにもよるが)。

縦280×2=560で、ほとんどのスマホでは横でも縦でも、画面の上から下までAdSenseが占領することとなって、ポリシー違反である。

では、レクタングル大1つはどうだろうか?
あるいは、スマホ画面のレクタングル中300×250が1つは、ポリシー違反を回避できるだろうか?

モバイル テキスト広告とディスプレイ広告

とにかくGoogleのガイドラインに従わなければならない。
(Googleの言うとおりにしたからといって、儲かる保証はない。検索のほうも上位表示できるわけでもない。)

スマホで使える広告サイズは限られている。

  • 300×250:レクタングル(中)
    利用する広告主様が比較的多い広告枠
    テキスト コンテンツの中や、記事の末尾に組み込むと効果的
  • 320×100:モバイルバナー(大)
  • 320×50:モバイル ビッグバナー
  • 250×250:スクエア
    このサイズのディスプレイ広告は一般にやや供給が少なく、掲載結果があまり伸びないケースもあり
  • 200×200:スクエア(小)

↑上記ページをよく読んでみると、収益化を含めて使えるのは「レクタングル中300×250」だけになりそうだ。

WordPressのfunctions.phpとCSSでスマホの振り分け

このブログで今さら語らなくても、情報は十分に行き渡っていると予想されるが、ほとんど書かれていないレアケースやトラブルもあって改善に時間を費やしたので、業務としての記録を残すためにまとめておく。

WordPressのwp_is_mobileとis_mobileの関数

もともとのWordPressの関数で「wp_is_mobile」がある。
これは、スマホとタブレットを、パソコンから振り分けるものである。

これに対して、あえて「is_mobile」という関数をつくって、スマホを、タブレット・パソコンから振り分けようとするわけである。
タブレットは、横画面はパソコンと同じでも問題ない。縦画面は少し狭くなってiPhoneの6S Plusや7 Plusと横幅はほぼ同じとなるが、縦が長いので気にしなくても済む。

とにかく、タブレットはパソコンと同じでいいから、スマホだけを振り分けたいのである。

WordPressの子テーマ推奨で、functions.phpに書き加える。
(検索すれば、どこのページでもほぼ同じソースが記載されている)

// スマートフォンを判別
function is_mobile(){
    $useragents = array(
        'iPhone', // iPhone
        'iPod', // iPod touch
        'Android.*Mobile', // 1.5+ Android *** Only mobile
        'Windows.*Phone', // *** Windows Phone
        'dream', // Pre 1.5 Android
        'CUPCAKE', // 1.5+ Android
        'blackberry9500', // Storm
        'blackberry9530', // Storm
        'blackberry9520', // Storm v2
        'blackberry9550', // Storm v2
        'blackberry9800', // Torch
        'webOS', // Palm Pre Experimental
        'incognito', // Other iPhone browser
        'webmate' // Other iPhone browser
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

テンプレート(テーマ)のほうでは、

<?php if ( is_mobile() ) : ?>
	スマホ用のAdSenseのコード:レクタングル中(300x250)が1つ
<?php else: ?>
	パソコン用のAdSenseのコード:レクタングル大(336x280)が2つ
<?php endif; ?>

なお、AdSenseのコードは別にphpファイルにしてショートコードで読み込むようにすると、さらに利便性が高くなる。

スマホ用では、収益追求とポリシー違反回避で、レクタングル中300×250を1つにするしかない。

Cache系プラグインではモバイル向けキャッシュを設定しない

はまったのは、最初はスマホの振り分けができなかったことである。
パソコンでもタブレットでも、スマホでも、同じ広告が表示されていた。

いろいろ情報を探してみると、WordPressではCache系プラグインで、モバイル向けキャッシュが有効にならないようにしなければならない。

WP Fastest Cacheを使っているのだが、モバイルでキャッシュなしにしてサイト表示のスピードが遅くなっても、しかたない。

WP Fastest Cacheで、モバイル向けにキャッシュしない設定に

これで無事、スマホ振り分けができるようになった。

AdSenseのレクタングル(大)336×280を2つ横並びに

レクタングル大336×280の2つは、1つずつをdivでマークアップしてclassをつけておく。
さらに、この2つをdivで囲む。

<div class="ad2para">
    <div class="adLeft">
    	左側のAdSenseコード:レクタングル大(336x280)
    </div>
    <div class="adRight">
    	右側のAdSenseコード:レクタングル大(336x280)
    </div>
</div>

CSSは、サイトによって、テーマによって、ピンポイントでは違ってくるが、大まかには

.ad2para { marginやpaddingなど }
.ad2para:after { content:""; display:block; clear:both; }
.adLeft, .adRight{ float:left; margin-left:16px;}

CSSをうまく設定すれば、タブレット(iPad)縦画面でもレクタングル(大)336×280が2つ横に並ぶ。
もしくは、縦に2つ並ぶが、画面が広いのでAdSenseが覆い尽くすことはない。

スマホ振り分けでは、1つしか表示されないので、問題なし。

プラグインなし、ショートコードで記事内にAdSenseを挿入

記事内の自分で好きなところにAdSenseを貼りたい。
もっとも単純なやり方は、直接、AdSenseコードを貼ることである。
また、仮にプラグインの助けを借りたとしても、スマホ振り分けは別の作業を必要とする。

ところで、ifによるis_mobile関数を使ってスマホ振り分けまでは達成できている。

記事の上と下に挿入されるように、テンプレート(テーマ)をカスタマイズしているが、記事内で同じことをやれば、希望の場所にパソコン・タブレットならレクタングル大、スマホならレクタングル中を挿入できる。

まず、記事内でのAdSense、スマホ振り分けファイルを用意する。

<?php if ( is_mobile() ) : ?>
    <div class="adsMiddleSp">
    	スマホ用:レクタングル中(300x250)
    </div>
<?php else: ?>
    <div class="adsMiddlePc">
    	パソコン用:レクタングル大(336x280)
    </div>
<?php endif; ?>

ファイル名が「adsmiddleif」 であったら、記事内に書くショートコードは、次のようになる。

[myphp file='adsmiddleif']

あとはCSSで、adsMiddleSpやadsMiddlePcを設定するだけである。
(このセクション、見出しの直上に実験的に置いてみた)

ここまでくると、パソコンとスマホで広告そのものの表示・非表示なども自在である。
それどころか、AdSenseだけでなく他の広告や、部分的なコンテンツやナビゲーションも、パソコンとスマホで振り分けることさえできるようになる。

ショートコードなら記事の上中下で挿入場所を選ぶことも

テンプレート(テーマ)ファイル以外で、AdSenseの貼る位置を好きに決めることができるようになったので、
AdSenseの達人たちがよくやっている手法、いわゆる「リード文」の直後に、簡単に最初の広告を貼ることもできる。

AdSense ManagerとTable of Contents Plusの組み合わせでは、AdSenseが最初の見出しタグのすぐ上に表示され、その上に目次が現れる。
これを逆にしたいし、できればSEO目的としてはリード文にも見出しをつけておきたい。
よって、それをかなえるには「目次→AdSense」のショートコードしかない。

もちろん、スマホはレクタングル中、パソコンはレクタングル大と、振り分けも。

レスポンシブ広告コードはスマホでレクタングル大ならポリシー違反
横長(horizontal)なら収益を損なう

テンプレートなどでレスポンシブ対応で、AdSenseもレスポンシブ広告コードを貼っておけば安心と思いたくなる。

最初は、上部、下部、サイドバーに1つずつAdSenseを貼ってみたが、サイトを見るとかなり気になるところがあり、この記事を投稿する前にAdSense表示箇所の修正に時間を費やした。

上記のAdSenseヘルプのページには、おもしろいことが書いてある。

一般的な形状を指定する場合

デフォルトでは、レスポンシブ広告コードの data-ad-format タグには "auto" という値が設定され、これにより、レスポンシブ広告ユニットでサイズの自動調整が有効になります。ただし、data-ad-format の値を "rectangle"(レクタングル)、"vertical"(縦長)、"horizontal"(横長)、またはこれらをカンマで区切って組み合わせた値("rectangle, horizontal" など)に変更すると、レスポンシブ広告ユニットで一般的な形状を設定できます。

これほど面倒臭いのであれば、レスポンシブ広告コードも使わず、スマホ振り分けもせず、レクタングル300×250の一択が非常に楽であることは言うまでもない。

スマホではレクタングル300×250

スマホ振り分けができたなら、

まずページ下部で、パソコンとタブレット横では、レクタングル大336×280が2つ横並び。タブレット縦では場合によっては縦並び。
スマホでは、レクタングル300×2501つ。

すると、ページ上部でも、パソコンとタブレット横では、レクタングル大336×280が1つ。
スマホでは、レクタングル300×2501つ。

さらに、記事中でも同様。

ということもできるようになる。

パソコンとタブレットではレクタングル大336×280
レスポンシブautoをrectangleに変更

AdSenseのレスポンシブ広告コード、data-ad-formatはデフォルトのautoを、rectangle(レクタングル)、vertical(縦長)、horizontal(横長)に変更することができる(ポリシー違反とはならない)。
また、カンマ(,)区切りで複数組み合わせもできる(具体的にどういう表示になるかは、情報がほとんどないが…)。

data-ad-format="auto"
 ↓
data-ad-format="rectangle"
data-ad-format="vertical"
data-ad-format="horizontal"

レスポンシブ広告コードは、横長で表示されることが多い。
最初は、Googleが自動判定してそうしていると堪え忍んでいたが、データとしては収益化というかクリック率が非常によろしくない。

そこで、デフォルトautoを、「rectangle」に変更してみたところ、おそろしいほどバカでかい広告が表示されて、ビルボードが出てきた!と一瞬喜んだものの、次にはポリシー違反の懸念がこみあげてきた。

その「ビルボードもどき」を表示させているサイトも多く見かけるが、まだ広告が表示されているということは、Googleもスルーしている可能性もある。

ともかくポリシー違反の疑惑をもたれないためには、AdSenseコードは、かならずdivで囲んでclass(たとえばadResp)をつけること。

<div class="adResp">
AdSenseのコード </div>

最高幅が、レクタングル大336×280の幅を超えないように設定をしておけば、ポリシー違反のリスクを回避できる。

.adResp { max-width:336px; }

結局、パソコン用のAdSenseは、レスポンシブ広告コードのみにして、autoをrectangleに変え、CSSでmax-width:336pxを設定すれば、運営も楽になる。

スマホ用でもレスポンシブ広告コードのみ、max-width:300pxで対応できるが、CSS依存というのはリスクもありそうだ。

サイドバーのウィジェットのレスポンシブ広告コード

サイドバー、ウィジェットに設定したAdSenseレスポンシブ広告コードは、パソコンとタブレット横画面では、縦長に表示される。

タブレット縦画面からは、小さくなり、スマホではテーマ次第で、縦横の画面で変化する。

つまり、ウィジェットに仕込んだレスポンシブ広告コードは、縦長になったり、レクタングルになったり、まったくレスポンシブという名に恥じないおもしろい表示のされ方になり、ポリシー違反を心配することはない。

むしろ、これだけかたちが変わると、データも取れない。
そもそも、サイドバーといっても、デバイスによって、テーマによって、設定によって、表示される位置が一定しないので、参考にしようがない。

WordPressの場合、テーマによっても処理が違ってくるが、スマホの場合はサイドバー仕込みのAdSenseは表示させないほうがいいだろう。

AdSenseのポリシーのベースはAdWordsの広告主の利益

Googleは、世界指折りの時価総額をほこる大企業である。
Microsoftを抜きさり、Appleに肉迫している。

そのGoogleの株価の根拠は、企業収益の大部分であるAdWordsの広告主の出稿料である。
もちろん、AdSenseの報酬も、AdWordsの広告主からのものである。

広告主の無駄な出費は抑えたい、いや排除したい。
それが、AdSenseポリシーのベースである。

クリックされやすい広告の位置や大きさなど、自己利益オンリーにならずに、Googleのように広告主の費用対効果を射程に入れるべきだろう。

このことを、忘れないようにしたい。

WordPress カスタマイズなら

好評発売中

インスタや今風のECサイトのカード型フィードが、あっという間にできあがり
カテゴリーやタグの関連コンテンツも、お茶の子さいさい
テーマに頼らず、プラグインを使わず、スイスイとWordPressカスタマイズ

«
»