WebサイトのリニューアルやページのURL変更をした際、「古いページにアクセスしてくれた読者を、どうやって新しいページに案内すればいいの？」と悩んでしまうことはありませんか？

本来ならサーバーの設定ファイルをいじるのが一般的ですが、専門知識が必要で少しハードルが高く感じてしまうこともあるでしょう。
実は、難しいサーバー設定をしなくても、HTMLファイルに少し記述を加えるだけで、自動的にページを転送（リダイレクト）させることができるのです。

この記事では、Web知識に自信がない方でも安心して設定できる「HTMLファイルを使ったリダイレクト方法」を2つご紹介します。
コピーして使えるコードも用意しましたので、ぜひ試してみてください。読者を迷子にさせない、親切なサイト作りを一緒に目指しましょう。

HTMLファイルだけでリダイレクト（転送）を行う2つの方法

HTMLファイルだけでリダイレクト（転送）を行う2つの方法

サーバーの設定ファイル（.htaccessなど）を触るのが怖い、あるいは利用しているブログサービスやサーバーの仕様で設定ができない場合でも、諦める必要はありません。
HTMLファイル自体に「このページは移動しましたよ」という命令を書き込むことで、訪問者を新しいURLへ自動的に案内することができます。

ここでは、初心者の方でも取り組みやすい、代表的な2つの方法について見ていきましょう。

metaタグ（meta refresh）を使用する方法

1つ目は、「meta refresh（メタリフレッシュ）」というタグを使う方法です。
これはHTMLのヘッダー部分（headタグの中）に記述するだけで、ブラウザに対して「指定した秒数後に、指定したURLへ移動してね」と命令を出せます。

最もポピュラーで簡単な方法なので、まずはこのやり方から検討してみるのがおすすめです。特別なプログラミング知識も必要ありません。

JavaScriptを使用する方法

2つ目は、「JavaScript（ジャバスクリプト）」というプログラム言語を使う方法です。
「プログラム」と聞くと難しく感じるかもしれませんが、決まった短いコードを貼り付けるだけなので安心してください。

metaタグよりも柔軟な動きが可能ですが、ユーザーのブラウザ設定でJavaScriptがオフになっていると動かないという弱点もあります。そのため、基本的にはmetaタグの補助として、あるいはmetaタグが使えない特定の状況で利用することが多いでしょう。

meta refresh（メタリフレッシュ）タグの書き方と設定手順

meta refresh（メタリフレッシュ）タグの書き方と設定手順

それでは、実際に最も手軽な「meta refresh」タグを使った設定方法を解説します。
HTMLファイルを開いて、指定の場所にコードを貼り付けるだけのシンプルな作業です。
書き方を間違えると正しく転送されないことがあるので、ここで紹介する手順を参考に記述してみてください。

コピーして使える基本的な記述コード

以下のコードをコピーして、HTMLファイルに貼り付けてください。
content="0;URL=..." の部分で、秒数と移動先のURLを指定します。

<meta http-equiv="refresh" content="0;URL=https://新しいページのURL/">Code language: HTML, XML (xml)

「https://新しいページのURL/」の部分は、実際に誘導したいご自身の新しいページのURLに書き換えてくださいね。これだけで、ページを開いた瞬間に新しい場所へジャンプするようになります。

リダイレクトまでの秒数は「0秒」が推奨される理由

コード内の content="0;... という数字は、転送までの待機時間を秒数で表しています。ここには「0」を指定するのが一般的です。

「移転しました」というメッセージを読ませるために数秒待たせたいと考える方もいるかもしれませんが、SEO（検索エンジン最適化）の観点からは、即座に転送する「0秒」が推奨されています。
Googleなどの検索エンジンが「このページは完全に移動したんだな」と判断しやすくなり、古いページの評価を新しいページへ引き継ぎやすくなるからです。ユーザーをお待たせしないためにも、0秒設定にしましょう。

metaタグを記述する場所はheadタグ内

このmetaタグを記述する場所は、HTMLファイルの <head> から </head> の間です。
基本的には <head> タグの直後や、<title> タグの近くに置くと分かりやすいでしょう。

<head>
<meta charset="UTF-8">
<!-- ここにリダイレクトのタグを記述します -->
<meta http-equiv="refresh" content="0;URL=https://new-site.com/">
<title>ページのタイトル</title>
...
</head>Code language: HTML, XML (xml)

<body> タグの中に書いても動くことはありますが、正しいHTMLのルールとしては <head> 内に書くことが決まりとなっています。

JavaScriptによるリダイレクトの書き方と設定手順

JavaScriptによるリダイレクトの書き方と設定手順

次に、JavaScriptを使ったリダイレクト方法について解説します。
meta refreshタグが何らかの理由で使えない場合や、より確実性を高めるために併用したい場合に役立ちます。こちらもコードをコピーアンドペーストするだけで実装可能です。

コピーして使える基本的な記述コード

JavaScriptで転送を行う場合の基本的なコードは以下の通りです。

<script>
window.location.href = "https://新しいページのURL/";
</script>Code language: HTML, XML (xml)

metaタグと同様に、「https://新しいページのURL/」の部分を移動先の正しいURLに書き換えて使用します。このスクリプトが読み込まれた時点で、ブラウザは指定されたURLへ画面を切り替えます。

JavaScriptを記述する場所

JavaScriptのコードを使ってHTMLページをリダイレクトさせる場合、記述する場所は基本的に </body> タグの直前が理想的です。

<head> タグの中にそのまま書いてしまうと、コードの処理中にページの読み込みが止まってしまい、表示が遅くなる原因になってしまうからですね。ページをスムーズに表示させるためにも、HTMLの解析が終わったタイミングで実行されるように配置するのがおすすめでしょう。

もし、どうしても <head> 内に記述したい場合は、defer 属性を使って実行タイミングを遅らせるなど、書き方を工夫してみてくださいね。

JavaScriptが無効な環境への対策（noscript）

稀なケースですが、セキュリティ設定などでJavaScriptを無効にしているユーザーも存在します。その場合、上記のスクリプトは動きません。
念のため、<noscript> タグを使って、手動で移動できるリンクを表示しておくと親切です。

<noscript>
<p>ページが移動しました。自動で切り替わらない場合は<a href="https://新しいページのURL/">こちら</a>をクリックしてください。</p>
</noscript>Code language: HTML, XML (xml)

これを記述しておけば、どんな環境のユーザーでも新しいページへ辿り着けるようになります。

HTMLリダイレクトとサーバー設定（.htaccess）の違い

HTMLリダイレクトとサーバー設定（.htaccess）の違い

ここまでHTMLを使った手軽な方法を紹介してきましたが、Web制作の現場では「.htaccess」などのサーバー設定ファイルを使ったリダイレクト（301リダイレクト）が基本とされています。
では、今回ご紹介したHTMLリダイレクトとサーバー設定にはどのような違いがあるのでしょうか。それぞれの役割と使い分けについて整理しておきましょう。

サーバー設定（301リダイレクト）が推奨されるケース

もしサーバーの設定ファイルを編集できる権限があり、技術的にも可能であれば、「サーバー設定による301リダイレクト」を行うのが最も推奨されます。

これは検索エンジンに対して「ページは恒久的に移動しました」と伝えるための公式な手続きのようなものです。古いページが持っていた検索順位や評価を、最も確実かつスムーズに新しいページへ引き継ぐことができるからです。サイト全体のリニューアルやドメイン変更の際は、可能な限りこの方法を選びましょう。

HTMLリダイレクトを使うべきケース

一方で、HTMLリダイレクト（meta refresh）が活躍するのは、サーバー側の設定ができない環境です。
例えば、無料ブログサービスを利用している場合や、レンタルサーバーの仕様で.htaccessが編集できない場合などが該当します。

また、サイトのメンテナンス中に一時的に「ただいま工事中です」というページへ案内したい場合など、簡易的な転送を行いたいときにも便利でしょう。環境の制約がある中で、ユーザーを迷わせないための有効な手段となります。

サーバー設定が難しい場合の代替手段としての位置づけ

HTMLリダイレクトは、あくまでサーバー設定が難しい場合の「代替手段」として捉えておくのが良いでしょう。
サーバー側でのリダイレクトが「郵便局への転居届（自動転送）」だとすれば、HTMLリダイレクトは「旧住所の玄関に『引っ越しました』と張り紙をして、地図を渡す」ようなイメージに近いかもしれません。

どちらも新しい場所へ案内できますが、郵便局への届け出（サーバー設定）の方がよりシステム的で確実です。とはいえ、張り紙（HTMLリダイレクト）でも十分に目的は果たせますので、状況に応じて使い分けていきましょう。

HTMLリダイレクトを設定する際のSEO上の注意点

HTMLリダイレクトを設定する際のSEO上の注意点

HTMLリダイレクトを使う場合でも、SEO（検索エンジン対策）への影響は気になりますよね。
設定を間違えると、検索順位が下がったり、Googleに正しくページが認識されなかったりする可能性があります。ここでは、SEOの観点から特に注意したいポイントを解説します。

Googleによるページの評価（SEO効果）の引き継ぎについて

先ほど触れたHTMLでのリダイレクト（meta refresh）ですが、実はGoogleからの評価を新しいページへ引き継ぐ方法としては推奨されていません。もし、古いページのSEO評価をしっかりと引き継ぎたいのであれば、HTMLの記述ではなくサーバー設定による「301リダイレクト」を行うのが確実です。

301リダイレクトであれば、Googleに「ページが完全に移動した」と正しく伝えることができ、元のページの評価をほぼそのまま引き継ぐことができるでしょう。

ただし、301リダイレクトを設定したからといって、すぐにすべてが完了するわけではありません。評価の移行には少し時間がかかるケースもあることを理解しておきましょう。確実なSEO効果を目指すなら、HTMLのリダイレクトではなく、サーバー側での設定にぜひチャレンジしてみてくださいね。

canonicalタグ（正規化）を併用する重要性

リダイレクトと合わせて設定しておきたいのが、「canonical（カノニカル）タグ」です。これは「このページの内容の正規版（本物）はあっちですよ」と検索エンジンに伝えるタグです。

新しいページの <head> 内に、自分自身のURLを指定したcanonicalタグを設置しておきましょう。これにより、リダイレクト元の古いページと内容が重複していると誤解されるのを防ぎ、新しいページが正当な評価を受けやすくなります。

モバイルフレンドリーとユーザー体験への配慮

スマートフォンでWebサイトを見る人が多い現在、モバイル環境での体験も重要です。
リダイレクトの設定によっては、スマホの回線速度では画面が真っ白なまま数秒間止まって見えたり、転送がうまくいかなかったりすることがあります。

設定後は必ずご自身のスマートフォンでアクセスして、スムーズに新しいページへ切り替わるかを確認してみてください。ユーザーにストレスを与えないことが、結果的にSEOの評価にもつながります。

リダイレクトループを防ぐためのチェックポイント

設定ミスで一番怖いのが「リダイレクトループ」です。
例えば、ページAからページBへ転送する設定をしたのに、ページBにも「ページAへ戻る」という転送設定が入っていると、行ったり来たりを無限に繰り返してしまい、ページが表示されなくなります。

HTMLタグを貼り付ける際は、転送先のURLが間違っていないか、転送先でまた別の転送がかかっていないかをよく確認しましょう。ブラウザのアドレスバーを見て、URLがチカチカと切り替わり続けていないかチェックするのがポイントです。

まとめ

まとめ 2

HTMLファイルを使ったリダイレクトは、サーバーの専門知識がなくても手軽に実装できる便利な方法です。
特に「meta refresh」タグを使い、待機時間を「0秒」に設定する方法は、多くの場面で有効な代替手段となるでしょう。

もちろん、可能であればサーバー設定での301リダイレクトが理想的ですが、環境によっては難しいこともあります。そんな時は、今回ご紹介した方法を自信を持って使ってください。
大切なのは、古いページを訪れてくれたユーザーを、迷子にさせずに新しい情報へ案内することです。適切なリダイレクト設定で、Webサイトの利便性を守っていきましょう。

html リダイレクトについてよくある質問

html リダイレクトについてよくある質問

HTMLリダイレクトに関して、よくある質問とその回答をまとめました。設定時の疑問解消にお役立てください。

  • Q. リダイレクトを設定すると検索順位は下がりますか？
    • A. もっとも確実な「301リダイレクト（サーバー側での設定）」であれば、基本的に順位への影響は心配ありません。HTMLのmeta refreshは、サーバー設定ができない場合の「代わりの手段」として考えてくださいね。Googleも処理はしてくれますが、301リダイレクトに比べると信頼性が低く、推奨されていません。評価の引き継ぎにも時間がかかることがあるので注意しましょう。
  • Q. meta refreshとJavaScript、結局どちらが良いですか？
    • A. 実は、Googleなどの検索エンジンが一番推奨しているのは、どちらでもなく「サーバー側でのリダイレクト（301）」なんです。meta refreshやJavaScriptは、サーバー設定が難しいときに使う補助的な方法になります。どうしてもこれらを使う場合は、Googleはどちらも検知して処理しようとしますが、SEOの効果に悪影響が出る可能性もあります。サイトの評価をしっかり守るなら、可能な限りサーバー側での設定を目指しましょう。
  • Q. 転送までの時間を5秒など長くしてもいいですか？
    • A. 「移転しました」というメッセージをしっかり読んでもらいたい場合は時間を空けても良いですが、SEOの面ではあまりおすすめできません。時間が長いとGoogleがリダイレクトとして適切に扱ってくれない可能性があるからです。検索評価を引き継ぎたいなら、Googleも推奨している「0秒」に設定するのが安心ですね。
  • Q. WordPressでもこの方法は使えますか？
    • A. 使えますが、WordPressをお使いなら「Redirection」などのプラグインを活用するのが便利です。HTMLを直接いじるよりも管理が楽ですし、基本的にはSEOに強い「301リダイレクト」を設定してくれます。ただし、正しくサーバー側での301リダイレクトとして機能しているか、導入時によく確認してから使いましょう。
  • Q. リダイレクトが正しく動いているか確認する方法は？
    • A. まずはブラウザの「シークレットモード（プライベートブラウジング）」を使って、古いURLにアクセスしてみましょう。これなら履歴の影響を受けずに実際の動きを確認できます。さらに、Google Search Consoleの「URL検査ツール」も使うと、Googleが正しくリダイレクトを認識しているかどうかもチェックできて確実ですね。