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

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

4月16日の夜間に、

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

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

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

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

4月21日からサイトがスマホやモバイル端末でも見やすい表示にしてあるかどうか、Googleが検索結果のランキングを決める要素の1つに追加されるというものです。

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

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

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

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

モバイルフレンドリー対応とは

モバイルフレンドリー対応とは、スマホやモバイル端末でサイズが合わず見づらいホームページを見やすくする対応です。

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

しかし、私の場合、ホームページを作り始めたのが17年ほど前で、その頃から一切脇目も振らずFrontPageという既に廃盤になった古いソフトを使ってホームページを作っています。

昨年からはじめたアフィリエイトサイトも例外ではありません。

17年前のソフトですから当然、スマホ対応という概念は無く、スマホ対応はできていません。

スマホ用のページを作成

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

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

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検索をした場合、スマホ対応したページは「スマホ対応」と表示されるようになります。

関連記事

アフィリエイトをはじめて今月で1年が経ちました。 運よく?アフィリエイト収入も少しづつ伸びてきてやっと2ケタ万円になり、ASP(A8.net)でのASランクもゴールドとなりました。 月額10[…]

アフィリエイトで生計を立てようという考えはやめるべし
関連記事

アーリーリタイア後は、実益を兼ねた趣味としてアフィリエイトを始めました。 そして1日の半分をアフィリエイトに関する作業に費やして1年ちょっと経ちました。 ここ3ヶ月ほどの収入は月額およそ20[…]

アフィリエイトで安定した収入を稼ぐには
関連記事

1年ちょっと前に趣味で始めたアフィリエイトですが、今年は何とか月額15万円ほどをコンスタントに稼げています。 今年は、不誠実なASPさんにも負けず、はたまたGoogleさんから指摘されたPCサイト[…]

アフィリエイトで75万円稼いで株で150万円損してます