↑404エラーで困っている男の子
「ホームページ見れなくなったんですけど…404エラー Not Foundって何？」、「アクセス数が落ちたぞ！SEO対策はしたのか！」なんて苦情が…。１行コードのサンプルを使えば、「自動転送」で問題解決。初心者でも簡単に設定できます。Let’ｓトライ！
目次
リダイレクトってなに？なぜ重要?
新しいホームページのイメージ
リダイレクトとは、ウェブページの訪問者やクローラー（検索エンジンのボット）を自動的に別のページに転送する仕組みです。
例えば、ウェブサイトをリニューアルしたり、ページのURLを変更した場合に使用します。
なぜ重要？
リダイレクトを設定しない場合の問題点を見ていきましょう。
- 404エラー: ページが見つからず、ユーザーが迷子になります。
- SEOへの悪影響: 旧URLの評価が引き継がれず、検索エンジンでの順位が低下します。
- リンク切れ: ユーザーのお気に入りやブックマーク、他サイトからのリンクが無効になってしまいます。
- SEOへの悪影響: 旧URLの評価が引き継がれず、検索エンジンでの順位が低下します。
種類と使い分け
リダイレクトの設定にはいくつかの方法があります。大きく分けると以下の２つ。
1）サーバー管理者がサーバー内で設定する方法
2）サイト担当者がHTMLで設定する方法
今回は初心者でも簡単に、すぐに対応できる
2） サイト担当者がHTMLで設定する方法
をご紹介します。
実は、サイト担当者がHTMLで設定する方法にも２通りあり、シンプルな場合は基本のmetaタグ、条件付きや動画などを含む場合のJavaScriptを使います。
| 種類 | 使い分け |
|---|---|
| metaタグ | シンプルなリダイレクト |
| JavaScript | 条件付き、動画など複雑なリダイレクト |
metaタグ（シンプルなリダイレクト）
シンプルな場合に使用します。例えば、特定の時間後にページを自動で転送したい場合に便利です。とにかく簡単。HTMLファイル内に1行追加するだけで済みます。
具体例:
ホームページがリニューアルされた際に、旧URLから新URLへの自動転送を設定する場合。
JavaScript（条件付きや複雑なリダイレクト）
条件を付けたり、動画など複雑な場合に使用します。例えば、特定の条件が満たされた場合にのみリダイレクトを行いたい場合に便利です。高度な制御が可能で、複雑なリダイレクト条件にも対応できます。ただJavaScriptの知識が必要で、設定が少し複雑になることがあります。
具体例:
- ユーザーのブラウザやデバイスによって異なるページにリダイレクトしたい場合。
- 動画やその他のインタラクティブな要素が関係するリダイレクトを設定する場合。
HTMLでの自動転送の方法（4ステップ）
簡単なコードイメージ
ステップ1: 元のHTMLを確認する まずは、変更前のHTMLファイルを確認しましょう。
ステップ2: コピーして貼り付ける 以下のコードをコピーして、あなたのHTMLファイルに貼り付けます。
metaタグを使用する場合（シンプルなリダイレクト）
metaタグのイメージ
html
<meta http-equiv=”refresh” content=”5; url=https://www.New-example.com”>
<p>ページを5秒後、https://www.New-example.com/ に移動します。</p>
JavaScriptを使用する場合（条件付きや複雑なリダイレクト）
JavaScriptのイメージ
html
<script>
setTimeout(function(){
window.location.href = ‘https://www.New-example.com’;
}, 5000);
</script>
<p>ページを5秒後、https://www.New-example.com/ に移動します。</p>
ステップ3: headタグ内に追加する コピーしたmetaタグやscriptタグを、HTMLファイルの
タグ内に追加します。また、適切なメッセージをタグ内に追加します。ステップ4: テストして確認する ブラウザでファイルを開き、リダイレクトが正常に動作するかを確認します。
おまけ。<Head>タグ内って、どこに書くの？
超初心者の方用の説明です。
ステップ１：オレンジ色のエリアに1行追加して、コピーしたmetaタグを貼り付けます。
<head>エリアのイメージ
ステップ２:同様に<body＞内にpタグの文章を貼り付けます。
<head>貼り付けのイメージ
ステップ3：コードの書き換え方法。metaタグを例に説明します。
<meta http-equiv=”refresh” content=”5; url=https://New-example.com”>
※ https://New-example.com→ご自分のURLに変更してください。
<p>ページを5秒後、https://www.New-example.com/ に移動します。</p>
※ 今回は「5秒後に移動」としましたが、ご自由に書き直してください。5秒を10秒に変更してブックマークやお気に入りの変更をお願いしてもよいかもしれませんね。
<meta http-equiv=”refresh” content=”10; url=https://New-example.com”>
<p>ページを5秒後、https://www.New-example.com/ に移動します。</p>
<p>お手数おかけしますが、お気に入りやブックマーク登録の変更をお願いします。</p>
次のステップ（検証に便利なツールと今後に向けて）
コードテストのイメージ
metaタブ、JavaScriptどちらの方法で設定しても、テストが必要です。ブラウザ上で再読み込みすることは当然ですが、とても便利なツールもあります。初心者向けのものをご紹介します。
・Google Search Console: リダイレクトの状態を確認し、パフォーマンスをモニターできます。
・Redirect Checker: URLを入力するだけでリダイレクトのステータスを確認できます。
・W3C Markup Validation Service: HTMLコードの正確性を検証できます。
メリット
サイト管理者のメリット
1.ページの統合
古いページを新しいページに統合する場合、リダイレクトを設定することで、リンクの更新作業を大幅に軽減できます。
2.リンク切れの防止
サイト構造が変更された場合でも、リダイレクトを設定することで、リンク切れを防ぎます。
3.A/Bテストの実施
リダイレクトを使用して、異なるバージョンのページをユーザーにランダムに表示し、どのデザインやコンテンツが最も効果的かをテストできます。
4.運用の柔軟性:
サイトの更新やページの移動が必要な場合に、リダイレクトを設定することで、スムーズに対応できます。
5.メンテナンスモードの設定
サイトのメンテナンス中に、リダイレクトを使用してユーザーを仮のページに誘導することで、ユーザーに一貫したメッセージを提供できます。
ユーザーのメリット
ユーザーエクスペリエンスの向上
ユーザーはスムーズに新しいページに移動でき、404エラーに遭遇することが少なくなります。
2.信頼性の向上
適切なリダイレクト設定により、ユーザーはサイトの信頼性が高いと感じます。
3.時間の節約
ユーザーは正しい情報に素早くアクセスできるため、無駄な時間を過ごさずに済みます。
4.一貫した情報提供:
リダイレクトにより、ユーザーは常に最新かつ正確な情報にアクセスできるため、情報の一貫性が保たれます。
まとめ
いかがでしたか？
リダイレクトはウェブサイトの運営上、とても非常に重要なことです。正しく設定することで、ユーザーエクスペリエンスを向上させ、SEO効果を維持することができます。ぜひ、あなたのサイトにリダイレクトを設定してみましょう！Lets’トライ！
