別々の 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 を指す rel="alternate" タグを追加します。これにより、Googlebot はサイトのモバイル用ページの場所を検出できます。
  2. モバイル用ページに、対応するパソコン用 URL を指す 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" タグが必要です。

サイトマップ内のアノテーション

Google では、パソコン用ページを指す次のような 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 属性の値は、どのような場合に Google が代替 URL を使用する必要があるかを示すメディア機能を指定した CSS メディアクエリ文字列です。ここでは、モバイル デバイスをターゲットとする場合に一般に使用されるメディアクエリを使用しています。
  • href 属性は、代替 URL の場所、つまり m.example.com 上のページを指定します。

この双方向アノテーションにより、Googlebot によるコンテンツの検出が可能となり、Google のアルゴリズムはパソコン用ページとモバイル用ページの関係を把握して適切に処理できるようになります。別個の URL を使って同じコンテンツを異なる形式で配信する場合、それら 2 つの URL のコンテンツは同等であるため 2 つのエンティティではなく 1 つのエンティティとして扱う必要があることを、アノテーションによって Google のアルゴリズムに伝えることができます。同じページのパソコン バージョンとモバイル バージョンが別個のエンティティとして処理されると、どちらの URL もパソコンの検索結果に表示され、それらの関係が Google に正しく伝えられた場合よりもランキングが下がる可能性があります。この設定方法のよくある誤りを次に示します。

  • rel="alternate" および rel="canonical" マークアップを使用する際は、モバイル用ページとそれに対応するパソコン用ページの関係を 1 対 1 にしてください。特に、1 つのモバイル用ページを複数のパソコン用ページから参照するアノテーション（またはその逆）は避けてください。
  • リダイレクトを入念にチェックし、パソコン用ページが単一の無関係なモバイル用ページに誤ってリダイレクトされないようにしてください。
パソコン用とは別にモバイル用サイトを作成する場合は、モバイル ユーザーを間違ったページにリダイレクトするなど、よくある誤りにご注意ください。

自動リダイレクト

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

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

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

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

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

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

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

JavaScript リダイレクト

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

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

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

ウェブサイトによってリダイレクトのポリシーは異なります。パソコン用ページにアクセスしたモバイル ユーザーのみをモバイル専用ページにリダイレクト（単方向リダイレクト）するウェブサイトもあれば、モバイル ユーザーとパソコン ユーザーがそれぞれパソコン用サイトとモバイル用サイトにアクセスしたときに両者をリダイレクト（双方向リダイレクト）するウェブサイトもあります。

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

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