スマートフォン表示のWebページはどうやって？

こんにちは！アイサット研修担当です。
前回の技術者ブログではPCでスマートフォンページを見る方法を述べましたが、スマートフォン用のページが表示される仕組みについて書いていこうと思います！

スマートフォン用ページを表示する方法は主に3つあります。

• 1. レスポンシブWebデザインで表示
• 2. 同じURLだけど端末ごとに別ページを表示する
• 3. スマホ向けページを別に用意し、リダイレクトする

1. レスポンシブWebデザインで表示

これがGoogleの推奨する設定方法ですので、これが主流かなぁと思います。レスポンシブWebデザインとは同じURLの同じHTMLでも、CSSによりデバイス毎にデザインを変えて表示する仕組みです。%指定やflexプロパティ、メディアクエリなどで表現することになるかと思います。これ以外の方法だとレスポンスの際適切に情報を与える必要がありますが、単一のURLを返すのでその必要がありませんね。

2. 同じURLだけど端末ごとに別ページを表示する

こちらと以下の方法は、アクセスしてきた端末のユーザーエージェントの情報に基づいてPCとスマートフォンで異なったHTMLやCSSを返します。

3. スマホ向けページを別に用意し、リダイレクトする

こちらも同じく、ユーザーエージェントの情報に基づいて判断します。こちらの場合、サーバ側で判別したのち異なるURLにリダイレクトします。

---

注意したいのは、2番と3番の方法は、キャッシュについて考えなければならないことです。動的にサーバ側で判別しているため、残っているキャッシュによってページを表示してしまうと意図したページを表示できなくなってしまう場合があるためです。
その際はVary HTTPヘッダを使用してキャッシュサーバやクローラーにユーザーエージェントによって内容が変わることを伝える必要があります。

レスポンシブWebデザインがGoogleに推奨されているのは以下のような利点があるからのようです。

• 1. PCのページとスマートフォンのページを同一のURLとすることができるため、ユーザーはシェアやリンクが簡単で、またGoogleのアルゴリズムにとってはコンテンツを適切にインデックスできるようになるため
• 2. クローラーが異なる表示のページごとにクロールする必要がないためより効率的にコンテンツを見つけることができるため

こう書くとSEO的にも効果がありそうですね！
必ずしもレスポンシブWebデザイン以外を使ってはいけない訳ではないのですが、Googleが推奨していますし上記の利点もありますし、特別な理由がない限りはレスポンシブWebデザインでスマートフォンページの表示をした方がよさそうですね。