HTML入門:リダイレクト(自動転送)の方法

    • このページをはてなブックマークに追加

    Webサイトのドメインが変更になった場合などにユーザーにサイトが移転した事を知らせる、または自動で「リダイレクト(転送)」する方法について解説します。Webサーバーの設定ファイルでリダイレクトをする「HTTPリダイレクト」や「metaタグ」によるリダイレクトについて解説します。本コラムでは、加えて「Javascript」でリダイレクトする方法についても説明します。

    最終更新日:2018年3月1日

    目次

    1. WEBサイトのリダイレクトの種類

    Webサイトを運営していると、ファイルの階層構造を変更したり、使用しているサーバーを変更するケースがあります。環境が変わることで、サイトのURLも変更になりますが、ユーザーが古いURLにアクセスしてきた時に、新しいサイトのURLへ自動で転送させる処理を「リダイレクト」と呼びます。Webサイトを「リダイレクト」する方法はいくつかあります。

    1.1. 「.htaccess」ファイル


    Webサーバーの設定ファイル「.htaccessファイル」によるHTTPリダイレクトで、Webサイトの全体や一部のURLが恒久的に移動したことを意味する「301リダイレクト」や一時的に移動したことを意味する「302リダイレクト」などがあります。Googleでは、通常「301リダイレクト」を行う事をすすめています。

    ▲ページトップへ戻る

    1.2. metaタグ

    HTML文書に直接記述する「metaタグ」によるリダイレクト方法があります。SEOの観点からは「metaタグ」でリダイレクトすることを進めていません。「HTTPリダイレクト」を行う環境がない場合などに利用します。

    ▲ページトップへ戻る

    1.3. JavaScript/PHPなど

    「HTTPリダイレクト」や「metaタグ」によるリダイレクトの他に、「JavaScriptやPHP」によるリダイレクトがあります。「HTTPリダイレクト」の環境がなくても比較的簡単にリダイレクトをする事ができます。本コラムでは、「JavaScript」を使ったリダイレクトの方法について解説します。

    ▲ページトップへ戻る

    2. 「.htaccess」ファイルを使いHTTPリダイレクトする方法

    2.1. HTTPリダイレクトの条件

    HTTPリダイレクトをするには、Webサーバー側に以下の条件が整っている必要があります。

    ●Webサーバーが「Apache」であること

    ●Webサーバー上で「.htaccessファイル」を利用できること

    ●Apache の「mod_rewriteモジュール」使える(必須ではありません。)

    本コラムでは、以上の条件が整っていることを前提として、「.htaccessファイル」を使ったHTTPリダイレクトの方法を解説します。

    ▲ページトップへ戻る

    2.2. 「.htaccess」ファイルの作成

    HTTPリダイレクトを行うには、「.htaccessファイル」をWebサーバー上の「ルートディレクトリ」ないしはルートディレクトリ以下の適切な場所に配置します。

    .htaccessファイル」をローカルで作成する場合は、テキストエディターなどを使ってファイルを作成しますが、環境によってはドットで始まるファイルを作成できない場合もあります。
    ※「.htaccess」という名前でファイルを作成できない場合は、仮のファイル名(例えば「apache.htaccess」など)でファイルを作成し、FTPソフトでWebサーバーに転送後にファイル名を「.htaccess」に変更します。

    ●「.htaccess」ファイルの作成

    ▲ページトップへ戻る

    2.3. Webサイト全体をリダイレクトする

    Webサイトの全体をリダイレクトする、設定ファイル「.htaccess」に記述するコード例を見ていきます。HTTPリダイレクトの基本書式は以下の通りです。ローカルで作業する場合はテキストエディターなどを使って以下のコードを「.htaccess」ファイルに記述します。

    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{http_host} ^旧ドメインのURL
    RewriteRule ^(.*)$ 新ドメインのURL$1 [R=301,L]
    </IfModule>

    例えば、旧ドメイン「www.old-domain.com」から新ドメイン「www.new-domain.com」へのHTTPリダイレクトを行う場合の「.htaccess」ファイルのコードは以下の通りです。

    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{http_host} ^www.old-domain.com
    RewriteRule ^(.*) http://www.new-domain.com/$1 [R=301,L]
    </IfModule>

    Webサイト全体のフォルダー階層を変更していない場合は、この設定で、サイト内全てのページがリダイレクトされるようになります。

    ▲ページトップへ戻る

    2.4. 特定のフォルダーをリダイレクトする

    Webサイトの特定のフォルダーを同一ドメインの別フォルダーにリダイレクトする場合は以下の通りに「.htaccess」ファイルを記述して下さい。

    <IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteRule ^旧フォルダー名(.*)$ 新フォルダー名$1 [R=301,L]
    </IfModule>

    旧フォルダー名「old_folder」から新フォルダー名「new_folder」へHTTPリダイレクトを行う場合の「.htaccess」ファイルのコードは以下の通りです。

    <IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteRule ^old_folder(.*)$ /new_folder$1 [R=301,L]
    </IfModule>

    「.htaccessファイル」は「old_folder」フォルダーと同じ階層に配置します。フォルダー内の構成が変更になっていなければ、フォルダー内の全てのページがリダイレクトされます。

    ▲ページトップへ戻る

    3. HTMLの「metaタグ」を使ってリダイレクトする方法

    metaタグの「http-equiv属性」に"refresh"を設定することでページの再読み込みをします。また、「content属性」には「何秒後にページが遷移するのか?」と「リダイレクト先のURL」を指定します。

    ●リダイレクト基本の書式(metaタグ)

    <meta http-equiv="refresh" content="秒数;URL=URL">

    それでは、実際にリダイレクト先の新規ファイルと「リダイレクト」を設定する旧ページを作成し動作をみてみましょう。旧ページに「metaタグ」を記述します。 リダイレクト先の新規ページを「newpage.html」とし、旧ページのファイル名を「redirect.html」とします。ファイルの種類を「utf-8」で保存します。

    ●redirect.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="uft-8">
    <meta http-equiv="refresh" content="5;URL=move/newpage.html">
    <title>HTML入門-ページリダイレクト</title>
    </head>
    <body>
    <h1>リダイレクト</h1>
    <p>本サイトは移転しました。5秒後にジャンプします。<br>
    ジャンプしない場合は、以下のURLをクリックしてください。</p>
    <p><a href="move/newpage.html">移転先のページ</a></p>
    </body>
    </html>

    リダイレクト先の新規ページ用に「redirect.html」と同じ階層に「move」フォルダーを作成して下さい。

    ●moveフォルダーの作成

    redirect1

    moveフォルダー内に以下の「newpage.html」ファイルを作成します。

    ●newpage.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset=”utf-8″>
    <title>HTML入門-ページリダイレクト</title>
    </head>
    <body>
    <h1>移転先のページ</h1>
    <p>WEBページのリニューアルをおこないました。</p>
    <p>今後ともよろしくお願い致します。</p>
    </body>
    </html>

    「redirect.html」ヘッダーのmetaタグには、移転先のURLを相対パス「href="move/newpage.html」で設定しています。外部リンクを指定する場合は絶対パスを指定します。「redirect.html」をダブルクリックして下さい。

    ●ブラウザーの表示(redirect.html)

    redirect2

    旧ページにアクセスしてから5秒後に新規ページ「newpage.html」へリダイレクトする設定になっています。ページのbodyに移転先のリンクを記述してあげると親切です。

    ●ブラウザーの表示(新規ページ「newpage.html)

    redirect3

    ※Webサイトのリダイレクトを旧ページにアクセス時してから、数秒後に指定のURLへ転送する方法を利用すると、ユーザーはWEBサイト移転の事実をすぐに把握することができます。
    「HTTPリダイレクト」や「metaタグ」のcontent属性の値を0にして、「0秒後」に転送するなど、「旧URLにアクセスすると同時に指定のURLへ転送する方法」を用いると、ユーザーはスムーズに移転後のURLへアクセスすることができますが、移転の事実は気づきにくいのでブックマークの変更や修正がされない可能性が大きくなります。

    メンテナンスなどで一時的にファイル名を変更する場合などはアクセスと同時にリダイレクトさせるページを作成するなど、用途に応じてリダイレクトの方法を使い分けるとよいでしょう。

    ▲ページトップへ戻る

    4. Javascriptを使ってリダイレクトする方法

    リダイレクト元のページ内の「scriptタグ」にリダイレクト用の「Javascript」を記述します。書き方は色々ありますが、Javascriptの「location.hrefプロパティ」にURLを設定することで「リダイレクト」を実行することができます。

    ●redirect.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="uft-8">
    <script>
    setTimeout("location.href='move/newpage.html'",1000*5);
    </script>
    <title>HTML入門-ページリダイレクト</title>
    </head>
    <body>
    <h1>リダイレクト</h1>
    <p>本サイトは移転しました。5秒後にジャンプします。<br>
    ジャンプしない場合は、以下のURLをクリックしてください。</p>
    <p><a href="move/newpage.html">移転先のページ</a></p>
    </body>
    </html>

    ヘッダーのscriptタグ内でリダイレクトページの「"move/newpage.html"」を指定しています。この例では「redirect.html」をクリックすると5秒後にmoveフォルダーにある「newpage.html」へリダイレクトされる事になります。 移転先のリンクを追加する事で、ユーザーは5秒待たずに新規ページを開く事ができます。

    ▲ページトップへ戻る

    関連記事:初心者のためのHTML入門
    関連記事:HTML入門:link要素の使い方
    関連記事:HTML入門:外部CSSファイルの読み込み方
    関連記事:HTMLでソースコードや特殊文字を表示する方法
    関連記事:HTML&CSS 学習者におすすめの本 10選

    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【PHP】サーバーサイドエンジニア|アドテクマーケティング★自社ツールの開発

    年収 :600万円〜

    ◆サーバーサイドエンジニアとして自社ツールの開発を担当 ◆最先端のマーケティングスキルも身につける...

    株式会社 ピアラ

    正社員

    【Java/PHP】システム開発エンジニア|企業グループIT部門◎100%自社内開発★未経験

    年収 :250万円〜350万円

    ◆700名規模グループ内のITシステムの開発や保守業務 ◆自社内開発100%!じっくりと業務に取り組める ◆...

    株式会社イノベーションネクスト

    正社員

    【LAMP】システムエンジニア|100%自社内開発★服装自由・フレックス◎独学可

    年収 :300万円〜350万円

    ◆自社サービスの企画~開発までをお任せします。 ◆シェアNo.1クラウドソリューションを提供するベンチ...

    ブライシス株式会社

    正社員

    【PHP/Java】システムエンジニア|100%自社内開発★在宅導入/時短OK◎働くママさん歓迎

    年収 :350万円〜600万円

    ◆自社サービスの企画~開発までをお任せします。 ◆シェアNo.1クラウドソリューションを提供するベンチ...

    ブライシス株式会社

    正社員

    【PHP/Python】開発エンジニア|自社ECサイト★マンガ×IT少数精鋭のベンチャー◎独学可

    ◆月間10億PVのマンガサービスを支えるPythonエンジニア ◆マンガに興味ある方!はじめはPython勉強意欲...

    株式会社TORICO