Web制作ノウハウ

Web担当者になったら知っておきたいリダイレクトの知識

WRITERネオディレクター

  • TOP
  • ブログ
  • Web担当者になったら知っておきたいリダイレクトの知識

SAHRE

Webサイトのリニューアルやページ構成の見直しなどで、ページのURLが変わってしまうことってあるかと思います。そんなときに必要になってくるのが「リダイレクト(ユーザーを別のページへ誘導すること)」です。
本ページでは、そんな「リダイレクト」の具体的な方法や、設定することによるメリット、また気をつけたいことについて解説していきます。

もくじ

  1. リダイレクトとは?
    • リダイレクトには「301リダイレクト」「302リダイレクト」がある
  2. どうやってするの?(リダイレクトの種類)
    • .htaccessを使ったリダイレクト
    • その他のリダイレクト方法(meta、php、JavaScript)
  3. リダイレクト時の具体的な記述例
    • .htaccessを使ったリダイレクトの場合
    • その他のリダイレクト方法(meta、JavaScript、php)の場合
  4. リダイレクトさせるメリット
  5. リダイレクトで気をつけないといけないこと
  6. まとめ

リダイレクトとは?

リダイレクトとは?

リダイレクトは直訳しますと「向け直す」という意味で、なんらかの理由で、アクセスされたページとは異なる別ページにユーザーを誘導したいときに利用するものです。
一般的によく利用される場面としては、以下のように、サイトのアクセスURLが変わったときです。

  • サイトをリニューアルしてドメインが変わった
  • サイトをリニューアルしてサイト構成が変わった(ページの削除や移転を含む)
  • URLの正規化(wwwあり、なし等の統一)をしたいとき

上記のような場合に、リダイレクトさせることで、ユーザーに404ページ(お探しのページがみつかりません)という画面を表示させることなく、ユーザーを正しいページへ導くことができます。

リダイレクトには「301リダイレクト」「302リダイレクト」がある

前述のとおり、リダイレクトはユーザーがアクセスしたページとは異なるページに誘導することですが、一時的に異なるページに誘導することもあれば、永続的に誘導したい場合があるかと思います。
リダイレクトする場合も、このリダイレクト期間に合わせて、以下2種類を使い分けるべきとされています。

  • 301リダイレクト(旧ページから永続的に転送する設定)
  • 302リダイレクト(旧ページから一時的に転送する設定)

一時的というのは、数日~1週間程度の短い期間のことを指し、例えば、ページのメンテナンス中に、TOPページやお知らせページに遷移するような使い方です。評価の引き継ぎまでに要する時間が、301リダイレクトの方が短いため、永続的にリダイレクトさせる場合は、301リダイレクトさせるようにしましょう。

どうやってするの?(リダイレクトの種類)

どうやってするの?(リダイレクトの種類)

では次に、具体的にどういったリダイレクト方法があるのか解説していきます。

.htaccessを使ったリダイレクト

リダイレクトさせる方法として、よく利用されるのが「.htaccess(ドット・エイチティアクセス)」を使ったリダイレクト方法です。

「.htaccess」ファイル自体は、メモ帳のようなテキストエディタで書くことができるテキストファイルで、「.htaccess」というファイル名でサーバにアップロードし、リダイレクトさせます。
「.htaccess」はファイルを設置したディレクトリ配下に適用されますが、ディレクトリごとに設置することも可能です。また、「.htaccess」ファイルが各階層にまたがって複数ある場合は、下位ディレクトリの設定が最優先されます。
一部の下層ページだけ処理を変更したい場合は、その下層ページが属するディレクトリに「.htaccess」ファイルを設置して、処理を変更してください。

なお、「.htaccess」はすべてのサーバ環境で利用できるわけではありませんので、ご注意ください。以下参考として、利用条件も掲載しておきます。

<参考情報:「.htaccess」の利用条件>

「.htaccess」を利用するにも、利用条件が揃っている必要があります。それが以下2点です。

  • Webサーバが「Apache(アパッチ)」であるかどうか
  • .htaccessが利用可能な設定になっているかどうか

Webサーバが「Apache(アパッチ)」であるかどうか

Webサーバについては、2020年6月現在、「Apache(アパッチ)」のシェア率がもっとも高いですが、他のWebサーバである場合もあるので、事前に確認するようにしてください。なお、「Apache」以外で利用されるWebサーバには、「nginx(エンジンエックス)」や「IIS(アイアイエス)」というWebサーバがあります。

Q-Successから2020年6月のWebサーバシェアが発表された。2020年6月はApacheとMicrosoft IISがシェアを落とし、Nginx、Cloudflare Server、LiteSpeedがシェアを増やした。今後も同様の傾向が続くのではないかと見られる。

※レンタルサーバによっては「nginx」でも「.htaccess」を利用できるように設定してくれているサーバも存在します。

.htaccessが利用可能な設定になっているかどうか

「Apache」を使用しているWebサーバでも、サーバ側の設定で、「.htaccess」が利用できない場合があります(「.htaccess 」で利用可能なコマンドは「httpd.conf」という設定ファイルで許可されたコマンドのみです)。もし、「.htaccess」を設置しても上手くいかない場合は、そもそも利用したいコマンドが利用可能になってるかどうか、サーバ会社やサーバ管理者に確認するようにしてください。

その他のリダイレクト方法(meta、JavaScript、php)

「.htaccess」を使わない方法としては、metaタグを使った方法(meta refresh)や、JavaScriptやPHPを使った方法もあります。ただ1ページ単位でおこなうことになるため、「.htaccess」を利用する方法に比べると、すこし手間が増えます。
また、PHPは良いですが、metaタグやJavaScriptを利用したリダイレクトの場合は、サーバ側の処理(HTTPリダイレクト)ではなく、クライアント(閲覧端末)側での処理となるため、SEOの観点から、あまり推奨されておりません。(ページ評価を正しく引き継げない可能性があるため)

リダイレクト時の具体的な記述例

リダイレクト時の具体的な記述例

では次に、「.htaccess」などを使った具体的な記述例について解説していきます。

.htaccessを使ったリダイレクトの場合

次に、サイト制作をしていて、よく見かけるリダイレクトの具体的な記述例をいくつか紹介します。

ページ単位のリダイレクト

aaa.htmlをbbb.htmlにリダイレクトさせる場合↓

RewriteEngine on
RewriteRule ^aaa.html$ bbb.html [R=301,L]

ディレクトリ単位のリダイレクト

aaaディレクトリへのアクセスを、bbbディレクトリにリダイレクトさせる場合↓

RewriteEngine on
RewriteRule ^aaa(.*)$ /bbb$1 [R=301,L]

http→https のリダイレクト

httpでアクセスされた際、httpsにリダイレクトさせる場合↓

RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

「wwwありURL」→「wwwなしURL」へリダイレクト

「http://www.example.com/」を「http://example.com/」へリダイレクトさせる場合↓

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

上記はすべて301リダイレクトの例ですが、302リダイレクトさせたい場合は、最後の数値を「302」に変更してください。
なお、改行コードは <lf>または<cr+lf>で、文字コードはutf-8のBOMなしで保存するようにしてください。

 

その他のリダイレクト方法(meta、JavaScript、php)の場合

meta、JavaScript、phpを使用したリダイレクト方法をご紹介します。

metaタグを利用したリダイレクト方法

リダイレクトさせたいhtmlファイルの<head>~</head>内に以下のように記述します。

<meta http-equiv="refresh" content="0;URL=https://(転送先のURL)">

※content内の数値は何秒後にリダイレクトさせるかを指定する数値ですが、SEOの観点からは「0」秒をおすすめします。

JavaScriptを利用したリダイレクト方法(一例)

リダイレクトさせたいhtmlファイルの<head>~</head>内に以下のように記述します。

<script type="text/javascript">
<!–
setTimeout("link()", 0);
function link(){
location.href='https://(転送先のURL)';
}
–>
</script>

※setTimeout内の数値は何秒後にリダイレクトさせるかを指定する数値ですが、SEOの観点からは「0」秒をおすすめします。
※JavaScriptが動作しない環境ではリダイレクトされません。

PHPを利用したリダイレクト方法(一例)

HTTPレスポンスコードを指定した301リダイレクト↓

<?php header("HTTP/1.1 301 Moved Permanently"); header("Location: https://(転送先のURL)"); exit;

※headerタグが動かなかった時のために、exitを記述しておくとよいです。

なお、header関数でステータスコードを指定した301リダイレクト場合は以下です↓

<?php header("Location: https://(転送先のURL)", true, 301); exit;

リダイレクトさせるメリット

リダイレクトさせるメリット

リダイレクト処理を入れるメリットは、ユーザーを正しいページへ誘導することができるというだけではなく、SEOの観点からも推奨されています。それは、リダイレクト元ページの評価を、リダイレクト先へ引き継げるからです。
もし、リダイレクト処理を入れずに、新しいサイトやページを作った場合は、その古いサイトやページがこれまでに獲得してきた評価は、どこにも引き継がれず無くなり、新しいサイトやページは、また一から評価してもらえるまで、待たなくてはいけません。
リダイレクト元のサイトやページの評価が良かった(検索順位が上位だった)場合、これは大きな損失となります。そうならないためにも、サイト管理者の方はリダイレクト処理を、忘れずに設定するようにしましょう。

リダイレクトで気をつけないといけないこと

 

リダイレクトで気をつけないといけないこと

リダイレクトさせる際に、気をつけたいのが「無限ループ」です。

無限ループとは、その名の通り、永遠にリダイレクト処理が続いてしまう現象です。
Aページ → Bページ → Cページ → Aページ → ・・・
上記のような状態になってしまうと、ユーザーは結局どこにも辿り着けないまま、永遠にループすることになります。そんなこと起こり得ないと思う人もいるかもしれませんが、些細なミスが原因で起こります。

例えば、とあるサイトの全アクセスをメンテナンスページにリダイレクトさせる処理を入れる場合、当然そのように記述するわけですが、このとき一部除外処理として「メンテナンスページへの直接アクセスに関してはリダイレクトさせない」という処理を入れないと無限ループが発生します。
これはあくまで一例ですが、こういった些細なミスが原因で発生しますので、リダイレクトさせるときは注意するようにしましょう。ちなみに、無限ループが発生しているページにアクセスするとどうなるかと言いますと、ブラウザも賢いため、エラー画面を表示して教えてくれます。

まとめ

リダイレクト対応もWeb制作においては、重要なタスクの1つです。
新規サイトの立ち上げ時などは気にする必要はありませんが、サイト構成の見直しや、サイトリニューアルの際は、必ず対策を考えるようにしてください。
なお、本記事では少し難しいことも記載しておりますが、Web担当者の方は、仕組みだけ理解しておけば十分だと考えておりますので、技術的な部分は、我々のような制作会社にお任せください。
ジーピーオンラインは、2000年に創業した当時から、数多くのWebサイトリニューアル等を担当してきておりますので、状況に応じたリダイレクト提案が可能です。また、もしリダイレクトのご要望がなくても、こちらから提案させていただきますので、安心してお任せください。

サービス資料をダウンロードいただけます

Webサイト制作をご検討の方や、社内で検討をされたい方は、ジーピーオンラインのサービス内容をダウンロードいただけます。

▼資料内容(一部)
-ジーピーオンラインについて
-ジーピーオンライン3つの力
-サイト作りのポリシー
-品質管理
-サービス紹介・実績

資料請求フォームへ

関連記事

制作実績

制作実績一覧へ

私たちジーピーオンラインは、
大阪・東京のWeb制作会社です。