実行できるHTMLドキュメント: HTML リダイレクト

Q: HTML のページを別のページにリダイレクトするには？

古いページの に を追加し、代わりの手段として body に新しいページへの普通のリンクを置きます。サーバーを管理できるなら、301 リダイレクトのほうが適しています。

Q: HTML で 5 秒後にリダイレクトするには？

セミコロンの前の数字を秒数の遅延にします: 。リダイレクトされることをページ上で読者に伝え、リンクも用意しましょう。

Q: ページを自動で更新させるには？

URL なしで遅延だけを指定した meta refresh を使います。 は 30 秒ごとにページを再読み込みします。ページ全体を再読み込みして読者の作業を中断させるので、リアルタイムのデータには、JavaScript でページの一部を更新するほうがたいてい適しています。

Q: JavaScript でリダイレクトするには？

location.replace('https://example.com/new') を使います。履歴の現在のページを置き換えるので、戻るボタンでリダイレクトしたページに戻ることはありません。location.href = url でも動きますが、古いページが履歴に残ります。

meta refresh タグでリダイレクトする

HTML だけでリダイレクトするには、古いページの <head> に <meta http-equiv="refresh"> タグを書きます。

<meta http-equiv="refresh" content="0; url=https://example.com/new-page">

数字は秒数の遅延で、その後にセミコロン、url= と移動先のアドレスが続きます。0 なら、ページが読み込まれるとすぐにリダイレクトします。下は「ページが移動しました」のファイル全体です。このプレビューが移動しないよう遅延を 1 時間にしていますが、実際のページでは 0 か数秒にします。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="refresh" content="3600; url=https://example.com/new-page">
  <link rel="canonical" href="https://example.com/new-page">
  <title>This page has moved</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>This page has moved</h1>
  <p>Go to the <a href="https://example.com/new-page">new page</a>.</p>
  <p id="out" style="color: #6b7280;"></p>
  <script>
    const content = document.querySelector('meta[http-equiv="refresh"]').content;
    const [seconds, target] = content.split(';');
    document.getElementById('out').textContent =
      'The browser will go to ' + target.trim().slice(4) + ' in ' + seconds + ' seconds.';
  </script>
</body>
</html>

2 つの代わりの手段でページを安全にしています。見えるリンク (ブラウザが refresh に従わない人や、自分で選びたいスクリーンリーダーのユーザーのため) と、どの URL が本物かを検索エンジンに伝える <link rel="canonical"> です。ここで遅延を 0 に変えると、プレビュー自体が example.com に移動します。Reset を押すと例が戻ります。

ページを自動で更新する

URL を省くと、遅延の後にページが自分自身を再読み込みします。content="5" なら 5 秒ごとに再読み込みします。下の 1 つ目の箱はそのタグを持つ小さなページなので、様子を観察できます。読み込み時刻が 5 秒ごとに変わり、入力欄に入れたテキストは再読み込みで消えます。2 つ目の箱は代わりに JavaScript で時計を最新に保ち、入力したテキストも残ります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Auto refresh</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .pane { flex: 1; min-width: 220px; border: 2px solid #e5e7eb; border-radius: 8px; padding: 10px; }
    iframe { width: 100%; height: 110px; border: 0; }
    h2 { font-size: 14px; margin: 0 0 6px; }
  </style>
</head>
<body>
  <div class="row">
    <div class="pane">
      <h2>meta refresh, content="5"</h2>
      <iframe id="refreshing" title="Page that refreshes itself"></iframe>
    </div>
    <div class="pane">
      <h2>JavaScript, setInterval</h2>
      <p>Time: <strong id="clock"></strong></p>
      <input placeholder="Type here">
    </div>
  </div>
  <script>
    document.getElementById('refreshing').srcdoc =
      '<meta http-equiv="refresh" content="5">' +
      '<body style="font-family: system-ui, sans-serif; margin: 0;">' +
      '<p>Loaded at: <strong id="t"></strong></p>' +
      '<input placeholder="Type here">' +
      '<script>t.textContent = new Date().toLocaleTimeString();<\/script>';
    const tick = () => { document.getElementById('clock').textContent = new Date().toLocaleTimeString(); };
    tick();
    setInterval(tick, 1000);
  </script>
</body>
</html>

refresh はページ全体をもう一度読み込むので、読者がそこでしていたことは中断されます。壁に掛けた状況表示の画面のように、誰も操作しないページなら問題ありません。ダッシュボード、スコア、フィードでは、2 つ目の箱のように変わる部分だけを更新しましょう。

JavaScript でリダイレクトする

リダイレクトがブラウザだけが知っていること (ユーザーの選択、ログイン状態、画面の大きさ) に左右されるときは、JavaScript を使います。

// Replaces the current page in the history: Back skips it
location.replace('https://example.com/new-page');

// Adds a history entry: Back returns to this page
location.href = 'https://example.com/new-page';

リダイレクトには、ほぼ常に location.replace が適しています。location.href だと、戻るボタンを押すとリダイレクトしたページに戻り、そこでまたリダイレクトされて、ユーザーは抜け出せなくなります。

サーバーでのリダイレクトを優先する

meta refresh やスクリプトは、ブラウザが古いページをダウンロードした後でしか動きません。サーバーでのリダイレクトは、HTML を送る前に、ステータスコードと新しいアドレスでリクエストに応答します。

301 (恒久的な移動) または 308: ページが完全に新しい場所に移った。検索エンジンは古い URL の評価を新しい URL に移します。
302 (発見) または 307: 一時的な移動。古い URL がメインのまま残ります。

設定方法はホスティングによって違います。よくある書き方をいくつか示します。

# Apache (.htaccess)
Redirect 301 /old-page https://example.com/new-page

# nginx (inside a server block)
location = /old-page { return 301 https://example.com/new-page; }

# Netlify or Cloudflare Pages (_redirects file)
/old-page  /new-page  301

meta refresh は、リダイレクトのルールがない静的ホスティングのように、サーバーをまったく変更できないときに使いましょう。Google は即時の meta refresh を恒久的なリダイレクト、遅延のあるものを一時的なリダイレクトとして扱うので、遅延 0 のほうが 301 に近くなります。

時間指定のリダイレクトとアクセシビリティ

遅延のあるリダイレクトは、文の途中で読者を別のページに移動させてしまうことがあります。アクセシビリティのガイドライン (WCAG) は、時間指定のリダイレクトを不適合としています。即時のリダイレクトは問題ありません。どうしても待たせるなら、ページ上でそれを伝え (「10 秒後にリダイレクトします」)、自分のペースで移動できるよう、必ずリンクを用意しましょう。

よくある間違い

リダイレクトのループ。 互いに refresh し合う 2 つのページは、読者を永遠に行き来させます。移動先のページがどこに転送するかを確認しましょう。
間違った場所を指す相対 URL。 url=new-page は現在の URL を基準に解決されるので、/docs/old からは /docs/new-page に移動します。迷ったら url=/new-page のような完全なパスを使いましょう。
代わりのリンクがない。 body には必ず新しいページへの普通のリンクを置きましょう。
リダイレクトに location.href を使う。 戻るボタンがリダイレクトのループにつながります。location.replace を使いましょう。
サーバーを管理できるのに meta refresh を使う。 代わりに 301 を設定しましょう。速く、どのツールにもわかりやすくなります。

よくある質問

HTML のページを別のページにリダイレクトするには？

古いページの <head> に <meta http-equiv="refresh" content="0; url=https://example.com/new"> を追加し、代わりの手段として body に新しいページへの普通のリンクを置きます。サーバーを管理できるなら、301 リダイレクトのほうが適しています。

HTML で 5 秒後にリダイレクトするには？

セミコロンの前の数字を秒数の遅延にします: <meta http-equiv="refresh" content="5; url=https://example.com/new">。リダイレクトされることをページ上で読者に伝え、リンクも用意しましょう。

ページを自動で更新させるには？

URL なしで遅延だけを指定した meta refresh を使います。<meta http-equiv="refresh" content="30"> は 30 秒ごとにページを再読み込みします。ページ全体を再読み込みして読者の作業を中断させるので、リアルタイムのデータには、JavaScript でページの一部を更新するほうがたいてい適しています。

meta refresh のリダイレクトは SEO に悪いですか？

Google は meta refresh に従います。即時の meta refresh (遅延 0) は恒久的なリダイレクト、遅延のあるものは一時的なリダイレクトのように扱われます。それでも推奨はサーバー側の 301 です。速く、どのクローラーとブラウザも理解できるからです。

JavaScript でリダイレクトするには？

location.replace('https://example.com/new') を使います。履歴の現在のページを置き換えるので、戻るボタンでリダイレクトしたページに戻ることはありません。location.href = url でも動きますが、古いページが履歴に残ります。