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

• 開設までの手順
  1. Google AdSenseでサイトの収益化（申請方法と一次審査まで）
  2. Google AdSenseでサイトの収益化（広告ユニット作成から二次審査まで）
  3. Google AdSenseでサイトの収益化（支払い手続き編）
• 活用ノウハウ
  1. Google AdSenseでサイトの収益化（ポリシー違反編）おススメ
  2. Google AdSenseでサイトの収益化（広告コードの不正利用防止編）
  3. Google AdSenseでサイトの収益化（広告最適化ノウハウ編）みんな読んでます
  4. Google AdSenseでサイトの収益化（Analyticsアクセス分析編）
  5. Google AdSenseでサイトの収益化（カスタムチャネル活用編）
• スコアカード改善
  1. Google AdSenseでサイトの収益化（スコアカード改善基本編）
  2. Google AdSenseでサイトの収益化（スコアカード改善スピード診断編）
  3. Google AdSenseでサイトの収益化（スコアカード改善モバイルフレンドリー編）
• 使い方と収益向上策
  1. Google AdSenseの「関連コンテンツユニット」の使い方と収益向上策みんな読んでます
  2. Google AdSenseの広告「ページ単位の広告」の設置と導入効果
  3. Adsense レスポンシブ広告を収益性の高いレクタングルで表示する方法おススメ

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

米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 の設定は以下のメタタグをドキュメントの先頭に記述します。

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/">

  1	<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/">

  1	<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 の内容は以下のようになります。

※作成途中で例えば、 /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の圧縮

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

【基本編】

【スピード診断編】

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

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

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

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

となっています。

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

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

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

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

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

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

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

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

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

• .htaccessによる「ブラウザのキャッシュの活用」（基本編スピード診断）
• メタタグによる「viewport の設定」（基本編エクスペリエンス診断）

• レンダリングを妨げるリソースのインライン化、配置変更（スピード診断編）
• 画像、JavaScript、CSSの圧縮（スピード診断編）

• コンテンツのサイズを表示域に合わせる（モバイルフレンドリー編）
• タップ ターゲットのサイズを適切に調整する（モバイルフレンドリー編）

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

PageSpeed Insights

Adsenseスコアカード

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

　　　⇓

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

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