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

関連記事

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

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

記事を読む

アーリーリタイア後はアフィリエイトでセミリタイア生活

アーリーリタイア後は趣味としてアフィリエイトを選択し、小遣い稼ぎをしながらセミリタイア生活を

記事を読む

セミリタイア生活。持ち株暴落で労働時間を増やしてみることにした!

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

記事を読む

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

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

記事を読む

ASPからのオファー

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

記事を読む

セミリタイア生活初。アフィリエイト収入の確定申告(白色)

14年ぶりに自分で確定申告をしました。 おぼろげな記憶ですが、サラリーマンを辞めて自営業を開始

記事を読む

最近のアフィリエイト収入やこれからやろうとしていることを少し書いてみます

久しぶりにアフィリエイトについて書いてみようと思います。 リタイア後の趣味、暇つぶし、

記事を読む

時給が850円から4000円に跳ね上がったセミリタイア生活

こんにちは、有栗です。最近はめっきり寒くなってきましたね。 今日はアフィリエイトネタです。

記事を読む

無責任な投資の勧めはやめて頂きたい

最近は、投資信託などの積極的な資産運用は控えています。

ブログ村の新着記事に反映されない事象

当サイトは、「にほんブログ村」というブログランキングサイト

子供の存在が老後のリスクに

お金、健康、孤立は老後の三大リスクと言われていますが、近年

はとバスツアーで日光東照宮の旅

久しぶりに紅葉でも見ながらのんびりしたいと思い、先週末から

ブログの表示速度をアップ。作業効率を上げるのも節約の一つ

久しぶりにこのブログを管理しているレンタルサーバーを変更し

PAGE TOP ↑