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

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

    公開日:2016年08月24日 最終更新日:2019年09月27日

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

    目次

    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選

    月額単価50万円〜60万円
    勤務地 東京都 港区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【Vue.js(Nuxt.js)/TypeScript/HTML/CSS】フロントエンドエンジニア★不動産業向けDX支援プラットフォーム開発他 NEW

    月額単価 :90万円〜

    同社は、不動産業界向けDX支援プラットフォームをはじめ、複数の自社プラットフォームを展開している企...

    フリーランス

    【JavaScript(TypeScript)/React/Vue/Angular】フロントエンドエンジニア★クラウド郵便受取サービスの開発 NEW

    会社に届く郵便や宅配物の官営をスマートにするSaaSを展開している企業内で、フロントエンド開発をご担...

    正社員

    【Go言語】リードエンジニア|生体認証システムの開発 NEW

    年収 :400万円〜

    Liquidでは顔認証による本人確認プラットフォーム「LIQUID eKYC」をリリースし、現在はeKYCの企業への導...

    株式会社Liquid

    フリーランス

    【HTML/CSS/JavaScript/Git/Photoshop/Illustrator】コーダー★スポーツ関連サイトのコーディング

    月額単価 :50万円〜60万円

    同社はスポーツに関する事業を展開している企業です。 受託事業ではプロスポーツクラブの公式サイトを...