No Web Service No Life

クラウドソーシングサービス「ランサーズ」のプロデューサーです。Webサービスや構成要素(UIや技術)について書いています。

スマホサイトのURLをPCサイトと分ける場合の3つの注意点


PC向けのページをスマホに最適化する場合、Googleは以下の3つの方法をサポートしています。

  • レスポンシブルデザイン(URLとHTMLが一緒)
  • 動的配信(URLは1つだけどHTMLが異なる)
  • URLを分ける

本記事では、そのうち、スマホ用に別URLを設ける場合に気をつけるべき事項について書きます。
(他の2パターン、レスポンシブルデザインと動的配信については別途書きます)

URLを分けてスマホサイトを用意するとは?

URLを分けるとは、以下のようにPCとスマホでそれぞれURLを用意することを指します。
PC:http://www.hoge.com
スマホhttp://www.hoge.com/sp

UAを判別し、スマホUAからアクセスがあった場合に、スマホ用のURLにリダイレクトする実装が一般的です。この方法の場合、設定にあたって注意すべき点がいくつかあります。
Googleはレスポンシブルデザインを推奨していますが、その理由の1つが、下記3点を含む設定ミスが発生することを防げるからといっています。

対応するコンテンツにリダイレクト

トップページならスマホ用トップページ、一覧ページなら一覧ページ、詳細ページなら詳細ページと、PCとスマホサイトのリダイレクト関係は1:1にしておく必要があります。
全てトップページにリダイレクトするような設定は、ユーザビリティの観点からもよくないですし、Googleからの評価を下げる要因にもなります。

適切なcanonicalとalternate

PCサイトとスマホサイトを、アノテーションによって紐付けてあげる必要があります。

PCサイトでは、「スマホ用のコンテンツがありますよ」という意味でalternateを記述します。

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.hoge.com/sp" />

※media属性には、Googleが推奨するCSSメディアクエリを指定します。

対応するスマホサイトでは、「このサイトはPCサイトのスマホ用コンテンツですよ」という意味でcanonicalを設定します。

<link rel="canonical" href="http://www.hoge.com" />

このように双方向のアノテーションを付与することによって、Googlebotに両者の関係性を伝えることができ、別URLの重複コンテンツと認識されることを防ぐことができます。

PCのUAスマホサイト→PCサイトにリダイレクトしない

PCサイトにスマホUAでアクセスがあった場合に、スマホサイトにリダイレクトの設定をしますが、その逆を設定してはいけません。リダイレクト設定をしてしまうと、Googlebotがスマホサイトにアクセスした際にもリダイレクトされ、canonical設定を正しく伝えることができません。
スマホ用のGoogleボットであるGooglebot-Mobileもありますが、通常のGooglebotが、そのサイトがPCサイトのスマホ版であると認識することによって、Googlebot-Mobileのクロールが適切に行われます。通常のGooglebotは、PCサイト専用ではないことに注意が必要です。

Googleのモバイルフレンドリー対応により、ますますサイトのスマホ最適化が重要になってきています。
スマホSEOに関する情報は下記書籍がおすすめです。

モバイルフレンドリーから始めるスマホSEO (渡辺隆広のSEO講座)

モバイルフレンドリーから始めるスマホSEO (渡辺隆広のSEO講座)


最新のWebサービス・スマホアプリの情報が毎日メールで受信できるキュレーションサービス『Service Safari』を運営しています。
エンジニアを募集していますので、ご興味のある方はFacebookやTwitterからご連絡ください。