最短テンプレート|スマホサイト作成正しいリダイレクトの方法

MENU

スマホ最適化.htaccessファイルで正しいリダイレクト

このページでの作業

このサイトでの解説は、5ページのPC版サイトが完成していて、そのサイトに対応する
スマホ版サイトの作成方法についてご説明します。(スマホ版も5ページ)

 

このページではスマホサイトのテンプレートの準備と、ページごとに対応した正しい
リダイレクトをさせるための.htaccessファイルをダウンロードして頂きます。

 

そのあとスマホテンプレートと共に、.htaccessファイルPCサイトにセットする方法
までを解説します。尚、スマホテンプレートのセットフォルダに準備されている
.htaccessは今回利用しません。

 

テンプレートの準備

 

.htaccessファイルとスマホテンプレートを、完成したPCサイトのテンプレートに入れる。

スマホテンプレート

自分で更新できるスマホサイト用テンプレートのsumaho1フォルダをデスクトップ上にコピーし、
フォルダsumaho1をspにフォルダ名を書き換えます。

 

次に.htaccessファイルをダウンロードして下さい。
.htaccessファイルのダウンロード−1

 

ダウンロードされるファイルはzipです。解凍後.htaccessファイルはフォルダの中に
入っていますので、取り出してデスクトップ上に置きます。zipが解凍できない場合は
こちらをダウンロードして下さい。解凍ソフト・・・・・Lhaplus

 

 

 

スマホテンプレート

名前を書き換えたspスマホフォルダとダウンロードして頂いた、.htaccessファイルを、PC用のテンプレート
フォルダの中に入れます。

 

これでテンプレートの配置が完了しました。PCサイトのフォルダにスマホのspフォルダを入れたので、スマホのURLは、http://ドメイン/spとなります。

 

スマホテンプレートのファイルは、page3.htmlまでなので、PCサイト同様にpage5.htmlまで作成します。

 

次の作業・・・・・スマホテンプレート内のページ数をPCと同じにするにすすむ。

 

スマホ最適化.htaccessファイルとは

 

スマホの各ページをPCサイトにそれぞれ対応させる.htaccessファイル

今回ダウンロードして頂いた.htaccessは、下記画像のように、PCサイト、スマホサイト
それぞれの対応したページに訪問者をリダイレクトさせます。

 

リダイレクト

 

PCサイトからのアクセスはPCサイトに、スマホからのアクセスはスマホサイトに飛ばす。
これをリダイレクトと呼びます。

 

テンプレートに付属の.htaccessはすべてトップページに飛ぶ仕様になっています。
それでは、なぜこのようにそれぞれページを対応させる必要があるのでしょうか?

 

検索というシステムはもともと、検索者のキーワードによって、それに対応したページが
検索結果として表示されます。検索のすべてがトップページを表示してる訳ではないです。

 

スマホ検索でも訪問者がキーワード目的のページを開けるという事が大切になります。
それがすべてトップページに飛ばされてしまうと、その訪問者さんは、トップページから
目的のコンテンツを探す必要がでてきます。

 

これではキーワード検索の意味がなく、ユーザビリティに欠けるとグーグルは判断します。
このような事から、スマホ検索のリダイレクトでは、それぞれPCサイトに対応したページに
訪問者さんを飛ばす必要があるという事です。

 

グーグルの見解・・・・・グーグルデベロッパーズ

 

そもそも.htaccessファイルとは何者か!

私達が借りているレンタルサーバーは、一般的に共有であり、サーバーの一部分を
間借りしています。サーバー全体のシステムの管理はまとめて運営会社が設定している事に
なります。この状況では自分の都合だけでシステムの仕様を変更してもらうわけにはいきません。みんなで使っているわけですから。

 

こんな場合に個人的にサーバーのシステムを動かすのが、.htaccessファイルです。
今回のリダイレクトもそうですが、サイトにパスワードをかけたりですとか、
URLの統一(wwwの有り、無し)などをこのファイルでコントロールできます。

 

ちょっとズレた例ですが、NTT回線のフレッツ・テレビでまとめて受信している共同住宅で、自分の部屋だけJCOMを申請するようなものです。この申請書類が.htaccessです。
知っていると何かと役に立つファイルなので、ググって見て下さい。

 

.htaccessファイルの中身を解説します。

(解説のために番号を記述していますが実際のファイルにはありません。)

---------------------------------------------------------------------------
@Header set Vary User-Agent

 

ARewriteEngine on

 

BRewriteCond %{REQUEST_URI} !/sp/
CRewriteCond %{HTTP_USER_AGENT}
(iPod|iPhone|iPad|Android|Windows\ Phone)

DRewriteRule ^(.*)$ sp/$1 [R]
ERewriteBase /

 

FRewriteCond %{REQUEST_URI} /sp/
GRewriteCond %{HTTP_USER_AGENT}
!(iPod|iPhone|iPad|Android|Windows\ Phone)

HRewriteRule ^sp/(.*)$ $1 [R]
IRewriteBase /
---------------------------------------------------------------------------

 

@ Header set Vary User-Agent
クローラー(googlebot)に正しくサイトを判断させるための記述

 

インターネットではキャッシュと呼ばれる、サイトの表示を軽くのシステムがあります。
一時的にサイトのデータを別の場所に保存しておき、別のアクセスがあった場合に
その保存したダータを返すことで、ダウンロードの時間を削減しているという事です。

 

キャッシュのシステムで起こる問題

 

A サーバーの動的リダイレクトでの問題

 

最短ホームページテンプレートスマホサイト作成で考えると、同じURLでPCサイトと
スマホサイトを動的(リダイレクト)に操作しています。

 

この場合PCからのアクセスがキャッシュされている場合はどうなるでしょう。
その後にスマートフォンからのアクセスがあった場合、PCでアクセスしたキャッシュ
スマホに返してしまう事が考えられます。

 

これはデバイスの判別がされずに、そのままPC向けのページがスマホに
返されてしまう可能性があります。

 

B クローラーの問題

 

上記のAと同じ理由で、PCサイトをgooglebotがクロールすると、これをキャッシュし
データデースに登録します。

 

次にスマホサイトのクローラーが巡回した場合に、前にキャュシュしたPC用のデータを
スマホのクローラーに返すことになります。こうなるとスマホのクローラーが
PCサイトのコンテンツをインデックスしてしまう可能性が出てきてしまいます。

 

このような事を防ぐために、Vary HTTPヘッダーが必要になります。

 

Vary HTTPヘッダーは、サーバーが訪問者の環境によって、コンテンツを出し分けて
いますっていう情報をクローラーに与えています。

 

つまりスマホアクセスとPCアクセス、両方のコンテンツがある事をクローラに
判断させているという事です。

 

しかし現在のクローラーは、PC、スマホ兼用になり、googlebotに統一されました。
今までのモバイル用クローラーはガラケー専用になっています。

 

しかしこのVary HTTPヘッダーの存在がマイナスに働く事がないため、
念のため記述しておくことは正解だと思っています。

 

グーグルのマット・カッツ氏の解説

Vary User-Agentの必要性

 

A RewriteEngine on
URLの書き換えを実行します。

 

今回の場合のRewriteは、スマホかPCのアクセスによって、それぞれのデバイスに
最適なURLに書き換える事を意味しています。onは機能を実行するという事です。

 

B RewriteCond %{REQUEST_URI} !/sp/
リクエストしたURLに /sp/ が含まれていない場合で、、

 

C RewriteCond %{HTTP_USER_AGENT}
(iPod|iPhone|iPad|Android|Windows\ Phone)

ユーザーエージェントにiPhone、Android等が含まれる場合は、、

 

D RewriteRule ^(.*)$ sp/$1 [R]
ファイル名の前に sp/ を足したURLに書き換える。

 

E RewriteBase /
基準となるパスを指定するもので今回は「/」を記述しているので、ルートを表します。

 

ユーザーエージェントがスマホの場合、ファイル名の前にsp/を追加するという処理
スマホのアクセスで表示がhttp://ドメイン/sp/となる。

 

F RewriteCond %{REQUEST_URI} /sp/
リクエストしたURLに /sp/ が含まれている場合で、、

 

G RewriteCond %{HTTP_USER_AGENT}
!(iPod|iPhone|iPad|Android|Windows\ Phone)

ユーザーエージェントにiPhone、Android等が含まれない場合は、、

 

H RewriteRule ^sp/(.*)$ $1 [R]
URLから sp/ を取り除く処理をする。

 

I RewriteBase /
基準となるパスを指定するもので今回は「/」を記述しているので、ルートを表します。

 

URLに/sp/を含みスマホではない場合、URLからsp/を取り除くという処理
PCのアクセスで表示がhttp://ドメイン/となる。

.htaccessのまとめ

この.htaccessファイルをルートに置く事で、クローラーのインデックスを正しく行わせ、
またUA(ユーザーエージェント)に対して、URLを書き換え、それぞれのディバイスに
あったリダイレクトをさせるという意味です。

 

スマホ検索での検索結果の表示URLをパソコンのURLにする方法

ダウンロードして頂いた.htaccessファイルを書き換えます。
上記に記載した.htaccessの5列目と9列目
D RewriteRule ^(.*)$ sp/$1 [R][L]
H RewriteRule ^sp/(.*)$ $1 [R][L]
2っとも[R][L]に変更します。

 

この変更で、スマホの画面でも、/spが取り除く事ができ、実質PCのURLが表示されます。

 

.htaccessファイルの書き換えの注意点として、空白を入れないようにして下さい。
行の終わりは改行とし、当然行頭にも空白が入らないようにします。空白が入った場合、
まったくファイルが機能しない場合があります。

 

.htaccessにコメントタグを記述する方法

コメントタグを入れる場合は、頭に[#]を記述します。この場合は改行を必ず入れます。
改行を入れずコメントする場合は、"# この部分にコメントを書きます。"

 

# URLに /sp/ が含まれていない
RewriteCond %{REQUEST_URI} !/sp/

 

RewriteCond %{REQUEST_URI} !/sp/"# URLに /sp/ が含まれていない"

 

.htaccessファイルは少しでも記述ミスがあるとまったく動きませんので、
取り扱いには十分慎重に作業するようにして下さい。

 

次の作業・・・・・スマホテンプレート内のページ数をPCと同じにするにすすむ。