タービンインタラクティブが発信するターボブログ、Webマーケティングの最新情報をお届けします|タービン・インタラクティブ

Web担当者が知っておきたいスマホ最適化の方法

作成者: 坂根 正樹|2015年03月04日

前回の記事「スマホ対応していないサイトは4月から検索順位が下がる?」でお伝えした通り、Googleは、4月21日からWebサイトのスマホ最適化(モバイルフレンドリー)が、検索ランキングの要素になると公式に発表しました。

そこで今回は、スマホ最適化の具体的な手法についてご紹介します。それぞれの注意点は若干専門的ですが、Web制作会社に発注する場合に確認すべきポイントとしても有効です。ぜひ参考にしてください。

1. レスポンシブ・ウェブデザイン

スマホ最適化の方法の中で、Googleが最も推奨しているのが、レスポンシブ・ウェブデザインです。

レスポンシブ・ウェブデザインとは、サーバーからどのデバイスに対しても常に同じHTMLコードを配信し、CSSを使用して各デバイスでのページの表示を変える設定のことを言います。
スマートフォン、タブレットなど様々な解像度を持つデジタルデバイスが増え続ける昨今、従来のマルチデバイス対応アプローチである「デバイスごとのデザイン切り替え」では対応しきれないことが増えてきました。

1つのWebサイト(ワンソース)で全てのデバイスに対応できるレスポンシブ・ウェブデザインは大変理にかなった手法であると言えるのです。ちなみに当社サイトもレスポンシブ・ウェブデザインです。

<主な注意点>

レスポンシブ・ウェブデザインの場合、ページがすべてのデバイスに対応していることをブラウザに知らせる必要があります。 その際に、次のメタタグをドキュメントのヘッダーに追加します。

例)<meta name="viewport" content="width=device-width, initial-scale=1.0">

出典:Google Developers

2. スマホ専用コンテンツを作成

スマホ最適化のもう1つの方法が、デバイス毎にWebサイトを用意する方法です。PC用サイトとスマホ用サイトを用意する場合、ユーザが閲覧しているOSやブラウザ(ユーザーエージェント)を判別して、サーバーサイドプログラムで表示するHTMLを振り分けるという手法が一般的な方法です。

PCサイトのURLを「www.yourdomain.com」とした場合、モバイルサイトでは「www.yourdomain.com/m/」のようにディレクトリを切る、もしくは「www.m.yourdomain.com」のようにサブドメインを設定するのが一般的な方法です。

<主な注意点>

Googleのアルゴリズムがサイトの設定を認識できるように、次のアノテーションを使用する必要があります。

    1. PC 用ページに、対応するモバイル端末用 URLを指すための link rel="alternate" タグを追加します。これで、Googlebotがサイトのモバイル端末用ページの場所を検出できます。

      例)<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.yourdomain.com/page-1" >

    2. モバイル端末用ページに、対応するPC用URLを指すlink rel="canonical"タグを追加します。

      例)<link rel="canonical" href="http://www.yourdomain.com/page-1" >

    3. サイトマップには、次のようにPC用ページのrel="alternate"アノテーションを含めます。

      例) <?xml version="1.0" encoding="UTF-8"?>
      <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
      <url>
      <loc>http://www.yourdomain.com/page-1/</loc>
      <xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.yourdomain.com/page-1" />
      </url>
      </urlset>

出典:Google Developers

で、どちらの方法がいいの?

結論から言うと、私たちのおすすめは「1. レスポンシブWebデザイン」です。

レスポンシブのデメリットとしては、

  • 構築が複雑になるため、時間やコスト、運用時の負荷がかかる
  • 同じ画像ファイルを使用する場合は、サイトが重くなる
  • PCサイトとして閲覧したくてもできない

などが挙げられ、制作者の間でも議論が分かれていました。
メリット、デメリットを理解した上で、そのサイトに有効と考えられる方法を選ぶことが重要ですが、今回のGoogleアルゴリズムの変更によって、その判断は簡単になったと言えます。

  • 検索エンジンにわかりやすくSEOに有利
  • さまざまなデバイスでユーザーに使いやすい
  • ワンソースでコンテンツの管理がシンプル
  • ソーシャルでのシェアも単一URLでスムーズ

のメリットを最大限に活かすため、このタイミングで、コンテンツ全体の管理体系をしっかり設計できるパートナーに相談してみることをおすすめします。

まずはGoogle提供のモバイル フレンドリーテストで自社サイトをチェックしてみましょう!