スマートフォン向けサイトのSEOはURLとHTMLの配信方式で設定を分ける

スマートフォン向けサイトのSEO設定は、画面の見た目ではなく、URLとHTMLの配信方式で決まります。同じURLへ同じHTMLを返すレスポンシブWebデザイン、同じURLへ端末別のHTMLを返すDynamic Serving、パソコン用とスマートフォン用でURLを分ける方式の三つです。

Googleのスマートフォン向けサイト構成の説明は三方式をサポートし、レスポンシブWebデザインを推奨しています。ただし、URLが同じという理由だけでは、レスポンシブWebデザインと判断できません。新しく作るサイトは管理するURLと端末判定を増やさない構成から検討し、既存サイトは実際の配信方式を確認してから必要な設定を選びます。

最初にURLとHTMLの組み合わせを確認する

スマートフォンで見やすく表示されることと、検索エンジンへ配信方式を正しく伝えることは別の仕事です。まず、代表的な一ページをパソコンとスマートフォンから開き、最終的なURLと返されたHTMLを比べます。

ブラウザーの横幅を狭めるだけで分かるのは、主にCSSによる表示の変化です。サーバーがUser-Agentを見てHTMLや転送先を変えているかは、パソコン用とスマートフォン用のユーザーエージェントでHTTP応答を取り、URL、HTML、応答ヘッダーを比べて確認します。

レスポンシブWebデザインは同じURLとHTMLを使う

レスポンシブWebデザインでは、どの端末にも同じURLから同じHTMLを返し、CSSのMedia Queriesで表示を変えます。Media Queriesの仕様は、widthやheightなどの条件によって、内容を変えずに表示を端末の範囲へ合わせられる仕組みを定めています。

URLが一つなので、共有されるURL、外部からリンクされるURL、サイト内で管理するURLも一つです。端末別の転送は必要ありません。Googleも、その内容に関するインデックス情報を一つのURLへ割り当てやすく、異なるGooglebotのユーザーエージェントで同じ内容を何度も取得する必要がない点を利点として挙げています。

検索エンジンが構成を確認できるように、HTMLだけでなくCSS、JavaScript、画像もクロールできる状態にします。Media Queriesを書いただけでは、読みやすさや操作しやすさまで保証されません。文章、画像、表、フォーム、ナビゲーションを実機で確認する作業は残ります。

パソコンとスマートフォンへ同じ内容を提供できる小規模なサイトなら、最初にこの方式を検討します。端末別のURL対応表、転送規則、ユーザーエージェントによる端末判定を持たずに済むためです。

Dynamic Servingは同じURLから異なるHTMLを返す

Dynamic Servingでは、URLを変えず、サーバーがUser-Agentを判定して端末別のHTMLやCSSを返します。同じURLを使う点はレスポンシブWebデザインと同じですが、HTMLが異なります。

この方式では、次のHTTP応答ヘッダーを返します。

Vary: User-Agent

Varyヘッダーの定義では、応答を選ぶ条件となったリクエストヘッダーを、キャッシュが判断するために示します。Vary: User-Agentがなければ、キャッシュがパソコン用のHTMLをスマートフォンへ返したり、その逆を起こしたりする可能性があります。Googleの実装説明も、このヘッダーを、Googlebot-Mobileがスマートフォン向けHTMLを見つけるための手掛かりとして案内しています。

URLが一つなので、パソコン用URLとスマートフォン用URLをalternateとcanonicalで結ぶ作業はありません。一方、端末判定は継続して保守します。新しい端末を誤って判定した場合、URLが正しくても、利用者へ適切なHTMLを返せません。

別URLは対応する二ページを相互に示す

別URLの方式では、パソコン用の各URLに、同じ用件へ答えるスマートフォン用URLを対応させます。次のURLは構成を説明する仮例です。パソコン用のhttp://www.example.com/serviceと、スマートフォン用のhttp://m.example.com/serviceを一組として管理します。URLの形式より、両方をGooglebotとGooglebot-Mobileが取得でき、対応関係が明確であることが重要です。

パソコン用ページのheadでは、対応するスマートフォン用URLを示します。

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

スマートフォン用ページでは、対応するパソコン用URLを示します。

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

640pxは実装例の値であり、すべてのサイトに固定する条件ではありません。大切なのは、パソコン用のサービスページからスマートフォン用のサービスページへ、同じ用件のページを一対一で対応させることです。複数のパソコン用ページを、すべてスマートフォン用トップページへ対応させては、各ページの関係を示せません。

端末を判定して二つのURL間を自動転送する場合も、応答へVary: User-Agentを付けます。ページの追加、削除、URL変更があれば、二つのサイトの内容、注記、転送規則を同時に更新します。

三方式は更新責任まで含めて選ぶ

レスポンシブWebデザインは一つのURLとHTMLを管理します。Dynamic Servingは一つのURLに対して、端末判定と複数のHTMLを管理します。別URLは、二つのURL、ページの対応、注記、必要な転送を管理します。

違いは見た目ではなく、公開後に誰が何を更新するかに表れます。新規サイトで内容を共有できるなら、管理対象が少ないレスポンシブWebデザインを先に検討します。端末ごとにHTMLや機能を分ける理由があり、サーバー側の判定を保守できるなら、Dynamic Servingが候補になります。すでに別URLのサイトがあり、二つの内容と対応表を維持できるなら、その構成を正しく示す方法も選べます。

レスポンシブWebデザインを採用しても、検索順位は保証されません。三方式はいずれもGoogleがサポートしています。目的は方式の名前を採用することではなく、利用者と検索エンジンへ同じ用件のページを迷わず届け、更新後も設定を維持することです。

一ページで配信方式を判定してから全体を直す

最初から全ページを書き換えず、文章、画像、フォームを含む一ページを選びます。パソコン用とスマートフォン用のユーザーエージェントで取得し、次の順で記録します。

1. 最終的に表示されたURLが同じか、異なるか
2. 返されたHTMLが端末によって変わるか
3. HTTP応答にVary: User-Agentがあるか
4. 別URLなら、二ページのalternateとcanonicalが対応しているか

この一ページを三方式のどれかへ分類できれば、確認すべき設定が決まります。その後、同じ方法でページ一覧へ広げます。最初の作業はスマートフォン用の見た目を選ぶことではありません。代表的な一ページのURL、HTML、HTTP応答を並べ、現在の配信方式を確定してください。