スマートフォンサイトを制作してPCサイトとスマートフォンサイトをデバイスによって振り分けるときや、サイトのURLが変わった時にリダイレクト転送する際などに使う.htaccessの書き方についてまとめました。
よく使うけれど、サーバー周りのことはよくわからないので、備忘録につかうコピペ用です。詳しい解説はありません。
- .htaccessとは
- .htaccessファイルの作り方
- ページ単位のリダイレクト
- ディレクトリ単位のリダイレクト
- ドメイン単位のリダイレクト
- 特定のディレクトリをリダイレクトから除外する
- www無しのURLに統一(URLの正規化）
- httpからhttpsへ301リダイレクト
- スマートフォンサイトをデバイスによって振り分ける
.htaccessとは
「htaccess」（エイチティアクセス）とは、現在多くのWEBサーバーで使用されている「Apache」（アパッチ）を制御する設定ファイルの１つで、実際のファイル名は「.htaccess」（先頭がドット）となります。
https://htaccess.cman.jp/sense/
Apache は世界中使われている無料の Web サーバープログラムです。ブラウザで、あるURLのサイトを見るときに.Apacheはそのリクエストをクライアントから（ブラウザ）から受けます。このとき.htaccessファイルがあれば、その設定に基づいた処理を行います。例えば、アクセス制限の設定がなされていたら、403 Forbiddenが返ってくるでしょう。
.htaccessファイルの作り方
.htaccessは普通のテキストエディターで作れます。メモ帳でも作れます。Windowsでは頭に.（ドット）があるファイル名は保存できませんので、「htaccess.txt」という名前で保存しておき、FTPソフトでアップロードするときに「名前を変えてアップロード」します。
.htaccessの最後の行は改行して下さい。
「.htaccess」のパーミッション（属性）は「604」にして下さい。
ページ単位のリダイレクト
あるURLから別のURLへリダイレクトさせたい場合。
RewriteEngine on RewriteBase / RewriteRule old_page.html$ http://exaple.com</new_page.html [R=301,L]
ディレクトリ単位のリダイレクト
ディレクトリ名を書き換える場合。
RewriteEngine on RewriteBase / RewriteRule ^old_dir(.*)$ /new_dir$1 [R=301,L]
ドメイン単位のリダイレクト
ドメインが変わり別のドメインへ移転する場合などで、ディレクトリ構造は同じ場合に使います。
RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_HOST} ^(www.old-url.com)(:80)? [NC]
RewriteRule ^(.*) http://www.new-url.com/$1 [R=301,L]
特定のディレクトリをリダイレクトから除外する
特定のディレクトリはリダイレクトから除外させたい場合。
RewriteEngine on
RewriteBase /
RewriteCond %{REQUEST_URI} !(^/除外ディレクトリ名/)
RewriteRule ^$ http://www.new-url.com/ [R=301,L]
www無しのURLに統一(URLの正規化）
『http://www.hogehoge.com』というwww有りのURLと『http://hogehoge.com』というwww無しのURLで同じコンテンツが表示される場合、URLを『www有り』または『www無し』のどちらかに統一（正規化）できます。
ここでは、サイトのURLをhttp://hogemoge.comとして、
http://www.hogemoge.com（www有り）
http://hogemoge.com（www無し）のURLを統一する方法です。
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.hogehoge\.com
RewriteRule ^(.*) http://hogehoge.com/$1 [R=301,L]
www有りのURLに統一
RewriteEngine On
RewriteCond %{HTTP_HOST} ^hogehoge\.com
RewriteRule ^(.*) http://www.hogehoge.com/$1 [R=301,L]
index.html無しのURLに統一
RewriteEngine On
RewriteCond %{THE_REQUEST} ^.*/index.html
RewriteRule ^(.*)index.html$ http://hogehoge.com/$1 [R=301,L]
index.htmlとindex.phpを統一しindex.html無しのURLに統一
RewriteEngine on
RewriteCond %{THE_REQUEST} ^.*/index.(html|php)
RewriteRule ^(.*)index.(html|php)$ http://%{HTTP_HOST}/$1 [R=301,L]
httpからhttpsへ301リダイレクト
サイト全体をhttps化（SSL導入）する際などにhttpへのアクセスをhttpsへ301リダイレクトする方法です。
以下を.htaccessファイルに記述します。https://example.com/はご自分のドメインに置き換えて下さい。この.htaccessファイルをサーバの適応させたいディレクトリに上げます。ルートに上げると、サブディレクトリ全体にも適応されます。
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]
もしくは
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
上位ディレクトリがhttpsへリダイレクトされるときサブディレクトリを除外する設定
ルートに上げた場合、サブドメインや他のドメインがサブディレクトリにある場合、https化していないサブドメインなども301リダイレクトされ困ったことになります。
そこでサブドメインのリダイレクト除外設定をします。サブドメインのディレクトリに以下の記述をした.htaccessファイルをアップロードします。
RewriteEngine On
RewriteCond %{HTTP_HOST} ^example\.com
RewriteRule ^(.*) http://subdomain.example.com/$1 [R=301,L]
この記述はロリポップのサポートデスクさんに教えていただきました！ロリポップは初心者向けに易しく解説されたヘルプも充実していて.htaccessとかよくわからないという方にもおすすめです！
ロリポップのプラン比較はこちら
blog.minimal-green.com
スマートフォンサイトをデバイスによって振り分ける
レスポンシブではなくスマートフォン専用サイトをサブディレクトリに作った場合、デバイスによって表示するページを振り分ける必要があります。
スマートフォンサイトがPCサイトのサブディレクトリにある場合を考えます。各個別ページのディレクトリ構造はPCと共通です。
PCサイトTOPページ : http://example.com/
SPサイトTOPページ : http://example.com/sp/
PCサイト個別ページ : http://example.com/page.html
SPサイト個別ページ : http://example.com/sp/page.html
PCサイトのあるディレクトリに以下の記述をした.htaccessを置きます。
RewriteEngine on
RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^(.*)$ sp/$1 [R]
RewriteBase /
RewriteCond %{REQUEST_URI} /sp/
RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^sp/(.*)$ $1 [R]
RewriteBase /
スマートフォンサイトもブラウザのURL表示はPCサイトと同じにする場合は、４行目および８行目末尾の [R] を [L] に書き換えてください。
アノテーション：alternateとcanonicalの記述
このままだと検索エンジンにコンテンツの重複と判断される恐れもありますので、urlの正規化を行いましょう。
PCサイトのhead内に以下の記述を入れます。
<!-- PCサイトに記述 --> <link rel="alternate" media="only screen and (max-width: 640px)" href="http://example.com/sp/" /> <link rel="alternate" media="handheld" href="http://example.com/sp/" />
スマートフォンサイトのhead内には以下のように記述します。
<!-- SPサイトに記述 --> <link rel="canonical" href="http://www.example.com/" />
.htaccessの記述はなかなかわかりにくくて覚えられないので、備忘録的にまとめてみました。
参考：htaccessによるデバイス振り分け - Qiita
URLの書き換え / サーバー・プログラム / マニュアル - レンタルサーバーならロリポップ！
htaccessによるデバイス振り分け - Qiita
