2012年06月8日

ライター：アユダンテ株式会社

SEO

※この記事は英語文書を翻訳したものです。
Building Smartphone-Optimized Websites – Webmasters — Google Developers

（訳者　2014/7/1追記：Googleのスマートフォンサイトの移行ガイドラインを元にしたスマホサイトの移行のポイントも合わせてご参考ください。）

Googleがサポートするスマートフォンに最適なサイトの構成は以下の三通りあります。

【Google推奨】レスポンシブウェブデザイン。
これは、すべてのデバイスに同じURLを用いて、各URLにアクセスするとすべてのデバイスに同じHTMLが送信され、CSSのみを用いて各デバイスでページをどのように表示するか決める方法です。
ユーザーエージェントによるデバイスごとの出し分け。
これは、すべてのデバイスに同じURLを用いますが、各URLにアクセスすると各デバイスごとに異なるHTMLとCSSが送信される方法です。この出し分けは、ユーザーエージェントでPCかモバイルかを見て判定します。
独立したURL。
これは、モバイルとデスクトップで異なるURLを使用します。

この記事では、各構成の実装方法を説明します。

レスポンシブウェブデザイン

レスポンシブウェブデザインは、すべてのデバイスに対して常に同じHTMLコードを送信し、CSSのmediaクエリを用いて画面の表示をデバイスに合わせる手法です。Googleのクローラーのユーザーエージェント(GooglebotとGooglebot-Mobileの両方)がHTML、CSS、JavaScriptおよび画像をクロールできるようになっていれば、Googleのアルゴリズムは自動的にこの構成を検出します。

以下はGoogle推奨の、スマートフォン用CSSメディアクエリの例です。

@media only screen and (max-width: 640px) {...}

上記にあるmax-width値の640pxは一例であり、640pxでなければならないわけではありません。
Googleのアルゴリズムはmax-width値を調べ、その値がスマートフォンの画面の解像度に近いと判断できるかどうかを見ます。モバイルのウェブサイトの変化に伴って、Googleはアルゴリズムを変更する可能性があります。

Googleは、標準でサポートされているすべてのパターンのmediaクエリをサポートします。
mediaクエリの書き方はそれぞれ利点や欠点があり、サイトやユーザーにとって最適な方法を選択してください。一般的な指針として、Google ChromeやApple Mobile Safariのような(訳者注、原文ママ)新しいブラウザで正しく表示されれば、Googleのアルゴリズムでは正しく認識されると考えられます。

レスポンシブウェブデザインについては、こちらのブログ記事(訳者注、翻訳機能が右側にあります)をご覧ください。

レスポンシブウェブデザインが推奨の理由

一つのコンテンツに対して一つのURLが割り当てられることにより、ユーザーはコンテンツを閲覧したり、共有したり、コンテンツにリンクしたりすることが容易になります。
またこれにより、Googleのアルゴリズムがコンテンツを正しく評価しやすくなります。
リダイレクトが不要なので、ユーザーはリダイレクト待ちのロード時間をなくすことができ、素早くデバイスに最適化された表示を見ることができます。
またユーザーエージェントを判別してのリダイレクトはエラーが発生しやすく、サイトのユーザーエクスペリエンスを低下させかねません。ユーザーエージェント判定の落とし穴の記事を参考にしてください。
レスポンシブウェブデザインはサイトのシステム負荷やGoogleのクローラーの負荷を軽減します。Googlebotクローラーは、レスポンシブウェブデザインのページなら一回クロールするだけで済みますが、そうでないページの場合には、異なるユーザーエージェントを用いて複数回クロールする必要があります。クロールの効率を上げることにより、間接的に、サイトのコンテンツをより多くインデックスしたり、キャッシュをより新しく保つことができる可能性があります。

クロール要件

Googlebotをrobots.txtやその他の手段でブロックせず、HTMLだけでなくCSS、JavaScriptや画像などもすべてクロールできるようにしてください。
これらの外部ファイルにすべてアクセスできることで、Googleのアルゴリズムがサイトのレスポンシブウェブデザインの構成を検出し、正しく処理できるようになります。

デバイスごとの出し分け

出し分けは、ブラウザのユーザーエージェントに基づいて、同一URLで異なるHTMLとCSSを返すようなサーバーの構成です。
この構成ではモバイルのデバイス用に別のHTMLコンテンツが用意されていることが一目で分からないため(＝モバイルコンテンツは隠されている)、サーバーが、Googleにモバイルコンテンツの存在を知らせ、Googlebot-Mobileがモバイルコンテンツをクロールできるよう指示を出すことをお勧めします。これは、Vary HTTPヘッダーで実装できます。

Vary HTTPヘッダー

Vary HTTPヘッダーには二つの重要な役割があります：

ISPやそれ以外の場所に設置されているキャッシュサーバーに対し、キャッシュを利用するかどうかの判定の際に、ユーザーエージェントを考慮すべきかどうかを知らせます。
Vary HTTPヘッダーがない場合、デスクトップ用のHTMLがキャッシュされているときにモバイルユーザーがアクセスすると、デスクトップ用のHTMLが間違って送信されてしまう可能性があります。その逆も起こりえます。
有効なVary HTTPヘッダーはモバイルに最適化されたコンテンツを返すURLをクロールすべきシグナルの一つなので、Googlebotがモバイル用のコンテンツを早く見つけることができるようになります。

Vary HTTPヘッダーは下記の例のように、リクエストに対するサーバーのレスポンスの一部です。

GET /page-1 HTTP/1.1
Host: www.example.com
(...残りのHTTPリクエストヘッダー...)

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(...残りのHTTPレスポンスヘッダー...)

レスポンスの中身はユーザーエージェントによって異なります。
もしVary HTTPヘッダーがすでに設定されていれば、”User-Agent”をリストに追加してください。

ユーザーエージェント判定の落とし穴の記事をチェックして、出し分けを本当にすべきか検討してください。

独立したURL

この構成では、各デスクトップ用URLに対し、対応するモバイル用URLが存在します。例えば、www.exmample.com のデスクトップ用サイトの各ページに対し、モバイルユーザー用のm.example.com 上に対応するURLを持たせるような感じです。
Googleは(訳者注、おそらく別ドメインか同一ドメインかに関係なく)特定のURLフォーマットを好むわけではなく、どちらのURLもGooglebotとGooglebot-Mobileの両方でアクセスできるようにされている必要があるだけです。

デスクトップとモバイルのURLでの設定

Googleがより確実に独立URLの構成を認識するために、下記の設定をお勧めします。

デスクトップのページで、rel="alternate"タグで対応するモバイルのURLにリンクしてください。これによりGooglebotがモバイルページのURLを知ることができます。
モバイルのページで、rel="canonical"タグで対応するデスクトップのURLにリンクしてください。

Googleは、具体的な設定方法として、各ページのHTMLまたはGoogleサイトマップの二つの方法をサポートしています。
例として、デスクトップのURLが http://example.com/page-1 で、対応するモバイルのURLが http://m.example.com/page-1 の場合を考えてみます。この例における設定は以下のようになります。

各ページのHTMLでの設定

デスクトップのページでの設定：

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

モバイルのページでの設定：

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

モバイルのページ内に設置する、デスクトップのページを指すrel="canonical"タグは必須となります。

サイトマップでの設定

デスクトップサイトのサイトマップで、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.example.com/page-1/</loc>
<xhtml:link
    rel="alternate"
    media="only screen and (max-width: 640px)"
    href="http://m.example.com/page-1" />
</url>
</urlset>

サイトマップを使用する場合でも、モバイルのページ内には、やはりrel=”canonical”タグを設置する必要があります。

独立したURL設定の詳細

デスクトップ用ページのタグに注目してください。

rel="alternate"属性は、デスクトップ用ページに対し、代替のURLが存在することを示すのに使われます。
メディア属性の値("only screen and (max-width: 640px)")は、CSSのmediaクエリ文字列となっており、代替のURLが対応しているmediaの属性を示しています。この場合では、一般的なスマートフォンを対象としたmediaクエリを使用しています。
href属性は代替URLを指定します。ここでは m.example.com 上のページを指定します。

この、デスクトップとモバイル両方で双方向に設定する方法により、Googlebotがサイトのコンテンツを発見しやすくなり、Googleのアルゴリズムがデスクトップとモバイルのページの関連性を理解し、正しく処理できるようになります。同じコンテンツをデバイスの種類によって異なるURLで出し分ける場合、この設定をすれば、Googleのアルゴリズムは、デスクトップとモバイルのURLが同一のコンテンツを持っており。二つの別々のコンテンツではなく一つのまとまりとして認識することができます。
この設定がされておらずデスクトップURLとモバイルURLが別々のコンテンツとして認識されてしまうと、両方のURLがデスクトップのGoogle検索結果に表示されてしまうだけでなく、順位も本来より低くなる可能性があります。