HTMLでのリダイレクト（自動転送）の設定の解説ページです。個人からWeb担当者まで使える知識を幅広く分かりやすく解説します。URLの変更やサイト移転、記事の削除でのリンクエラー時に使用するリダイレクト（自動転送）を、SEO評価にも触れつつ解説します。
目次
リダイレクトとは、何？
リダイレクトとは、何？という疑問を解決しましょう。リダイレクトの意味とリダイレクトを使用する場面を解説いたします。
リダイレクトの意味
リダイレクトの意味を説明いたします。
リダイレクトとは、Webサイトのページ（ホームページ）にアクセスしたユーザーを、自動的に別のURLへ転送する仕組みのことです。
リダイレクトを使用する場面
リダイレクトを使用する場面を説明いたします。
| URLの変更時 | ページをリニューアルした際やドメインの変更でURLが変更になった場合 |
|---|---|
| URLの正規化 | URLに『www』を付けたり無くす場合や、『http』と『https』を統一するとき |
| エラー防止 | ユーザーが古いリンクをクリックしてページが見つからない（『404 Not Found』エラー）場合に、エラー画面を表示させたくない場合 |
HTMLでのリダイレクト（自動転送）３種類と設定方法
HTMLでのリダイレクト（自動転送）３種類と設定方法について解説していきます。
HTMLでのリダイレクト（自動転送）３種類
HTMLでのリダイレクト（自動転送）３種類をご紹介します。
- HTMLリダイレクト
- JavaScriptリダイレクト
- HTTPのリダイレクト
HTMLリダイレクトの設定方法
HTMLリダイレクトは、『head』タグ内の『meta』タグを使用して設定を行います。
例：
0秒後にhttps://example.com/に移動させたい場合は以下のように書きます。
コード記述
<head>
<meta http-equiv="Refresh" content="0; URL=https://example.com/">
<head>
metaタグ内の「content=”~”」の部分は、指定した URL へリダイレクトする前にブラウザが何秒待つべきかを示す値から始まります。アクセシビリティを高めるため、移動時間は『0』に設定するのが標準になっています。
補足
アクセシビリティ：高齢者や障がいのある人を含むすべての人が、製品やサービス、建物、情報などに支障なくアクセスし、利用できる度合いやそのための環境づくりのこと。
JavaScriptリダイレクト
JavaScriptリダイレクトは、JavaScript言語を使用した設定方法です。
こちらはユーザーがブラウザでJavaScriptの無効化設定がされてない場合のみ対応してください。
それでは、リダイレクト設定を行いたいページの
内に記述していく方法を解説いたします。例：
https://example.com/に移動させたい場合。
コード記述
<head>
<script> window.location.href('転送先URL') </script>
</head>
例：
0秒後にhttps://example.com/に移動させたい場合。
コード記述
HTTPリダイレクト
HTTPリダイレクトとは、サーバ側で高速で処理を行える転送方法です。
こちらの設定が、今のWeb業界では一番お勧めの方法になります。
この方法では、後述するSEOに対応することができます。
メリットが強い反面、設定の際に以下の条件が備わっていることが必須になります。
- 使用しているWebサーバーが『Apache』を使用していること
- 使用しているWebサーバー上で『.htaccessファイル』が使用できること
『.htaccess』ファイルを設定していきましょう。
こちらは、とても分かりやすいWebサイトがあるので、リンクのみで割愛させていただきます。
株式会社パンタグラフ | 【ケース別】.htaccessのリダイレクト設定方法とよくあるトラブル対処法
リダイレクトの優先順位
リダイレクトの優先順位を考えて設定を行いましょう。
リダイレクトには優先順位があります。リダイレクトの重複設定により、無限ループやリダイレクト先（URLの転送先）が同一にする予定のものが間違っているなどの問題が起こりえます。
リダイレクトの優先順位を見ていきましょう。
優先順位
- HTTPリダイレクト（『.htaccess』ファイル）
- JavaScriptリダイレクト
- HTMLリダイレクト（『meta』タグ）
特にWeb担当者は、設定が可能であれば、優先順位の高いHTTPリダイレクトを常に使用しましょう。
場面別リダイレクト方法
場面別のリダイレクト方法についてご紹介します。
- レンタルサーバーを使用している場合
- WordPressを使用している場合
- 自社でサーバー管理を行っている場合
レンタルサーバーを使用している場合
レンタルサーバーを使用している場合のリダイレクトの設定方法について説明いたします。
レンタルサーバー上の設定で、URLに『www』の有無や、『http』と『https』を統一することができる場合があります。レンタルサーバーの会社によって設定の有無や方法が違うため、ヘルプページをよく見ましょう。
WordPressを使用している場合
WordPressを使用している場合のリダイレクトの設定方法について説明いたします。
WordPressには、Redirectionという無料プラグインがあります。こちらはWordPressの管理画面から設定でき、専門的な知識がなくてもリダイレクト設定ができます。
詳しくは、ロリポップレンタルサーバーの記事WordPressのリダイレクト設定方法！初心者・中級者向けに徹底解説をご覧ください。
自社でサーバー管理を行っている場合
自社でサーバー管理を行っている場合のリダイレクトの設定方法について説明いたします。
リダイレクトの優先順位で説明されたように、設定ができるようなら以下の順序で対応しましょう。
- HTTPリダイレクト（『.htaccess』ファイル）
- JavaScriptリダイレクト
- HTMLリダイレクト（『meta』タグ）
再度の注意になりますが、リダイレクトの重複設定にならないように注意をしましょう。
難易度別リダイレクト方法
難易度別リダイレクト方法のご紹介をします。
- 個人サイト（初心者向け）
- Web担当者
個人サイト（初心者向け）
個人サイト（初心者向け）のリダイレクトの設定方法は以下になります。
- HTMLリダイレクトの『meta』タグ内での対応
- レンタルサーバーを使用している場合は設定で対応
- WordPressを使用している場合は無料プラグインで対応
Web担当者向け
Web担当者向けのリダイレクトの設定方法は以下になります。
- レンタルサーバーを使用している場合は設定で対応
- WordPressを使用している場合は無料プラグインで対応
- サーバー管理権限のある場合はHTTPリダイレクトの『.htaccess 』ファイルで対応
リダイレクトとＳＥＯの関係性
リダイレクトとＳＥＯの関係性についても解説していきます。
リダイレクトには種類があり、ＳＥＯ対策にも繋がるので注意する点を解説いたします。
SEOってなに？
SEOってなに？ SEOって初めて聞く方もいると思います。私もSEOを意識したのは最近なのです…！ SEO覚えたての初学者が、初心者でも分かりやすいように解説いたします。
SEOとは略語で、正式名称『Search Engine Optimization（検索エンジン最適化）』といいます。検索エンジンの最適化を行うと、Googleなどの検索結果でWebサイトを上位に表示させることができます。
検索結果を上位に表示させることで、ユーザーがサイトを見る機会が多くなります。身内だけの交流目的のWebサイトでない限り、Web制作やWebマーケティングという点で重要な要素になります。
そこで、これからお話しするリダイレクトの種類が重要になってくるのです。
HTTPリダイレクトの種類について
HTTPリダイレクトの種類についてですが、大まかに分けて３種類あります。
| 恒久リダイレクト | 恒久の文字のごとく、いつまでも続く場合に使用されます。例として、元のURLが使用されずに新しいURLに変更する場合に使用します。 |
|---|---|
| 一時リダイレクト | 短い時間のみ対応する場合に使用されます。例として、新しいWebサイトの製作中や、更新、削除している場合に使用します。 |
| 特殊リダイレクト | 機能や用途が限られています。複数の遷移先を選択肢表示してユーザーに選んでもらう、ブラウザが一時保存している情報を優先的に表示する場合に使用します。 |
SEOを考えたリダイレクトの設定
SEOを考えたリダイレクトの設定について解説いたします。
SEOで重要なのは、『URLを恒久的に変更したのか、それとも一時的な変更なのか』を正しいステータスコードで検索エンジンに伝えることです。
| 恒久リダイレクト | 旧URLのページ評価（検索順位や被リンクの価値）を新しいURLへ引き継ぐことができます。 |
|---|---|
| 一時リダイレクト | 旧URLのページ評価を引き継ぐことはありません。しかし、長い間変更を行わない場合は 旧URLのページ評価を引き継ぐ可能性があります。 |
| 特殊リダイレクト | 今回は割愛いたします。 |
まとめ
まとめになります。これまでの解説はいかがだったでしょうか。
- 初心者は HTMLリダイレクト『meta』タグで対応してみよう
- 中級者は JavaScriptで対応してみよう
- 上級者は HTTPリダイレクトで対応してみよう
より良いWebサイト制作を目指して、こちらの記事が参考になることを祈ります。
最後に
最後に、これまでの記事を読んで、もっとHTMLの知識を深めたいと思ったあなたへ。
開発者向けのウェブ技術を得られる、『MDN』というHTML、CSS、JavaScriptについて詳しく解説しているサイトのリンクをご紹介します。
こちらは開発者向けMDNのTOPページになります
→MDNサイトのTOPページへ
こちらはMDNのリダイレクト関連の記事になります
→MDNのリダイレクトについての記事へ
使用させていただいた画像の参照元
フリー素材「ぱくたそ」
以上で、こちらの記事は終了になります。ご拝読ありがとうございました。
講師と１対１で学べる資格・PCスキル講座のソフトキャンパス！
リスキリングでお得に資格取得を目指すならマンツーマンレッスン！
分からないところだけをちょっとだけ聞きたい、そんなあなたに！
