HTMLリダイレクトとは
HTMLリダイレクトとは、特定のWebページへのアクセスを、別のページへ自動的に転送する機能を指します。Webサイトのドメインが変更された場合や、ページの構成が変更された際に、ユーザに移転や変更を知らせるために利用されます。
この記事では、HTMLリダイレクトについて知りたい方のために、3つのリダイレクトの方法や書き方のサンプル、注意点などを解説します。
リダイレクトの概要
HTMLリダイレクトは、Webサイトの運営や管理において、ユーザの利便性の向上や、適切なリンクを維持するために重要な役割を果たします。
サイトのURLを変更した場合、古いURLにアクセスしたユーザを新しいURLに自動的に転送することで、ユーザがサイトにアクセスできなくなることを防ぐことができます。
URL正規化にもリダイレクトが有効です。例えば、ホームページのURLが「example.com」の場合に、「www.example.com」へのアクセスも「example.com」に転送します。
また、サイトのセキュリティを向上させるためにHTTPSを導入した場合、「http://」へのアクセスを「https://」に移動させるためにも使用されます。
リダイレクトの種類
代表的なリダイレクトの方法として、 .htaccessファイルを利用したHTTPリダイレクト、HTML文書内のmetaタグを使用したリダイレクト、JavaScriptを用いたリダイレクトがあります。
JavaScriptを用いたリダイレクトは、厳密にはHTMLリダイレクトには属さない、スクリプトを用いたリダイレクト方法ですが、この記事ではあわせて紹介していきます。
中でも、 .htaccessファイルを用いたリダイレクトが一般的に使われます。しかし、サーバによって .htaccessファイルを設置できない場合や、条件に応じたリダイレクトを行いたい場合は、metaタグやJavaScriptを用いたリダイレクトも使われます。
それぞれに特徴がありますので、これらのリダイレクト方式を適切に使い分けることで、Webサイト運営時やURLの変更時に、スムーズな移行が可能です。
.htaccessによるリダイレクト
ここでは、 .htaccessファイルによるリダイレクトについて解説します。書き方や .haccessファイル設置の際の注意点、301リダイレクトと302リダイレクトの違いを押さえておきましょう。
設定方法
.htaccessファイルは、Apacheで構築されたWebサーバで利用できる設定ファイルです。.htaccessファイルにコードを記述することで、HTTPリダイレクトを設定することができます。
まず、ドメインを含むリダイレクトで、Webサイト全体を転送する場合には、 .htaccessファイルに以下のコードを記述します。
RewriteEngine On
RewriteCond %{http_host} ^リダイレクト前ドメインのURL
RewriteRule ^(.*)$ リダイレクト先ドメインのURL$1 [R=301,L]同一ドメイン内で、特定のフォルダーに来たアクセスを別のフォルダーにリダイレクトすることもできます。その場合は、以下のように記述します。
RewriteEngine on
RewriteRule ^リダイレクト前フォルダー名(.*)$ リダイレクト先フォルダー名$1 [R=301,L].htaccessの設置について
.htaccessによるリダイレクトを行う場合、 .htaccessファイルをWebサーバ上の適切な場所に配置する必要があります。
.htaccessファイルとは、「.htaccess」と名付けられたファイルを意味します。作業者の環境によっては、「.」から始まる「.htaccess」という名前のファイルが見えなくなっている場合があります。
そのため、事前にパソコン側とFTPソフトで設定を行い、 .htaccessファイルが見えるように設定する必要があります。
.htaccessファイル設置の手順としては、まずメモ帳などのテキストエディターで、リダイレクトのコードを記載した文書を保存します。名前は「htaccess.txt」など、仮で付けておきます。
その後、FTPソフトを使ってこの .htaccessファイルをWebサーバにアップロードし、ファイル名を「.htaccess」に変更することで、設定内容が反映されます。
なお、.htaccessファイルは、リダイレクトだけでなくBasic認証やキャッシュ設定なども行える重要なファイルのため、既存の .htaccessファイルがサーバ上にある場合もあります。
その場合は、そこにリダイレクト用のコードを追記します。コードを編集する際には、必要のない部分まで変更してしまわないよう、十分注意しましょう。
301リダイレクトと302リダイレクト
.htaccessでリダイレクトをする場合、301リダイレクトと302リダイレクトのどちらにするかを意識する必要があります。どちらを使用するかは、状況によって異なります。
301リダイレクトは、元のURLにアクセスしたユーザを新しいURLに永続的にリダイレクトします。ウェブサイトのURLを変更したときに、検索エンジンが新しいURLを認識できるようにするために使用します。
ホームページの引越しやドメイン変更などでリダイレクトを行いたい場合は、旧URLの評価を引き継ぐために301リダイレクトを行いましょう。
302リダイレクトは、元のURLが一時的に利用できない場合に、元のURLにアクセスしたユーザを新しいURLに一時的にリダイレクトするために使用します。それぞれの違いを理解して適切に設定し、使い分けることが重要です。
metaタグによるリダイレクト
次に、metaタグによるリダイレクトの書き方や注意点を解説します。metaタグでは、リダイレクトまでの時間を指定できますが、ページごとにしかリダイレクトできません。
設定方法
metaタグを用いたリダイレクトは、HTMLファイルの<head>タグ内に、<meta>タグを記述してページの自動再読み込みを利用する方法です。
<meta>タグで「http-equiv属性」に "refresh" を指定し、ページ遷移までの秒数とリダイレクトURLを設定することで、指定したリダイレクト先URLにリダイレクトされます。
例えば、以下のコードでは、ページを訪れた利用者にページが移転したことを表示した後、自動的にリダイレクトすることができます。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="3;URL='リダイレクト先のURL'">
<title>このページは移転しました</title>
</head>
<body>
<p>このページは移転しました、3秒後に自動的に移動します。</p>
<p>ブックマークの変更をお願いいたします。</p>
</body>
</html>リダイレクトさせる時間を指定できる
metaタグを使用したHTMLリダイレクトでは、1度ページを表示させてからリダイレクトするまでの時間を変えることができます。metaタグの「content属性」で秒数を指定します。
<meta http-equiv="refresh" content="秒数;URL=リダイレクト先URL">これにより、ユーザがリダイレクトを意識しやすくなり、移行後のページへのアクセスやブックマークの変更がスムーズに行われる可能性が高まります。
0秒に設定すると即時リダイレクトされますが、それだとリダイレクト元のページの表示が見られないため、1〜3秒程度で設定するのが一般的でしょう。ユーザのストレスが少ないと考えられる適切な時間設定をホームページ作成者で調整することが可能です。
特定のページしかリダイレクトできない
metaタグによるリダイレクトは、<meta>タグを記述した特定のページのみを別のページにリダイレクトする方法です。
そのため、Webサイト内の全ページを一律に別のページにリダイレクトさせるには、全ページに同じmetaタグを記載する必要があり、ページ数が多いと作業が困難です。
したがって、大規模なサイトの移行や一律にリダイレクトを行いたい場合には、 .htaccessファイルを利用するなど、他のリダイレクト方法を採用するほうが良いでしょう。
JavaScriptによるリダイレクト
次に、JavaScriptによるリダイレクト方法について説明します。JavaScriptを使用すると、特定の条件を満たす場合のみリダイレクトさせることができます。しかし、JavaScriptをオフにしているブラウザでは機能しません。
設定方法
JavaScriptによるリダイレクトとは、ブラウザのURLを別のURLに変更してページを再読み込みする方法です。
具体的な手順としては、リダイレクト元のHTMLファイル内で、scriptタグを使用してJavaScriptを記述し、window.locationプロパティにリダイレクト先のURL文字列を設定します。
<script>
// 3秒後に指定したURLにリダイレクトする関数
function redirect() {
window.location.href = 'リダイレクト先のURL';
}
// ページ読み込み後に3秒後にリダイレクトするように設定
window.onload = function() {
setTimeout(redirect, 3000); // 3000ミリ秒 = 3秒
};
</script>この例では、3秒後にリダイレクト先のURLに自動的にリダイレクトされます。リダイレクトの実行は、setTimeout関数を使用して遅延させることで、リダイレクト元のページが表示された後でリダイレクトされます。
さまざま条件のリダイレクトが可能
JavaScriptによるリダイレクトでは、多様な条件に基づいたリダイレクトを実現可能です。アクセスしてきたデバイスの種類や画面幅を認識し、それに応じてリダイレクト先を切り替えることができます。
例えば、モバイル端末でアクセスしてきた場合のみ、モバイル端末向けサイトにリダイレクトすることができます。
また、リダイレクト元のページを一定時間表示させた後に自動的にリダイレクトを行ったり、URLパラメータを用いて特定情報をリダイレクト先に引き渡したりすることも可能です。
JavaScriptでのリダイレクトでは、これらの条件を組み合わせて運用できるため、柔軟な運用ができます。
ブラウザのJavaScriptがオフだと機能しない
JavaScriptによるリダイレクトは、ブラウザのJavaScriptが有効になっている場合にのみ機能します。
ユーザがブラウザの設定でJavaScriptを無効にしている場合にはリダイレクトが行われないため、リダイレクト先のページが表示されない場合には、ブラウザのJavaScript設定を確認してもらうよう促す必要があります。
リダイレクト設定で気を付けたい点
ここでは、3つのリダイレクト設定の優先順位や、使い分け方を説明します。注意が必要なリダイレクトループについても解説します。
3つのリダイレクト方法の優先順位
.htaccessファイル、metaタグ、JavaScriptによるリダイレクト方式には、ホームページアクセスの処理の流れに沿った優先順位があります。
.htaccessファイルでのリダイレクトが最優先され、リダイレクト元のページの有無に関わらずリダイレクト先へ遷移します。.htaccessファイルでのリダイレクトが存在しない場合には、HTMLのmetaタグによるリダイレクトが実行されます。
それもない場合、JavaScriptが有効なブラウザでのみ、JavaScriptリダイレクトが実行されます。
適切なリダイレクトを実現するには、各方式の優先順位を理解し、意図したリダイレクトが行われるよう構築する必要があります。
3つのリダイレクト方法の使い分け方
.htaccessファイルにリダイレクトの設定を記述してアップロードするだけで実装でき、非常に簡単で手軽です。また、転送前のページが存在しなくても転送が可能であり、リンクによる評価も引き継げます。
そのため、基本的には .htaccessを使用してリダイレクトを設定することが推奨されます。
しかし、一部のサーバでは .htaccessファイルが使用できない場合があります。また、 .htaccessファイルはWebサーバの管理者権限が必要となるため、すべてのユーザが使用できるわけではありません。
このような場合は、metaタグでのリダイレクトを検討すると良いでしょう。ただし、metaタグでのリダイレクトは、リンクによる評価を引き継げないため、SEOの観点からはあまり推奨されません。
JavaScriptを使用してリダイレクトを設定する方法は、他の方法よりも複雑ですが、サーバ環境によっては有効な代替案となり、より柔軟な設定も可能です。
リダイレクトループ
HTMLリダイレクトを設定する際、リダイレクトループに注意する必要があります。リダイレクトループとは、設定されたリダイレクトが既に通った経路を再び通ることで発生する現象です。この現象により、無限ループが発生し、最終的に目的のページにたどり着けなくなります。
例えば、「ページ1」に「ページ2」へのリダイレクト、「ページ2」に「ページ1」へのリダイレクトを設定することでリダイレクトが循環し、リダイレクトループが発生します。
サーバやブラウザがリダイレクトループを検知すると、エラーメッセージが表示されます。リダイレクトループはユーザの使い勝手を損なうだけでなく、サーバにも大きな負荷をかける可能性があるため、避けることが重要です。
違いを知って適切なHTMLリダイレクト設定を行おう
ここまで、HTMLリダイレクトの種類や設定方法について解説してきました。基本的には、 .htaccessファイルでのリダイレクトを採用すると良いでしょう。
しかし、 .htaccessファイルが使えない場合や、それでは要件を満たさない場合のため、metaタグやJavaScriptによるリダイレクトについても知っておくと便利です。適切なリダイレクト設定を行うために、使用環境や目的に合わせて適切な方法を選択することが重要です。
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから
