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

関連記事

アフィリエイト収入だけで生活ができるのか

アフィリエイトをはじめて今月で1年ほどが経ちました。 運よく?収入も少しづつ伸びてきてやっと2

記事を読む

ASPからのオファー

アフィリエイトをはじめて10ヶ月ほどが経ちます。 現在、2つのASP(アフィリエイトサービスプ

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

ブログで収入を得るならWordPressがおすすめ

1ヶ月ほど前になりますが、無料ブログツールを提供しているseesaaがGoogleの検索結果から除外

記事を読む

リタイア生活、毎日が辛い?

こんにちは。有栗です。 随分暖かくなってきました。春、ですね。 早いものでリタイアしても

記事を読む

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

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

キャリアのスマホ月額料金も格安スマホ並みに!

新年、おめでとうございます。 2018年がスタートしました。

ブラック企業を辞めることを思い留まる理由

今年もまた幸せな1年を過ごすことができました。 唯一気が

人生100年時代になるとリタイア組は破綻!

こんにちは、有栗です。 もうすぐ今年も終わります。本当に1年が早

環境が性格を変える?それとももともとの性格?

こんにちは。有栗です。 今年も残すところ10日ほどとなりました。

PAGE TOP ↑