Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

よく使う.htaccessの書き方まとめ 301リダイレクト

f:id:syofuso:20170408210312j:plain
スマートフォンサイトを制作してPCサイトとスマートフォンサイトをデバイスによって振り分けるときや、サイトのURLが変わった時にリダイレクト転送する際などに使う.htaccessの書き方についてまとめました。
よく使うけれど、サーバー周りのことはよくわからないので、備忘録につかうコピペ用です。詳しい解説はありません。

.htaccessとは

「htaccess」(エイチティアクセス)とは、現在多くのWEBサーバーで使用されている「Apache」(アパッチ)を制御する設定ファイルの1つで、実際のファイル名は「.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]

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]

上位ディレクトリがhttpsへリダイレクトされるときサブディレクトリを除外する設定

ルートに上げた場合、サブドメインや他のドメインがサブディレクトリにある場合、https化していないサブドメインなども301リダイレクトされ困ったことになります。

そこでサブドメインのリダイレクト除外設定をします。サブドメインのディレクトリに以下の記述をした.htaccessファイルをアップロードします。

RewriteEngine On
RewriteCond %{HTTP_HOST} ^example\.com
RewriteRule ^(.*) http://subdomain.example.com/$1 [R=301,L]

この記述はロリポップのサポートデスクさんに教えていただきました。
design.syofuso.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サイトと同じにする場合は、4行目および8行目末尾の [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