別URLでスマホ専用サイトを作った場合に、SEOのためにも必ずやっておくべきこと。


今日はあまり天気が良くないので朝からブログ。
普段の仕事でできないこととかやってます。

昨日ブログに書いた「全国スタンプラリー」ですが、
スマホ用サイトはあるもののモバイルフレンドリーではありません。
こんな基本的なことも対応できていない!といまさら気づき、ちゃんとやっておこうと思います。
モバイルフレンドリーテスト
サイトが、モバイルフレンドリーかどうかを調べたい場合は、
ここでチェックできます。
モバイルフレンドリーテスト

今日の話はここらへんが関係ありますのでよかったらどうぞ。
Googleの検索順位でスマートフォン対応がますます重要に!モバイルファーストインデックスを知っておこう。

つまり、ユーザーにとってもSEOとしてもスマホ対応は大切です。
なんちゃってスマホ対応をしている人も多いので、きちんと上のツールでスマホ対応されているかどうか知らべておきましょうね。

スタンプラリーのサイトについてはレスポンシブではなく、スマホ対応サイトを別で用意しています。
特にこういった使ってもらう系のサイトは、パソコンの前で見る場合とスマホで見る場合では見ている環境が違います。
パソコンの前で見るときは、来週の旅行はどこ行こうかなぁとか計画を立てていることが多いでしょう。
スマホで見るときは、実際に旅行先で近くのスポットを探したりスタンプを押したりということをしてるはず。
なので、スマホサイトは別で用意しているんですが、
レスポンシブの場合はそれぞれのページはPCとスマホで共有しているので特に設定などは必要ありません。
だけど、PCとスマホのサイトを分けた場合はちょっと違って、各ページに対応するスマホエージをGoogleに伝えないといけません。
逆にスマホページに関しても、その対となるPCページを伝える必要があります。
具体的にはPCとスマホのページの双方のURLの関係を明確にすることです。
レスポンシブサイトが増えてきたので、PCとスマホを分けることは減ってきましたが、
だからこそ分けたときにきちんとモバイルフレンドリーに対応していないということが多くなります。
パソコンとスマホのサイトを分けている場合のモバイルフレンドリーの対応について紹介します。

パソコンページとスマホページの関係を設定

まず1つ目は、
「パソコン用のこのページはスマホではこのページにあたりますよ」
ということを伝えます。

<link rel="alternate" media="only screen and (max-width: 768px)" href="https://sp.mission-p.com/" />

スタンプラリーのサイトを例に書きました。
alternateはそのページ関連するページを定義します。
この場合、
max-width:768px
768pxまでの画面ではその後に書かれたスマートフォン用URLが対応していますよということをGoogleに伝えています。

ここではスマートフォン用という言い方で説明していますが、タブレット用とかその他のデバイス用にそれぞれページを用意しているのであれば、それぞれの解像度などで一つ一つ設定します。

スマホページとパソコンページの関係を設定

次はさっきの逆ですね。
次はこんな感じで書きます。

<link rel="canonical" href="https://mission-p.com/" />

それぞれのスマホページはそれぞれ同じようなパソコン用のページが存在します。
canonicalではスマホページに対しておおもとのURLはここですよという指定をしています。
ルールとして覚えてしまえばいいのですが、
このcanonicalは重複する同じようなページがGoogleによって評価が分散されないようにするためのものです。
例えば、商品の一覧で値段順や名前順などで別々にページを用意したときに、
書かれている内容はほとんど変わらないのでGoogleとしては評価を分散させてしまいます。
SEO的にはよろしくない。
これを解決するために、代表的な1つのページを決めて、残りはcanonicalで代表ページを指定して正当な評価にしてもらう。
PCとスマホのページが別々に用意されている場合も同じで、内容は同じようなものだけれど見せ方が違うだけだったりするので、評価を正確にしてもらうために対応するページをcanonicalで正規化しているのです。

301リダイレクトを使って自動的に転送

Googleに対する設定はこれでいいですが、スマホで見たときに自動的にスマホ用ページに転送させたい。
そのためには301リダイレクトというものを使います。
調べると302リダイレクトを使うと書かれているページもありますが、Google的にはどちらでも正しく評価してくれるそうです。
301に統一でいいという流れがありますので、ここでは301で紹介しています。
リダイレクトの設定方法はいずれ別で書きたいと思いますが、
.htaccessというファイルを用意して、以下のように記述します。

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^(.*)$ https://sp.mission-p.com/$1 [R=301,L]

.htaccessでのリダイレクトはいろいろなことができるので、
一概にこれっていう説明では中途半端なのでそのうちきちんと書きたいと思います。

外部サイトですが、このあたりを見てもらうといいかもしれません。
個人的な備忘もかねて。
301リダイレクトの設定方法(海外SEOブログ)
.htaccessを使った301リダイレクト記述方法
.htaccessでPC・スマートフォンの振り分け転送

以上の3つをやってみたら、
モバイルフレンドリーテストで合格するか改めてチェックしてみてください。

スタンプラリーは無事モバイルフレンドリーとなりました。
モバイルフレンドリーテスト