PCサイトのスマートフォン対応

公開日: : 趣味のアフィリエイト

先日、Googleから届いた、

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

を受けて、実際、以下の対応をとりました。

スマホ用ページの作成

スマートフォン用ページの作成と言っても、技術的には普通のウェブサイトの作成と何ら変わりはありません。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検索をした場合、スマホ対応したページは「スマホ対応」と表示されるようになります。

 

セミリタイア生活

google-koukoku-pc

関連記事

アフィリエイト収入がスパムを受けて激減

アーリーリタイアした後に趣味と実益を兼ねてアフィリエイトをやっています。 そのやり方にはいくつ

記事を読む

セミリタイア生活、5月の収支結果!

資産運用分を全て解約してからは株や為替などの動向に振り回されることなく、地道にアフィリエイトで稼ぐこ

記事を読む

アフィリエイト活動を開始して9ヶ月

昨年の夏にアフィリエイトをはじめておよそ9ヶ月が経ちました。 アーリーリタイアに踏み切ったのが

記事を読む

エクストリムからロリポップへWordPressを移行する手順(備忘録)

このブログを書き始める時、当ブログのサーバーは、「エクストリムレンタルサーバー」という業者からレンタ

記事を読む

持ち株暴落で働いてみることにした!

ここのところの株価下落に加えて日銀のマイナス金利導入で保有している銀行株が恐ろしいほど下落してしまい

記事を読む

これからはアフィリエイトで小遣い稼ぎが困難になっていきます!

アフィリエイトをしている人であればご存じの方も多いと思いますが、昨年の12月にGoogleから「医療

記事を読む

アフィリエイトをするにあたりこだわっていること

先月、初めてアフィリエイトでの収入が月額30万円を超えました。 7月に一度30万円を超えました

記事を読む

アフィリエイトの実態を調査した

アフィリエイトの実態が知りたくて調べてみました。 検索をかけると、「日本アフィリエイト協議会」

記事を読む

定年後も働きたいの割合が80%!

妻のパート先(以前、私が勤めていた会社の子会社)では、毎年のよ

軍隊と言われたブラック企業からやっと転職

ちょっと前の6月中旬頃になりますが、東京で働いている息子から転

リタイアしてるのに1食9000円は高くね?

これまでパートタイマーには支給されなかったボーナスが今年は支給

大金持ちになるには株しかない?

暑くなりました。 今日は朝から妻が美容院と歯医者に行くと

自分で髪切ったらミスってスキンヘッドに!

こんにちは有栗です。 久しぶりやってしまいました! いつも

PAGE TOP ↑