Google AdSenseでサイトの収益化（スコアカード改善モバイルフレンドリー編）

2017/5/16

スポンサーリンク

モバイルフレンドリーの重要性

米IDCが2015年3月20日に公表した調査によると、

4年前まではPCが大半を占め、2010年時点で、PCの出荷台数比率は52.5％、スマートフォンは44.7％、タブレットは2.8％でした。

これが2014年に市場占有率は、PCが16.8％に低下。スマートフォンとタブレットはそれぞれ70.7％と12.5％に上昇しました。

今後もスマートフォンの比率が拡大し、2019年には77.7％に達すると予測、一方でPCとタブレットはそれぞれ11.6％と10.7％に低下すると見ています。

また、Googleはウェブマスター向け公式ブログで次のアナウンスをしています。

2015年4月21日からGoogle も、モバイル検索の順位決定時にその Web サイトが「モバイルフレンドリー」かどうかを重要な指標として導入を始めます。

なお、モバイルフレンドリーは、モバイル検索のランキングにのみ影響します。PCからのウェブ検索には影響しません。

市場の70％以上をしめるスマートフォンからのユーザーが増えれば（当サイトは８割がPC、２割がスマホです）、さらなる収益の向上に繋がり、Googleモバイル検索の表示順位を上げる重要性がここにあります。

一方で、モバイルユーザーは広告をクリックするよりも情報を見るだけのユーザーが多いとも言われていますが、スマホ対応サイトをモバイル検索結果で優遇する施策は、

  • モバイルフレンドリー化しなければ、SEO対策に関係なく順位が落ちる
  • モバイルフレンドリー化済みなら、PCと同じSEO対策で順位は変わらない

と言えます。

モバイルフレンドリー３つの実現方法

モバイルフレンドリーとは、ウェブサイトがスマホで、閲覧・利用しやすいように作られているかを指します。

モバイルフレンドリーは、個々のページを対象としています。サイト内のいくつかのページがモバイルフレンドリーでなくても、サイト全体がモバイルフレンドリーでないと判断されることはありません。

その実現方法には次の３つがあります。

  1. レスポンシブ ウェブ デザイン（meta viewport タグ）
  2. １つのURLでユーザー端末に応じてPC用とスマホ用のCSSを動的配信する（Vary HTTPヘッダー）
  3. PCとスマホで別々のURLにする（rel=”canonical”/ rel=”alternate”）

最初からモバイル端末を意識してサイトが作られていれば、１か２の方法が採用されていると思いますが、スマホが普及する以前から運用されているサイトは、後からスマホサイトを追加する３の方法で実現するのが現実的です。

PCとスマホで別々のURLで運用する方法

Googleのモバイル フレンドリー テストに合格していれば、そのサイト（ページ）はモバイルフレンドリーであると言うことができます。

PCサイトがそのままスマホに表示されているサイトは、以下の点でモバイルフレンドリーでないと判断されます。

  • ビューポートが設定されていないか、固定幅に設定されている
  • コンテンツのサイズが表示枠をはみ出している（横スクロールが必要）
  • フォントサイズが小さい（ピンチしないと読めない）
  • タップ要素（ボタンやリンク）同士が近すぎる

全ページをスマホ対応化するのが難しい場合、まずはアクセスの多い主要なページをスマホ対応化することで、モバイル検索の順位決定の影響範囲を少なくします。

以下、PCサイト用のページを、別 URL でスマホ用ページにする場合の方法について説明します。手順は、

  1. viewport の設定
  2. PCサイトとスマホサイトのURLの正規化
  3. リダイレクトの設定
  4. モバイルフレンドリー診断で確認した修正項目の改善

viewport の設定

スマホートフォンは PC 向けのサイトを表示するときには、「横幅 980px 向けにデザインされている」という前提で描画します。結果として、文字が小さくなります。

ページに viewport が指定されていない場合、パソコンの表示と同じように携帯端末でページがレンダリングされ、携帯端末の画面に合わせて縮小されます（写真左）。viewport を使用すると、すべての端末でページが適切にレンダリングされるよう設定できます（写真右）。

viewport の設定は以下のメタタグをドキュメントの先頭に記述します。

<meta name=viewport content="width=device-width, initial-scale=1">

PCサイトとスマホサイトのURLの正規化

スマートフォンサイトが、PCサイトのサブディレクトリ sp になっている場合を例に、

  • PCサイト：　http://example.com/
  • スマホサイト：　http://example.com/sp/

説明します。

PCサイト用ページとは別に、異なる URL でスマホ用ページを設ける時は、同じページが２つのページに分散して、検索エンジンの評価（検索順位）が落ちないよう、２つの URL の関係を、rel=”alternate” および rel=”canonical” で連携（URLの正規化）させます。

  • PC 用ページ（http://example.com/）に、

    対応するスマホ用 URL を指すための link rel=”alternate” タグを追加します。これで、Googlebot がサイトのスマホ用ページの場所を検出できます。

    <link rel="alternate" media="only screen and (max-width: 640px)" href="http://example.com/sp/">

  • スマホ用ページ（http://example.com/sp/）に、

    対応する PC 用 URL を指す link rel=”canonical” タグを追加します。

    <link rel="canonical" href="http://example.com/">

リダイレクトの設定

PCユーザーはPC用URLを見るように、スマホユーザーはスマホ用URLを見るように、ルート直下の .htaccess にリダイレクト設定を行います。

  • スマホから（USER_AGENT = iPhone|Android|iPod）、PCサイトへアクセスの時は（URLに sp を含まず）、スマホサイト（ sp ありのURL）にリダイレクト

  • PCから（USER_AGENT ≠ iPhone|Android|iPod）、スマホサイトへアクセスの時は（URLに sp を含む）、PCサイト（ sp なしのURL）にリダイレクト

する .htaccess の内容は以下のようになります。

# PC・スマートフォンの振り分け転送
RewriteEngine on

RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android|iPod)
RewriteRule ^(.*)$ sp/$1 [R]
RewriteBase /

RewriteCond %{REQUEST_URI} /sp/
RewriteCond %{HTTP_USER_AGENT} !(iPhone|Android|iPod)
RewriteRule ^sp/(.*)$ $1 [R]
RewriteBase /

※作成途中で例えば、 /sp/aaa.html と /sp/bbb/ フォルダにのみスマホ対応ページが存在する場合は、 RewriteCond %{REQUEST_URI} (aaa\.html|/bbb/) を４行目と５行目の間に追加します。
こうすることで、スマホからPCサイトの aaa.html または /bbb/ フォルダへアクセスがあった場合のみ、スマホサイトの /sp/aaa.html 、/sp/bbb/ フォルダにリダイレクトされ、それ以外（ccc.html、/ddd/フォルダなど）は、スマホからのアクセスでも PCサイトにリダイレクトされます。

モバイルフレンドリー診断で確認した修正項目の改善

これで、スマホサイトを別 URL で運用する準備ができましたので、エクスペリエンス診断で確認したエラー内容を、個別のページごとに解消します。

基本編、スピード診断編の改善結果

前回記事「基本編」「スピード診断編」で行った、

  • 基本編スピード診断：.htaccessによる「ブラウザのキャッシュの活用」
  • 基本編エクスペリエンス診断：メタタグによる「viewport の設定」
  • スピード診断編：レンダリングを妨げるリソースのインライン化、配置変更
  • スピード診断編：画像、JavaScript、CSSの圧縮

で、チューニング前後でスコアは、以下のように改善されました。

【基本編】

【スピード診断編】

基本編、スピード診断編の改善結果の詳細はこちらをご覧ください。

Google AdSenseでサイトの収益化（スコアカード改善基本編）
Google AdSenseスコアカードとは アドセンスの管理画面トップに「スコアカード」というものがあります。「収益の最適化」「サイ...
wp.kikuchisan.net
2017-05-16 12:27
Google AdSenseでサイトの収益化（スコアカード改善スピード診断編）
基本編の改善結果 前回記事「基本編」で行った、 スピード診断：.htaccessによる「ブラウザのキャッシュの活用」 エクスペ...
wp.kikuchisan.net
2017-05-16 12:25

「基本編」「スピード診断編」後の要修正項目は、

エクスペリエンス診断：修正が必要：１項目、修正を考慮：１項目

  1. コンテンツのサイズを表示域に合わせる（要修正）
  2. タップ ターゲットのサイズを適切に調整する（考慮）

となっています。

エクスペリエンス診断で確認したエラー内容を解消します

コンテンツのサイズを表示域に合わせる

ページを表示するのに横スクロールを必要とするページに対してこのエラーが表示されます。
多くは、画像やテーブルが原因なので、横サイズを表示域の幅に収まるよう調整します。

  • 画像データが表示域320px以内に収まるよう、画像変換ソフトを使い300px幅に縮小します。
  • テーブル幅をwidth=”300px”にし、それでもはみ出る場合は、縦１列にするなど、テーブルレイアウトを変更します。

タップ ターゲット（ボタンやリンク）のサイズを適切に調整する

ボタンやリンクなどのタップ ターゲット同士が近すぎると、誤タップが起こり易いのでこのエラーが表示されます。

  • 小さいボタンは、サイズ変更で十分大きくします。
  • リンクの間に改行を入れる、文字サイズを大きくするなど、十分なスペースを確保します。
  • テーブルに配置したリンクには、cellpaddingでセル内の余白を十分に確保します。

スコアカード改善の最終結果

「基本編」「スピード診断編」「モバイルフレンドリー編」で以下の改善を加えたことで、

  • .htaccessによる「ブラウザのキャッシュの活用」（基本編スピード診断）
  • メタタグによる「viewport の設定」（基本編エクスペリエンス診断）
  • レンダリングを妨げるリソースのインライン化、配置変更（スピード診断編）
  • 画像、JavaScript、CSSの圧縮（スピード診断編）
  • コンテンツのサイズを表示域に合わせる（モバイルフレンドリー編）
  • タップ ターゲットのサイズを適切に調整する（モバイルフレンドリー編）

各スコアは下記のように改善されました。

PageSpeed Insights

Adsenseスコアカード

「サイトの状況」「マルチスクリーン」とも、●ｘ３ → ●ｘ５にアップしました。


　　　⇓

Googleモバイルフレンドリー テスト

Googleのモバイル フレンドリー テストも合格です。モバイルフレンドリー テストに合格していれば、そのサイト（ページ）はモバイルフレンドリーであると言うことができます。

スポンサーリンク