PCサイトのスマートフォン(モバイル フレンドリー)対応

4月16日の夜間に、

重要: Google 検索でモバイル向けかどうかが重視されるようになります。」

という件名のメールがGoogleから送られてきました。

モバイルフレンドリーチェックサイト

4月21日からGoogle 検索ランキングを決める要素の1つに、サイトがモバイル向けかどうかが加味されるというものです。

つまり、作ったサイトがモバイル(スートフォンなど)でも見やすいかどうかをGoogleで判定し、基準をクリアできない場合は検索結果の順位を落としますよ、といった内容です。

私が運営しているアフィリエイトサイトでもかねてからスマホ対応は気になっていましたが、実際、スマホ対応しなくてもスマホからの売上が半分以上発生していたため対応不要とばかりに全く手をつけていませんでした。

確かにスマホで見ると文字が小さく、読み取れるようにするには、ダブルタップしたり、ピッチアウトさせたりする必要があり、手間です。

Googleからも正式に上記のようなメールが来たこともあり、今回は重い腰を上げてスマホ対応することにしました。

PCサイトのスマートフォン(モバイル フレンドリー)対応

WordPressで作ったこのサイトもそうですが、今どきのブログやホームページ作成ソフトでは、特にモバイルサイトというものを意識しなくても自動的にモバイルに対応したページも作ってくれます。

しかし、私の場合、ホームページを作り始めたのが15年ほど前で、その頃から一切脇目も振らずFrontPageという既に廃盤になった古いソフトを使ってホームページを作っていますので、アフィリエイトサイトはスマホ対応が全くできていません。

15年前のソフトですから当然、スマホ対応という概念は無い訳です。

スマホ用のページを作成

そこで、面倒ですが、全てのページでスマートフォン用ページを別に作ることにしました。

スマートフォン用ページの作成と言っても、技術的には普通のウェブサイトの作成と何ら変わりはありません。

PC用ページとは別にスマホ用の小さい画面に合わせるべく、閲覧しやすいようにフォーマットや画像の大きさを修正・調整しながらスマホ用ページを作成します。

(例)

下記のPC用サイト(ページ)を持っていた場合、
http://www.test.com/a.html
http://www.test.com/b.html

それぞれ、下記のスマホ用ページを作成します。

http://www.test.com/smaho/a.html
http://www.test.com/smaho/b.html

スマホ用のページは任意の名前で自由に作ることが可能です。

スマホ用のページを作成したらモバイル対応できているかどうかがチェックできるサイトでチェックし、必要に応じて修正を加えていきます。

リダイレクト設定

スマホ用のページが問題なく作成できたら、スマートフォンなどからアクセスされた際にスマホ用のページにリダイレクト(飛ばす)する設定をします。

すなわち、PCからアクセスがあった場合は、そのまま、
http://www.test.com/・・
を表示し、スマホなどからアクセスがあった場合は、スマホ用のページ
http://www.test.com/smaho/・・
を表示するよう設定します(リダイレクト)。

リダイレクトは、.htaccessで行います。

RewriteEngine on
RewriteCond %{REQUEST_URI} !/smaho/
RewriteCond %{HTTP_USER_AGENT} (ipod|iPhone|Android.*Mobile|Windows.*Phone)
RewriteRule ^(.*)$ smaho/$1 [R]RewriteBase /

この設定でスマホからPC用のURLにアクセスがあった場合は、スマホ用のURLに自動的にリダイレクトされます。

但し、この時点で同じ内容のページがPC用とスマホ用で2つづつ存在することになります。Googleにこれらが重複したコンテンツではないことを知らせるために次の2つのタグを記述します。

link rel=”alternate”タグの使用

Googleにスマホ用のページが別に存在することを伝えるタグです。

PC用ページ(http://www.test.com/a.html)のHTML(ヘッダー部分)に、

<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://www.test.com/smaho/a.html”>

と記載します。複数ページあれば全てのページに記載します。

これにより、検索エンジン(Googlebot)に、「http://www.test.com/smaho/a.html」は、
「http://www.test.com/a.html」
の代替コンテンツであることを認識させることができます。

link rel=”canonical”タグの使用

スマホ用ページ(http://www.test.com/smaho/a.html)のHTML(ヘッダー部分)に、

<link rel=”canonical” href=”http://www.test.com/a.html”>

と記載します。複数ページあれば全てのページに記載します。

これによって、検索エンジン(Googlebot)に、「http://www.test.com/smaho/a.html」は代替えページで、「http://www.test.com/a.html」
が代表するページであることを認識させることができます。

以上で対応は終了です。

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

ちなみに、モバイル対応できているかどうかがチェックできるサイトが用意されていますので、確認してみることに。

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

問題ありません。このページはフレンドリーです

と表示されます。

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

この状態でしばらくすると、スマホでGoogle検索をした場合、スマホ対応したページは「スマホ対応」と表示されるようになります。


セミリタイア生活