PC/SPサイト別URLの場合

PCサイト(http://sample.com/)、スマホサイト(http://sample.com/sp/)のように、同じ内容だけどPCとスマホで別URLで作成している場合は、検索エンジンに「このページはPCまたはスマホ向けのURLがある」ということを伝える必要があります。
また、UA(ユーザーエージェント)で判断して、スマホからPCサイトにアクセスがあった場合はスマホサイトへリダイレクトさせるなどの設定も必要となります。
ここでは各設定・記述方法の紹介となります。
※詳しい説明などは他サイト・書籍を見て下さい。

 

「alternate」と「canonical」


TOP
PC向け http://sample.com/
SP向け http://sample.com/sp/

下層ページ
PC向け http://sample.com/test/aaa.html
SP向け http://sample.com/sp/test/aaa.html

例えばこんな感じで、PC向けページとそれに対応するスマホ向けページがある場合、
「このPC向けページに対応するスマホページはコレです」と検索エンジンに伝える必要があるため、
「rel="alternate"」を使って各PC向けページの<head>~</head>内に以下の各1行を追加で記述。

http://sample.com/ に

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

http://sample.com/test/aaa.html に

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

各スマホ向けページの<head>~</head>内には「rel="canonical"」を使って、同様に検索エンジンに
「このスマホページに対応するPCページはコレ」と伝える必要があるため以下を追加。

http://sample.com/sp/ に

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

http://sample.com/sp/test/aaa.html に

<link rel="canonical" href="http://sample.com/test/aaa.html" />

そのPCページのスマホページを用意してないなど、対応するスマホ向けページが無い場合は設定する必要はありません。


 

UA(ユーザーエージェント)で判断してリダイレクト

ここではスマホ(iPhone/Android/WindowsPhone)でPC向けページにアクセスした時、スマホ向けページへリダイレクト(振り分け)させる方法の紹介です。
phpでやる方法などもありますが、ひとまずJavaScriptでのリダイレクト方法となります。
PC向けページの<head>~</head>内の上の方に以下のコードを追加で記述します。


					<script>
					if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Windows Phone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile')){
					location.href = '/sp/';
					}
					</script>
					

「navigator.userAgent.indexOf('〇〇') > 0」で、ユーザーエージェント情報の中に「〇〇」という文字があるか判断してます。
Androidスマホの場合、「Android」と「Mobile」で判断させる必要があります(「Android」だけだとタブレットもOKになる)。
「iPad」などのタブレットは、そこそこ画面が大きいので、逆にPC向けページのままの方が見やすいかもなので、上のコードには入れていません。
またスマホでPC向けページTOP('/')にきた時、スマホ向けページTOP('/sp/')へリダイレクトというような感じで、PC向けページとそれに対応するスマホ向けページにリダイレクトするように設定してください。

 

※クロームのデベロッパーツール(「F12」または右クリックで「検証」)で、デバイス別のユーザーエージェント情報見ることができます。

真ん中のスマホマークみたいなのクリックし、「Network conditions」メニュー内にある「Auto user agent」で表示されている情報が(自動設定された)ユーザーエージェントです。 この中に「〇〇」という文字があるかどうかで判断し、飛び先を振り分けます。 画像は「Apple iPhone 6」の時の状態ですが、画面上部にある「Device」メニューから各デバイスでの表示確認やユーザーエージェントなども見れます。

 

スマホからPCページにアクセス場合は「スマホページへ('/sp/')」リダイレクトできましたが、今度はPCでスマホページにアクセスした時「PCページへ('/')」へいくように設定する必要があります。
スマホ向けページの<head>~</head>内の上の方に以下のコードを追加で記述します。


					<script>
					if (!(navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Windows Phone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile'))){
					location.href = '/';
					}
					</script>
					

スマホ(iPhone/Android/WindowsPhone)じゃない時に「'/'」の方へリダイレクトします。

リダイレクトについて諸々設定完了した後、Googleモバイルフレンドリーテストツールでも一応確認してみてください。


 

モバイルフレンドリーテスト

(1)モバイルフレンドリーテスト

Googleの「モバイルフレンドリーテスト」ツールで、「問題ありません。 このページはモバイル フレンドリーです。」というメッセージが表示されるか確認してください。コレが表示されると、スマホ対応OKです。

「モバイル フレンドリーではありません」という感じで問題がある場合は、「ページがモバイル フレンドリーではないと判断される可能性のある理由」項目に出ている内容を修正してください。 「リンク同士近すぎる」とか「テキスト小さすぎる」みたいなことでエラーになりやすいですが、その他としては、ページにアクセスした時に出てくる画面がほぼ隠れるくらい大きな「インタースティシャル広告」などもエラーになります。

※このツールはサイト単位ではなく、ページ単位のチェックツールです。
※UAでリダイレクトしてる場合は、PC向けページのURL入力してみてください。リダイレクト先のスマホページがチェックされます。

 

(2)「スマホ対応」ラベル

スマホ検索結果画面で、自分のサイトに「スマホ対応」ラベルが付いているか確認してください。

スマホ対応OKなのにラベルなかなか付かない場合は、Googleサーチコンソールの「クロール」メニューの「Fetch as Google」でページをインデックス送信してみてください(1週間くらいかかるかもです)。