Webサイトをリニューアルしてもリダイレクトを設定しないと、旧サイトにユーザーがアクセスした際「404ページ-お探しのページが見つかりません」という画面が表示されてしまいます。
それでは、せっかくサイトを訪れてくれたユーザーが離れてしまいます。
今回は、ユーザーが離れないようにリダイレクトを実装する方法を紹介します。
- リダイレクトの種類
- リダイレクトの実装方法
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
リダイレクトとは
リダイレクトは、サイトのURLが変更される際に元々のサイトURLから新規URLへとユーザーを誘導したい時に利用します。
リダイレクトを設定せずにサイトのドメインを変更してしまうと、今まで貯めてきたSEOの評価を失ってしまいます。
リダイレクトを設定することによりURLが変わったとしても、元々のSEO評価を引きつぐことができます。
リダイレクトの種類
リダイレクトには301リダイレクトと302リダイレクトがあります。
用途に合わせて使い分けられるようになりましょう。
301や302というのは「W3C」が定めるステータスコードの一種で、300番台のステータスコードはリダイレクト（転送）を意味します。
301リダイレクト
301リダイレクトは恒久的な移転を知らせる目的で使うのが適当です。
難しく聞こえるかもしれませんが、古いURLを永遠に使わない時に使用すると覚えておきましょう。
例えば、下記の場合に301リダイレクトを利用します。
- サイトをドメインごと変更
- サイト内の1部を別のページを移動したい
- 重複ページを見せないための対応
www.の有無などで同一のページが表示される場合、googleには重複コンテンツとみなされてしまうのでリダイレクトを実装することが推奨されています。
302リダイレクト
一方302リダイレクトは一時的な転送を知らせる目的で使うのが適当です。
例えば、下記の場合に302リダイレクトを利用します。
- 特定のページのリニューアル
- 条件に応じてリダイレクトを行いたい
リニューアルに関しては一時的な避難場所としてリダイレクトを実装することが想像つくかもしれません。
条件に応じてとは、PCやスマホで表示を分けていたり、国やIPなどの条件に応じて表示を分けたい場合を指します。
そのような条件があるときは302リダイレクトを実装しましょう。
リダイレクトの実装方法
具体的には3種類のリダイレクト方法があります
- .htacces
- meta
- JS・PHP
実装方法がそれぞれ異なるので、順番に紹介します。
.htaccess
まず、.htaccessファイルを使う上での条件をを紹介します。
下記の条件が揃っていない方は別の方法で実装しましょう。
- Webサーバーが「Apache」であること
- Webサーバー上で「.htaccessファイル」を利用できること
自分でサーバーを準備しておらず、レンタルサーバーを利用している方は確認してから次に進みましょう。
実装方法はとても簡単で.htaccessファイルを作成しサーバーにアップすれば完了です。
.htaccessファイルを複数設置する事も可能です。
しかし、内容が重複している場合は下層ディレクトリ内の.htaccessファイルの記述が優先されます。
.taccessファイルのサンプル
RewriteEngine On
# ページ単位で移動
RewriteRule ^index-old\.html$ https://〇〇/index-new.html [R=301,L]
# www無しのURLに統一
RewriteCond %{HTTP_HOST} ^www\.〇〇\.com
RewriteRule ^(.*) http://〇〇.com/$1 [R=301,L]
# www有りのURLに統一
RewriteCond %{HTTP_HOST} ^〇〇\.com
RewriteRule ^(.*) http://www.〇〇.com/$1 [R=301,L]
# index.html無しのURLに統一
RewriteCond %{THE_REQUEST} ^.*/index.html
RewriteRule ^(.*)index.html$ http://〇〇.com/$1 [R=301,L]
# httpをhttpsに統一
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]今回は実装する機会が多い5パターンをサンプルとして載せています。
ドメインや状況に応じて使い分けられるようになりましょう！
上記を記述しても実装できない場合は、以下の点を確認しましょう。
改行ははいっていますか？
.htaccessファイルの最後の行の末端に改行が入ってない場合エラーになります。
改行は複数入っていても大丈夫です。
改行ははいっていますか？
.htaccessファイルで指定したパスは正しく記入されているかどうか確認してみましょう。
レンタルサーバーの仕様は確認しましたか？
レンタルサーバーによって.htaccessファイルの仕様が異なります。
meta
次はmetaタグの記述でリダイレクトを実装する方法を紹介していきます。
metaタグを利用するとhead内に1行追加するだけで、リダイレクトを実装できます。
そのため、非常に簡単で非エンジニアの方でも手軽に実装ができます。
しかし、ブラウザが1度ページを読み込む必要があるため、処理に時間がかかってしまいます。
googleのSEOに関しての仕様が明らかになっていないので、確かではありませんがSEOへの影響があると言われています。
GoogleはWebサーバーに指示を出すリダイレクト（.htaccess）をお勧めしています。
metaタグのリダイレクトは下記の際にとても力を発揮します。
- ECサイトの購入画面からホームページに戻る際
- 数時間の間だけ、リダイレクトを実装したい時
実装する機会は少ないですが、エンジニアとして引き出しが増えることはいいことです。
頭の片隅には入れておきましょう。
metaリダイレクトサンプル
<meta http-equiv="refresh" content="5;URL="index-new.html">content="5"の記述により、5秒後にリダイレクトを実行することが指示されています。
URL="index-new.html"によりindex-new.htmlへとリダイレクトすることが指示されています
JS・PHP
最後にJSやPHPを使ったリダイレクトを紹介していきます。
JavaScriptサンプル
<script>
setTimeout("location.href='index-new.html'",1000*5);
</script>PHPサンプル
<?php
header('Location: https://techacademy.jp/');先程のmetaタグの利用と同じくらい実装は簡単です。
JavaScript、PHP共に１行のみで実装することができます。
しかし、GoogleはJavaScriptの実装もPHPの実装もおすすめしていません。
理由は先程と同様で、どちらも301（302）リダイレクトとは認識されないのです。
まとめ
今回はリダイレクトについてと実装方法を解説しました。
理解するのが1番大変なものは「.htaccessファイルによる実装」です。
しかし、長年積み重ねてきたSEOの評価がなくならないように、しっかりとリダイレクトを理解して実装しましょう。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
