その他のデバイスでのモバイル SEO

タブレット

ウェブサイトをモバイル ユーザー用に設定する場合は、タブレットでサイトにアクセスするユーザーについても考慮するのが一般的です。タブレット向けウェブサイトと検索エンジンの相性を高めるための特別な推奨事項はありませんが、パソコン、スマートフォン、タブレットに対応したウェブサイトを構築する際のヒントをいくつかご紹介します。

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

通常は、レスポンシブ ウェブ デザインの使用をおすすめします。レスポンシブ ウェブ デザインとは、すべてのデバイスに同じ HTML コードを配信しつつ、パソコン、スマートフォン、タブレットごとに異なる CSS スタイルルールを使用してサイトのインターフェースを最適化することです。

ウェブサイトにレスポンシブ ウェブ デザインを使用する場合は、各種のタブレットでテストして正しく表示されることを確認してください。スマートフォンと同様に、タブレットの画面のサイズや解像度も機種によってさまざまです。

デバイスごとのコンテンツ

ウェブサイトでは、デバイスごとに異なるページ(異なる HTML、CSS、JavaScript など)を提供できます。こうしたページは、同一の URL(動的な配信と呼ばれる設定)で配信することも、別々の専用 URL で配信することもできます。

ウェブサイトにパソコン専用ページとスマートフォン専用ページはあるがタブレット専用ページがない場合、Google の経験では、ほとんどのタブレット ユーザーはスマートフォン版のページではなくパソコン用サイトが表示されることを期待します。

タブレット向けサイトがある場合は、以下のガイドラインに沿ってサイトを設定してください。

  • 動的な配信: パソコン、スマートフォン、タブレットの各ユーザーに対して同じ URL を提供し、ユーザー エージェントに応じて異なる HTML(および CSS)を配信します。スマートフォン用ウェブサイトの推奨事項にあるとおり、Vary HTTP ヘッダーを使用することを強くおすすめします。
  • 別個のタブレット専用 URL: この場合、Googlebot がタブレット専用 URL をクロールできるようにするとともに、各タブレット用 URL の rel="canonical" で、対応するパソコン用 URL を指定することを強くおすすめします。

フィーチャー フォン

スマートフォン ユーザー向けに配信するサイトでは、可能であればレスポンシブ ウェブ デザインを採用することをおすすめします。ただし、フィーチャー フォンには CSS メディアクエリに従う機能がないため、フィーチャー フォンへの配信を望むウェブマスターは、動的な配信または別個の URL を使用してフィーチャー フォン用のコンテンツを配信するようにサイトを設定する必要があります。

また、フィーチャー フォン対応のページには、以下で説明するように、<link rel="alternate" media="handheld"> タグを追加することをおすすめします。

ここでは、こうした各設定を実装する方法について説明します。

動的な配信

他のデバイスと共通の URL でフィーチャー フォン向けコンテンツを動的に配信するようにサーバーを設定する際は、スマートフォンに配信する場合と同じ実装を使用します。サーバーには Vary: User-Agent HTTP レスポンス ヘッダーを含める必要があります。ユーザー エージェントを検出する際のよくある誤りにもご注意ください。また、ページには次のタグを追加してください。

<link rel="alternate" media="handheld" href="[current page URL]" />

別個の URL

別個の URL でパソコン、スマートフォン、フィーチャー フォンの各ユーザーに配信する場合、ウェブマスターは次の 3 つの設定方法を選択できます。これらの設定では、フィーチャー フォン向けのサイトとスマートフォン向けのサイトの構築に際して、前に説明したアノテーションを使用します。

専用 URL の設定

この設定方法では、各 URL を次のように設定します。

  • http://www.example.com/page-1 パソコン用ユーザー用
  • http://m.example.com/page-1 スマートフォン ユーザー用
  • http://phone.example.com/page-1 フィーチャーフォン ユーザー用

この設定方法では、次のアノテーションを追加して、各種デバイスをターゲットとする同等ページ間の関係を Google のアルゴリズムが把握できるようにすることをおすすめします。

www.example.com/page-1 には、次のアノテーションを追加します。

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

m.example.com/page-1 には、次のアノテーションを追加します。

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

phone.example.com/page-1 には、次のアノテーションを追加します。

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

パソコン用 URL とすべてのモバイル用 URL の設定

この設定方法の場合、ウェブサイトはある URL でパソコンにコンテンツを配信する一方、別の URL ですべてのモバイル(つまり、スマートフォンとフィーチャー フォンの両方)に配信します。次のように設定します。

  • http://www.example.com/page-1 パソコン ユーザー用
  • http://m.example.com/page-1 スマートフォン ユーザーとフィーチャー フォン ユーザー用

この場合、http://www.example.com/page-1 でのアノテーションは次のようになります。

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

m.example.com ページには、次のタグを含めます。

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

この rel="canonical" は、ページがフィーチャー フォン用かスマートフォン用かにかかわらず、すべてのページに追加する必要があります。

サーバーでは、レスポンスに HTTP Vary: User-Agent ヘッダーを含める必要があります。このヘッダーは、インターネット キャッシュや Googlebot に対して、サーバーのレスポンスがユーザー エージェントごとに異なる可能性があることを知らせます。また、Googlebot がクロールするためのシグナルにもなります。

フィーチャー フォン専用 URL の設定

この設定方法の場合、ウェブサイトはレスポンシブ ウェブ デザインや動的な配信を使って同じ URL でパソコンとスマートフォンにコンテンツを配信する一方、フィーチャーフォンには別の URL で配信します。 例:

  • http://www.example.com/page-1 パソコン ユーザーとスマートフォン ユーザー用
  • http://m.example.com/page-1 フィーチャー フォン ユーザー用

この場合、http://www.example.com/page-1 でのアノテーションは次のタグになります。

<link rel="alternate" media="handheld" href="http://m.example.com/page-1" />

http://m.example.com/page-1 でのアノテーションは次のタグになります。

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

リダイレクトと Vary HTTP ヘッダー

パソコンサイトにアクセスしたモバイル ユーザーをモバイルサイトに自動的にリダイレクトする場合(またはその逆の場合)は、必ず Vary HTTP ヘッダーを含むようにサーバーを設定してください。

サイトマップ

フィーチャー フォン用サイトマップと、スマートフォン用の代替 URL のサイトマップについての推奨事項は、以前と同じです。