Google 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%以上をしめるスマートフォンからのユーザーが増えれば(当サイトは8割がPC、2割がスマホです)、さらなる収益の向上に繋がり、Googleモバイル検索の表示順位を上げる重要性がここにあります。

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

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

と言えます。

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

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

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

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

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

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

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

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

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

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

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

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

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

viewport の設定

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

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

viewportの設定

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

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

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

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

説明します。

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

  • PC 用ページ(http://example.com/)に、

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

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

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

リダイレクトの設定

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/) を4行目と5行目の間に追加します。
こうすることで、スマホからPCサイトの aaa.html または /bbb/ フォルダへアクセスがあった場合のみ、スマホサイトの /sp/aaa.html 、/sp/bbb/ フォルダにリダイレクトされ、それ以外(ccc.html、/ddd/フォルダなど)は、スマホからのアクセスでも PCサイトにリダイレクトされます。

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

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

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

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

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

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

【基本編】
チューニング結果
【スピード診断編】
スピード診断のさらなる改善結果

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

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

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

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

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

となっています。

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

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

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

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

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

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

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

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

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

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

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

PageSpeed Insights

モバイルフレンドリー化結果

Adsenseスコアカード

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

AdSenseスコアカード
   ⇓
最終スコアカードの結果

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

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

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

スポンサーリンク
wp_レクタングル (大)
wp_レクタングル (大)
☆最後までお読みいただきましてありがとうございます。
☆この記事がお役に立ちましたらシェア・フォローしていただけると嬉しいです!

シェアする

フォローする