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

関連記事

時給が2年で100倍になりました。継続は力です。

今から2年ちょっと前、リタイア後の趣味とちょっとしたお小遣い稼ぎ、また将来のインフレなどのリスクに備

記事を読む

アフィリエイトで節約生活

リタイア後に趣味で始めたアフィリエイト収入が少しづつ増えてきています。 今、私がやっているアフ

記事を読む

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

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

記事を読む

アフィリエイトで月額50万円稼ぐのはそんなに簡単ではない

最近は、アフィリエイトに集中してブログの更新に割く時間があまりとれなくなりました。 仕事を辞め

記事を読む

アーリーリタイア生活、2017年の資産減少額

こんにちは有栗です。 今年はアーリーリタイアをして5年目を迎えます。 お蔭様で今のところ

記事を読む

リタイア組には死活問題!2015年の資産の増減総括!

あっという間に1年が過ぎました。 この時期になると皆んなが口を揃えてそういうように私も実感して

記事を読む

資産運用での損失分、アフィリエイトでやっと50%回収

円高・株安の進行で先週までに運用していた株や投資信託などを全て売却・解約したのは前回のブログでも書い

記事を読む

アフィリエイト収入の確定申告(白色)

14年ぶりに自分で確定申告をしました。 おぼろげな記憶ですが、14年前は税務署に開業届と青色申

記事を読む

アーリーリタイアして後悔していること

こんにちは有栗です。 最近、急激な視力の低下を感じているので、外

40年目の再会!人はこうも変わるのか?

先日、親戚に不幸があり、葬式に行ってきました。 久しく会

終わった人を読んでわかった私が快適なアーリーリタイア生活を送れる理由

就寝する前の30分ほどを読書の時間にあてています。ベッドの上で

事業を譲渡するという話がきたが。

こんにちは有栗です。 先日、近くの商店街を歩いていると、

スペシャルな血液検査を受けました!その結果は?

先日、ノコギリヤシの副作用で筋肉痛?横紋筋融解症って? という

PAGE TOP ↑