スマホ・PCサイトの最適化(URLが同じもしくは異なる場合)


こんにちは!ポップコーンSEOの松本( @ma_tsutomu )です。

過去にこのような記事(【最新】Googleからクロールインデックスについてのメッセージ【注意喚起】PCサイトからスマホサイトへの301リダイレクトについて)を書きましたが、最近、益々モバイルサイトとPCサイトの関係性がSEO対策において非常に重要なポジションになってきております。※モバイルとはガラケー・スマホを含むものとします。

本日はモバイルサイトとPCサイトの最適化方法をご紹介します。※基本的にはPCサイトがあって、今後スマホページを創っていくかなという方向けに書かせて頂きます。

方法は下記の3通りです。

  1. レスポンシブ・ウェブデザイン(Responsive web design)
  2. ダイナミック・サービング(Dynamic serving)
  3. モバイル用別URLが存在する場合の対処法

 

1. レスポンシブ・ウェブデザイン(Responsive web design)

PCサイトとモバイルサイトで同じURL・同じHTML・メディアクエリでレンダリングする

各種デバイス毎にCSS3のメディア・クエリを用いてレンダリング(サイズを合わせる)する手法です。

Googlebotに対して、テキストや画像のクローリングを妨げることなく、一つのURL上で一つのHTMLを見せることができるので、最も推奨されている手法です。

様々な規格のスマートフォンが発売され、今後もデバイスは多様化されることが予想されます。一つ一つデバイスに合わせて規格を設計していく手法は非常に、汎用性がありません。

今後のモバイル戦略を加味するなら、筆者はレスポンシブルウェブデザインを推奨します。もしくは、どのデバイスに対してもPCサイトを見せるかですね。結構私の周りのスマホユーザーからはPCサイトをそのまま見るほうがPC画面と同じ仕様なので、どこに何があって分かりやすいとの声も上がってきています。

 

2. ダイナミック・サービング(Dynamic serving)

PCサイトとモバイルサイトで同じURL・異なるHTML(異なるCSS)・ユーザーエージェントによって見せ方を変える

ユーザーエージェント(ユーザーがアクセスしている端末)毎に振り分け設定をしているので、同じURLで異なるHTMLを帰すことができます。

これは、Googleが2番目に推奨している方法になります。ただ、Googlebotがクローリングする際にモバイル用HTMLがあることをきちんと伝える必要があります。それが、Vary  HTTPヘッダーです。

Vary HTTPヘッダーとは、サーバーにアクセスがあったときに、データと一緒にサーバーから返すHTTPヘッダーの1つで「Vary」という名前のもののこと。「今回はこのHTMLを返したけど、この内容はユーザーエージェント名によって変わる場合があります」「この内容はクッキーの状態によって変わることがあります」といった意味を表すシグナルだ。

モバイルページをPCページと同じように保有しているなら、それぞれ対応するページ同士でこの設定をしなければなりません。下層ページは下層ページ。トップページはトップページ。間違っても、【PC】下層ページ→【モバイル】トップページとしてはいけません。これはGoogleが推奨している方法ではないし、ユーザビリティ的にも混乱を招いてしまいます。

 

3. モバイル用別URLが存在する場合の対処法

PCサイトとモバイルサイトで別URL・別HTML(別CSS)・ユーザーエージェントによってリダイレクトする

PCサイトがwww.sample.comなら、モバイルサイトがm.sample.comやwww.sample.com/sp/となっている場合の対処法がこれに当たります。

流れとしては、下記のステップです。

  1. PCページからモバイルページに向けてrel=”alternate”を設定
  2. モバイルページからPCページに向けてrel=”canonical”を設定
  3. ユーザーエージェントによってリダイレクト

ここでの注意点として、2でも上げたように、必ず対応するページ同士を指定して下さい。

 

 

GoogleがPCサイトとスマホサイトの関係は非常に重要な位置づけとなることを示唆しています。リダイレクトループがあっても、検索結果によろしくない影響をおよぼすはずです。

また、適切な設定を行っていない場合は、クローラーも勘違いしてしまう可能性があります。クローラーの勘違いを防ぐためにも、ユーザーにとってきちんとした情報を見せるためにも是非、上記設定をご参考にしてみて下さい。