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

タブレット

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

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

通常は、レスポンシブ ウェブ デザインの使用をおすすめします。レスポンシブ ウェブ デザインとは、パソコン、スマートフォン、タブレットごとに別々の CSS スタイル規則を使用してサイトのインターフェースを最適化し、HTML コードはすべてのデバイスに共通のコードを提供する方法です。

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

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

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

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

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

  • 動的な配信: パソコン、スマートフォン、タブレットの各ユーザーに対し、同一の URL で、ユーザー エージェントに応じて異なる HTML(および CSS)を配信します。スマートフォン用ウェブサイトの推奨事項で説明しているとおり、Vary HTTP ヘッダーを使用することを強くおすすめします。
  • タブレット専用の URL: これを使用する場合は、タブレット用 URL のクロールを Googlebot に許可し、その各 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 の設定

この設定では、次のように指定します:

  • 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" />

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

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

サイトマップ

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

フィードバックを送信...