レスポンシブウェブデザインのすゝめ

MFI開発の進捗について先日ご紹介しまして、そこでGoogleが公式にレスポンシブウェブデザインを推奨したこともお伝えしました。そして、先日Googleウェブマスター向け公式ブログでレスポンシブへの移行方法が紹介されていました。

RWD

ふわふわ

モバイルファイル対応の種類

Googleがこの度正式にレスポンシブを推奨した背景として、今一度モバイル対応方法の種類をおさらいしたいと思います。まず、モバイル対応には以下の3つの方法が考えられます。

  • セパレートタイプ:別ファイル対応(URLも別)
  • ダイナミックサービング:別ファイル対応(URLは一緒)
  • レスポンシブウェブデザイン:同じファイル対応

セパレートタイプとは、モバイルでサイトを呼び出す際に専用URLで展開する場合です。モバイル専用URLになるので、アノテーション設定が必要になります。モバイル専用ファイルがありますので、モバイルファーストインデックス(以下:MFI)に向けて展開するのであれば、当然モバイル専用ファイルにコンテンツの充実性や構造化データのマークアップが必要になります。

ダイナミックサービングに関しては、これもモバイル専用にファイルを作って展開します。しかし、これはURLが同じでもUser-Agent機能を使ってデバイスや画面サイズに合わせた専用ファイルを動的に呼び出す方法です。セパレートタイプと違ってURLが別個に存在しないので混乱は少なくなります。でも、こちらもモバイル専用ファイルがありますので、MFIに向けては(セパレートタイプ同様)モバイル専用ファイルにコンテンツの充実性や構造化データのマークアップが必要になります。

そしてレスポンシブウェブデザイン(以下:RWD)。RWDは、PCでもモバイルでもファイルが一貫して同じで、画面サイズによってUI構成を変化させるタイプです。これは同じファイルですので、URLは別個に存在しない上、MFIに向けた特別な設定を行う必要もありません。

モバイル対応種類によるMFI対応方法

ちなみに各展開内容の詳細は「どれがベスト?スマホ対応サイトの構築方法3種|SEO Pack」をご覧いただくとお分かりいただけるでしょうから、ここでは割愛します。

ふわふわ

なぜGoogleはRWDを推奨したのか

今までのGoogleは、モバイル対応の種類に対して前述のいずれの方式でも問題ない旨を発表してきました。どの方式を採ってもSEO上何も影響は無いと伝えられてきました。

しかし、現在MFI開発している中で、どうしてもクオリティニュートラル(MFIになっても従来のデスクトップとさほど変わらないランキング)にならないそうです。

原因は、セパレートタイプとダイナミックサービングを採用しているモバイルサイトにおけるコンテンツの少なさ(ページ数含む)と各種マークアップ(アノテーション設定や構造化データ等)の欠落等があるそうです。

結果GoogleはMFIを、ページ単位としたり…運用者の承認制にしたり…段階的な導入方法を予定することになってしまったわけです。そして、公式にRWDを推奨するに至ったというわけです。

ふわふわ

RWDの再喚起と移行方法

Googleはウェブマスター向け公式ブログで以下のように伝えています。

レスポンシブ サイトに移行すると、今後のメンテナンスやレポート作成が簡単になります。すべてのページについて別々のURLを管理する必要がなくなるだけでなく、さまざまな手段や技術(国際化のためのhreflang、高速化を実現するAMP、検索機能の向上に役立つ構造化データなど)も取り入れやすくなります。

引用)Googleウェブマスター向け公式ブログ

そして、関心を高めた上で、セパレートタイプやダイナミックサービングからRWDへの移行方法を案内しています。

ただ、少し注意点があります。従来のセパレートタイプだとアノテーション設定として、モバイルファイルからデスクトップファイルにrel=“canonical”の設定をしていたので、RWDになってもcanonical設定はそのままでも良いのではないかと考えるのが一般的です。しかし、GoogleはRWDに変更したタイミングでモバイルファイルからRWDファイルに301リダイレクトを設定するよう促しています。

そして、念のためRWDファイルには、そのURLにcanonical設定するよう(URLの正規化)示唆しています。

元々あったモバイル専用ファイルのcanonical設定を301リダイレクト設定に変更させる理由としては、恐らくcanonical設定よりも301リダイレクトの方がファイル移行の意味合いが強く、クローラーに対してもより強力に働くからでしょう。

ふわふわ

Let’s RWD

…ということで、是非RWDにしていきましょう!(笑)

「Googleに左右されるのが嫌」「スマホ専用のデザインを追求したい」とか、色々言いたいことはあるかもしれません。でも、私は個人的にずっとRWDを推奨してきましたし、最近ではデザイン支援ツールハンバーガーメニューの創意工夫等、デザインの研究も進化してきています。これからは、きっと法人サイトのWordPress化も増えてくるでしょうし…。

…ということで、是非RWDにしていきましょう!(笑)