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

関連記事

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

久しぶりにこのブログを管理しているレンタルサーバーを変更しました。 興味のある人はほぼ

記事を読む

稼ぐことよりも、快適なセミリタイア生活を送ることが優先

アフィリエイト用に作っているサイト(仮称:サイトA)が、10月に「サイトへの不自然なリンク」というペ

記事を読む

ASPからのオファー

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

記事を読む

セミリタイアしましたが開業届を出してきました。

リタイアしておよそ3年。 リタイア後に始めたアフィリエイトの収入が多くなってきましたので、一応

記事を読む

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

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

記事を読む

リタイア後はじめての仕事っぽい打ち合わせ

アーリーリタイアした後に趣味と実益を兼ねて始めたアフィリエイトが運よく順調に推移しています。

記事を読む

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

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

記事を読む

アフィリエイトの儲けは株価暴落に全てもっていかれました!

こんにちは、有栗です。 いやぁ、株の暴落、円高、凄かったですね。 やっと下げ止まった感は

記事を読む

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

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

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

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

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

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

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

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

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

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

PAGE TOP ↑