はてなブログを使っていて、最近少し困ったのがレスポンシブデザインを利用した時の
Googleアドセンス広告表示制御です。
はてなブログとレスポンシブデザイン
レスポンシブデザインではPCやスマホ、タブレットなど様々なデバイスに対して同一のURL且つHTMLでそれぞれのデバイスに適した表示を行うデザインのことを言います。
はてなブログでは、レスポンシブデザインに対応したテーマであれば、ブログでレスポンシブデザインを採用することが出来ます。
実際にレスポンシブデザインを利用する場合は、はてなブログの管理画面ページのデザイン-スマホデザイン-詳細設定欄にあるレスポンシブデザインのチェックを入れて「変更を保存する」を押すことで反映されます。
逆に、レスポンシブデザインを利用せずに、パソコンとスマホとで別々のHTMLを適用するという古くからあるスタイルも利用することが出来ます。
レスポンシブデザインを利用していない場合は、ヘッダーや記事上、記事下、フッターなどの領域でパソコンとスマホとで異なるHTMLを記述出来ます。
はてなブログでレスポンシブデザインを使う理由
はてなブログでレスポンシブデザインを使う理由として考えられるのは、スマホ表示の際にカスタマイズしたデザインCSSが適用されないと考えるケースがあります。
はてなブログの管理画面では、デザインCSSを編集できる領域がありますが、これはパソコン画面向けのデザイン編集欄にしか用意されておらず、スマホのデザイン変更のところにはありません。
レスポンシブデザインを使わずにスマホのCSSを編集する方法
ただ、今回自分自身でレスポンシブデザインにしてみたりして試行錯誤している中で調べていると、有料となるはてなブログProを契約している人ならば、レスポンシブデザインを使わなくともスマホの表示デザインをカスタマイズすることが可能なようです。
tsukuruiroiro.hatenablog.com
因みにはてなブログProにしたからといって、管理画面のスマホデザイン編集画面にCSSの編集領域が登場するわけではありません。
上記記事では、はてなブログProだと編集可能となるタイトル下のHTML編集領域にはCSSを記述することが可能という事を利用したハックになっています。
レスポンシブデザインでアドセンス広告の表示をPCとスマホで切り替える
ここからが今回の本題です。
はてなブログでレスポンシブデザインを利用した際のGoogleアドセンス広告をパソコンでの表示と、スマホでの表示を切り替える方法について解説していきます。
なぜパソコンとスマホとでアドセンス広告を切り替えるかというと、アドセンスのポリシー違反にならないようにするためです。
例えば、PC側で記事上や記事下などにレクタングル広告を横に並列で並べるダブルレクタングルの配置を行っている場合にその危険があります。
参考アドセンスがポリシー変更でスマホのファーストビューにレクタングル中の広告掲載可能に!日本では？
ダブルレクタングルの配置をしている場合、そのまま何もせずにレスポンシブデザインを使うとスマホ画面ではアドセンス広告が縦に２つ並んだ状態となり、アドセンスのポリシー違反となってしまいます。
そこで、PCで見ている人にはダブルレクタングルで表示して、スマホで訪れた人には１つしかアドセンス広告が表示されないようにする必要があります。
CSSを追加してPCとスマホで表示を切り替える
WordPressならばPHPを使って条件分岐処理(if文)を書くことでPCの時はこの広告を、スマホ表示の時はこの広告を表示するという命令をすることが簡単に出来ます。
はてなブログのレスポンシブデザインで同様の事をする場合は、CSSを使うことで実現することが出来ます。
デザインCSSに下記記述を追加してください。
@media screen and (max-width: 680px) {
.none-mobile{
display: none !important;
}
}
@media screen and (min-width: 681px) {
.none-pc{
display: none !important;
}
}
これは画面のサイズが680ピクセルより大きいかどうかで表示デザインを切り替えるという内容の記述になっています。
CSSを編集して保存したら、次にアドセンスのコードを少し編集します。
Googleアドセンスのコードを編集
例えば、パソコンの画面だけに表示させたいアドセンス広告に対しては、アドセンスコード内のins class=””という箇所に元々adsbygoogleとなっているところに半角スペースを入れてnone-mobileを追加します。
ins class="adsbygoogle none-mobile" style="display: inline-block; width: 336px; height: 280px;"
逆に、スマホの画面だけに表示させたいアドセンス広告に対しては、アドセンスコード内のins class=””という箇所にnone-pcを追加します。
ins class="adsbygoogle none-pc" style="display: inline-block; width: 336px; height: 280px;"
これでPCでのアドセンス広告表示とスマホで閲覧された時のアドセンス広告の表示を切り替えることが出来ます。
SEO上の注意点とリスク
さて、ここまで紹介してきたCSSを使ったアドセンス広告表示の切り替え制御について実際に実践した後でSEO上のリスクがあることが分かりました。
それはCSS上で記述した下記部分に要因があります。
display: none
この記述の意味は、HTML上存在する内容を画面に表示させないという命令になるのですが、この記述を悪用して隠しテキストや隠しリンクなどでSEO効果を狙うスパマーがいるということです。
それに対してレスポンシブデザインテーマでは表示制御をする上で多用されている方法でもあります。
これまでWordPressを含めレスポンシブデザインを利用していて、ペナルティを受けたことはありませんが、Googleによる気になる発言もあります。
参考にした関連記事へのリンク
「display:none」はSEO効果を下げる／Google発言、長い論争に決着
display:none;とSEOについて | ねときゃす！
Google自体レスポンシブデザインを推奨していますし、今後行われる予定のモバイルファーストインデックスにおいてもレスポンシブデザインを使うことを推奨しています。
そういうことも含めてレスポンシブデザインで「display:none」を使ったからといって検索順位が下落する可能性は低いと思いますが、使う必要がないのであれば使わない方が余計な事を心配する必要がありません。
