モバイル向けに最適化されたウェブサイトに関する Google の推奨事項

近年のスマートフォンの普及により、モバイルデバイス経由でウェブサイトを閲覧するユーザーが増えており、モバイルトラフィックに注意を払う必要が生じています。 （私の夢解釈ウェブサイトによると、従来の携帯電話でのUC検索は、特に午前中にトラフィックの増加が速く、トップ検索エンジンの1つになっています。）

Google も徐々にウェブサイトのモバイル バージョンに注目するようになり、モバイル デバイス用の特別なクローラー Google-Mobile を使用するだけでなく、ウェブサイトのモバイル バージョンを最適化する方法についても説明しています。この記事は、Google の記事「モバイル デバイス向けに最適化された Web サイトの構築」を読んで学んだことをまとめたものです。

モバイルウェブサイトを構成する3つの方法

モバイル ウェブサイトには、一般的に 3 つの構成方法があります。

1. レスポンシブ Web デザインとは、同じ URL と同じコンテンツを意味します。

ユーザーが使用するデバイスが PC、携帯電話、タブレットのいずれであっても、コンテンツ レイヤーの HTML は同じですが、プレゼンテーション レイヤーの CSS によって異なる表示形式が制御されます。たとえば、モバイル デバイスとタブレットでは、画面表示に合わせて最大幅が制御されます。

1. 同じ URL、異なるコンテンツ。

同じ URL でも、ユーザーが使用しているデバイスに応じて異なるコンテンツが返されます。これはサーバー側から制御され、ユーザーのアイデンティティ（User-Agent、ユーザーがWebページをリクエストする際にサーバーに提供される情報のひとつ）に応じてデバイスが判断され、異なるコンテンツが提供されます。

1. URL が異なればコンテンツも異なります。

デバイスに応じて、Web サイトには異なる URL と異なるコンテンツが表示されます。たとえば、PC バージョンは www.example.com、スマートフォン バージョンは m.example.com、従来のモバイル バージョンは wap.example.com です。通常、リダイレクトも同時に設定されます。たとえば、スマートフォンで www.example.com にアクセスすると、自動的に m.example.com にリダイレクトされます。

rel="canonical" と rel="alternate" の使用

上記の 3 番目の方法を使用すると、異なる URL が基本的に同じコンテンツを返すため、www.example.com/arti123.html と m.example.com/arti123.html のようにコンテンツが重複することになります。それで、どうやって解決するのでしょうか? rel="canonical"タグとrel="alternate"タグはこの問題をうまく解決します。
rel="canonical" と rel="alternate" は、重複ページの中で標準ページを示す、検索エンジン専用の提案です (現在、Google、Bing、Baidu はすべてこのタグをサポートしていると発表しています)。たとえば、ページ A とページ B という 2 つの類似ページがあり、ページ A が標準ページでページ B が代替ページである場合、ページ B には標準ページが A であることを示す rel="canonical" タグを追加する必要があります。また、ページ A には代替ページ B があることを示す "rel="alternate" タグを追加する必要があります。例:
ページ A: <link ref="alternate" href="www.example.com/B">
ページ B: <link ref="canonical" href="www.example.com/A">
デスクトップ ウェブ ページとモバイル ウェブ ページの問題は、上記の問題と非常に似ています。通常、デスクトップ ウェブ ページが標準ページであり、モバイル ウェブ ページが代替ページです。 2 カテゴリ ページには次のタグを追加できます。
デスクトップ ページ: <link ref="alternate" href="m.example.com/">
モバイルページ: <link ref="canonical" href="www.example.com/">

さらに、rel="alternate" タグは、Web ページのデスクトップ バージョンのサイトマップ内のコードなど、サイトマップでも使用できます。

 <?xml version="1.0" encoding="UTF-8"?><urlset xmlns=" xmlns:xhtml=" >><url><loc> </loc><xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href=" /></url></urlset> 

元のタイトル: モバイルデバイス向けにウェブサイトを最適化するための Google の提案

キーワード: Google