別々の URL

この設定では、パソコン用 URL ごとに同等のモバイル向けコンテンツを配信する別の URL を用意します。

たとえば、パソコン ユーザーに配信される www.example.com 上のページに対応するページとして、m.example.com のページをモバイル ユーザーに配信するのが一般的です。Google では、すべての Googlebot ユーザー エージェントがすべてのページにアクセス可能である限り、特定の URL 形式が優先されることはありません。

パソコン用とモバイル端末用に(場合によってはタブレット用にも)、別々の URL から別々のコードを配信します。

要約

  • 2 つの URL の関係を <link> タグ、rel="canonical" 要素、rel="alternate" 要素で伝えます。

  • ユーザー エージェント文字列を検出して正しくリダイレクトします。

パソコン用 URL とモバイル用 URL のアノテーション

Google のアルゴリズムがモバイルの別個の URL を認識できるように、次のアノテーションを指定することをおすすめします。

  1. パソコン用ページに、対応するモバイル用 URL を指す特別な link rel="alternate" タグを追加します。これで、Googlebot がサイトのモバイル用ページの場所を検出できます。
  2. モバイル用ページに、対応するパソコン用 URL を指す link rel="canonical" タグを追加します。

Google では、このアノテーションの追加先として、ページ本体の HTML とサイトマップの 2 つをサポートしています。たとえば、パソコン用 URL が http://example.com/page-1 で、対応するモバイル用 URL が http://m.example.com/page-1 であるとします。この場合のアノテーションは次のようになります。

HTML 内のアノテーション

パソコン用ページ(http://www.example.com/page-1)には、次のアノテーションを追加します。

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

モバイル用ページ(http://m.example.com/page-1)に追加する必要があるアノテーションは次のとおりです。

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

モバイル用 URL には、パソコン用ページを指すこの 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>

モバイル用 URL 上の必須の rel="canonical" タグはこれまでどおりモバイル用ページの HTML に追加する必要があります。

アノテーションの詳細

パソコン用ページの link タグの属性に注意してください。

  • rel="alternate" 属性は、このタグがパソコン用ページの代替 URL を指定していることを示します。
  • media 属性の値は、代替 URL を使用するメディア機能を指定する CSS メディアクエリ文字列です。上記の場合、モバイル端末がターゲットの場合に一般に使用されるメディアクエリを使用しています。
  • href 属性は代替 URL の場所、つまり m.example.com のページ上の場所を指定します。

この双方向アノテーションにより、Googlebot でコンテンツの検出が可能となり、Google のアルゴリズムがパソコン用ページとモバイル用ページの関係を把握したうえで適切に処理できます。異なる URL を使って同じコンテンツを異なるフォーマットで配信する場合は、アノテーションによって Google のアルゴリズムにそれらの 2 つの URL のコンテンツは同等であるために 2 つの構成要素ではなく 1 つの構成要素として扱うことを伝達します。別々に処理されると、PC 用 URL と携帯端末用 URL はどちらも PC の検索結果に表示され、そのランキングは 1 つの同じ構成要素として扱う場合よりも下がる可能性があります。さらにこの設定でよくある誤りを回避するため、以下の点に注意してください。

  • rel="alternate" と rel="canonical" のマークアップを使用する場合、モバイル用ページとそれに対応するパソコン用ページの関係が必ず 1 対 1 になるようにします。同じモバイル用ページを複数のパソコン用ページから参照するようなアノテーションは避けてください(その逆も同様です)。
  • パソコン用ページが無関係なモバイル用ページに誤ってリダイレクトしていないかどうか十分確認します。
パソコン用とは別にモバイル用サイトを実装する場合は、モバイル ユーザーを間違ったページにリダイレクトするなどのよくある誤りに注意します。

自動リダイレクト

パソコン ブラウザとモバイル ブラウザに別々の URL を使用するウェブサイトでは、ユーザーの環境に合わせて自動的に最適な URL にリダイレクトすることもできます。ウェブサイトで自動リダイレクトを使用する場合は、他のユーザー エージェントと同様にすべての Googlebot に対処し、適切にリダイレクトする必要があります。

サポートされるリダイレクト方法

Googlebot では、以下の 2 つのリダイレクトの実装がサポートされます。

  • HTTP リダイレクト
  • JavaScript リダイレクト

HTTP リダイレクトを使用する

HTTP リダイレクトは、クライアントをデバイス固有の URL にリダイレクトする場合によく使用されます。通常、このリダイレクトは HTTP リクエスト ヘッダーにあるユーザー エージェントに基づいて行われます。リダイレクト先をページの link rel="alternate" タグやサイトマップに指定されている代替 URL と一致させておくことが重要です。

そのためには、サーバーのリダイレクトで使用可能な HTTP ステータス コード 301 と 302 のうち、できる限り 302 を使用することをおすすめします。

JavaScript リダイレクト

HTTP リダイレクトの実装が難しい場合は、JavaScript を使って、link rel="alternate" タグが指す URL にユーザーをリダイレクトできます。この方法を選択する場合、クライアント側でリダイレクトされるまでに遅延が発生することに注意してください。この遅延は、リダイレクトがトリガーされる前に、まずページをダウンロードしてから JavaScript を解析、実行する必要があるためです。

JavaScript ベースのリダイレクトはさまざまな手段で実装できます。たとえば、既にサイトのページのリンク アノテーションで使用しているメディアクエリを、matchMedia() JavaScript 関数を使って実行することも可能です。

双方向リダイレクトと単方向リダイレクト

ウェブサイトごとにリダイレクトの方針は異なります。PC 用ページにアクセスしたモバイル ユーザーのみをモバイル専用ページにリダイレクトするウェブサイト(「単方向」リダイレクト)もあれば、モバイル ユーザーと PC ユーザーがそれぞれ PC 用サイトとモバイル用サイトにアクセスした場合にその両者をリダイレクトするウェブサイト(「双方向」リダイレクト)もあります。

Googlebot にとってどちらかが好ましいということはありません。リダイレクトの方針を決める際は、ユーザーの利便性を考えて検討することをおすすめします。最も重要なのは、正しく一貫性のあるリダイレクトを提供すること、つまりパソコンサイトまたはモバイルサイトの同等のコンテンツにリダイレクトすることです。設定が正しくないと、一部のユーザーがまったくコンテンツを表示できなくなるおそれがあります。

また、リダイレクトをオーバーライドする方法、つまり、選択すればモバイル ユーザーがパソコン用ページを表示でき、パソコン ユーザーがモバイル用ページを表示できるような方法を提供することもおすすめします。