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

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にしていきましょう!(笑)


関連記事
Googleウェブマスター向け公式ブログでも「しごと検索」に関する構造化データのマークアップ注意点を再喚起していましたが、ちょうど私のほうでも、「しごと検索」枠登場による一般検索へのCTR影響度を検証したデータがございましたので、ご紹介したいと思います。 マークアップのしかたを間違えてはいけない G ...(続きを読む)
ついに来ました。去年の夏頃に実装予定を発表していましたが、Q&Aとライブ動画の構造化データマークアップサポートに続き、今回How-toとFAQに関する構造化データもマークアップ支援するようになったと発表されました。 どんな内容? 「○○ やり方」「○○ 方法」「○○ しかた」等の検索(いわゆるHow ...(続きを読む)
GoogleのWebmaster Central BlogでChromium(Google Chrome開発の元となっているオープンソースのプロジェクト)に合わせてGooglebotが最新のレンダリング機能を持つようになった、と発表されました。つまり、Webページレイアウトをより正確に理解し、ランキ ...(続きを読む)
Google I/O 2019にて、Google検索がAR(拡張現実)を活かした視覚的な機能を発表しました。既にGoogleの「The Keyword」でも取り上げられていますが、これは興味深い内容でしたので、ご紹介したいと思います。 AR検索 これからの機能として紹介されていますが、例えばGoog ...(続きを読む)

コメントを書く

コメントは承認から反映までしばらく時間がかかる場合がございます。メールアドレスが公開されることはございません。