スマホサイトの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講座)
- 作者: 渡辺隆広
- 出版社/メーカー: 小鳥社
- 発売日: 2015/04/17
- メディア: Kindle版
- この商品を含むブログを見る