レスポンシブサイトの構築
レスポンシブサイトの構築方法について、ポイントを整理したいと思います。
ポイントは大きく分けて3つ
1、サーバサイドスクリプトによるコンテンツ出力の振分け
2、CSSによるレスポンシブ仕様
3、検索エンジン対策
Googleのモバイル対策
3つのポイントを見る前に、Googleのモバイル対策を理解した方が良いと思います。
Googleによると、彼らの検索エンジンが対応するモバイルサイトとして取り得る選択肢は、以下の三つ、
A、レスポンシブ ウェブ デザイン
B、動的な配信
C、別々のURL
があります。
A、レスポンシブ ウェブ デザインは、CSSによる端末画面の横幅によるデザインの振り分けで対応することです。これがいわゆるレスポンシブ ウェブ デザインです。
B、動的な配信は、サーバサイドスクリプトを用いて、HTTPリクエストのユーザーエージェントを判別して同一URLで異なるHTMLやCSSを配信することです。
C、別々のURLは、モバイル用とPC用の異なるページを用意して、これらが同一のページであることをlink rel=”canonical”やlink rel=”alternate”のタグで示すことです。その上で、ユーザーエージェントの判別によるHTTPリダイアレクト、補助的にJavaScriptリダイアレクトが推奨されます。
参考ページ：モバイル SEO
サイト構築時の条件によってどのような手段を用いるのが最善かは異なりますが、自由な環境でレスポンシブサイトを構築するのであれば、私はA、レスポンシブ ウェブ デザインとB、動的な配信を組み合わせるのが良いと思います。A、レスポンシブ ウェブ デザインだけで十分かとも思いますが、htmlの大幅な変更やコンテンツ量の調整はB、動的な配信の方がシンプルに片付きます。特に広告を貼り付けたりしたい場合には、display=”none”を使ってはいけない規約になっていたりするので、B、動的な配信が必須となる場合もあります。
1、サーバサイドスクリプトによるコンテンツ出力の振分け
1、サーバサイドスクリプトによるコンテンツ出力の振分けは、phpには管理されたライブラリがあるようです。例えばMobile Detect。ライブラリがない場合には、基本的なモバイルとタブレットのユーザーエージェントを判別してそれ以外をPCとし、抽出漏れが分かり次第、更新していくことになると思います。Javaであればタブレット系をUserAgentで判別する などを参考にしました。
2、CSSによるレスポンシブ仕様
2、CSSによるレスポンシブ仕様は、用心するのであれば1、サーバサイドスクリプトによるコンテンツ出力の振分けによって判別洩れした「小さ過ぎるPC」「大きすぎるモバイル／タブレット」を含めてデザインすると良いと思います。こうすることで1、サーバサイドスクリプトによるコンテンツ出力の振分けの欠点を2、CSSによるレスポンシブ仕様で補完することができます。レスポンシブデザインの作り方は「レスポンシブデザイン 作り方」などで検索すると解説ページがたくさん出てきますが、これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方などを参考にしてみてはいかがでしょうか。
余談ですが、先日、モバイルファーストのレスポンシブデザインでは訴求力のあるPCページができないので、C、別々のURLでモバイルサイトを構築した方が良いとアドバイスされたことがありました。確かに、2、CSSによるレスポンシブ仕様だけのページをPCでみるとどうしても内容の少ないページになってしまいます。かと言って、これだけモバイルの普及した時代にモバイルに最適化されていないページを作ることは得策でないし、C、別々のURLでサイトを構築するのも管理がいかにも非効率です。そこで、効率的でモバイル対応もできたサイト運営を行うには1、サーバサイドスクリプトによるコンテンツ出力の振分けが必要になってきます。どのようなサイトを作るかによりますが、一からサーバサイドスクリプトでコンテンツを管理していくのは小さなサイトを作るには無駄があります。そこで、CMSの活用が以前にもまして増え、サイト作成の必須のツールになりつつあると感じています。
3、検索エンジン対策
3、検索エンジン対策は、C、別々のURLの場合には、タイトルにスマホ用などと入れたりすることでGoogleが勝手に検索結果を最適化してくれたりしていますが、少なくともLinkタグでの関連付けはしておいた方が良いと思います。できれば.htaccessやJavaScriptでもよいので転送を行い、転送をした場合にはHTTPヘッダーにVaryを設定することでGoogleのクローラーやプロキシサーバーがモバイルサイトとPCサイトを判別しやすくなるようです。Vary HTTPヘッダーの設定方法は、スマホ向け表示を分けているときはVary HTTPヘッダーを使うこと など10+4記事（海外&国内SEO情報）などを参考にしてください。B、動的な配信の場合もVary HTTPヘッダーを設定した方が良いとのことです。ちなみに、Googlebotを検出しての振り分けはご法度になります。