Исполняемые доки HTML: Редирект

Q: Как перенаправить HTML-страницу на другую?

Добавьте в старой страницы, а в body обычную ссылку на новую страницу как запасной вариант. Если у вас есть доступ к серверу, лучше 301 редирект.

Q: Как сделать автоматическое обновление страницы?

Используйте meta refresh с задержкой и без URL: перезагружает страницу каждые 30 секунд. Он перезагружает всю страницу и прерывает читателя, поэтому для живых данных обычно лучше обновлять часть страницы через JavaScript.

Q: Как сделать редирект через JavaScript?

Используйте location.replace('https://example.com/new'). Он заменяет текущую страницу в истории, поэтому кнопка «Назад» не возвращает на страницу с редиректом. location.href = url тоже работает, но оставляет старую страницу в истории.

Редирект через мета-тег refresh

В обычном HTML редирект это тег <meta http-equiv="refresh"> в <head> старой страницы:

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

Число это задержка в секундах, затем точка с запятой, затем url= и адрес перехода. 0 перенаправляет сразу после загрузки страницы. Вот полный файл «страница переехала». Задержка установлена в один час, чтобы превью оставалось на месте; на настоящей странице используйте 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>

Два запасных варианта делают страницу надежной: видимая ссылка (для тех, чей браузер не выполняет refresh, и для пользователей программ чтения с экрана, которые хотят выбрать сами) и <link rel="canonical">, который сообщает поисковикам, какой URL настоящий. Если изменить здесь задержку на 0, само превью уйдет на example.com; нажмите Reset, чтобы вернуть пример.

Автоматическое обновление страницы

Уберите URL, и страница будет перезагружаться сама после задержки. content="5" перезагружает каждые 5 секунд. Первый блок ниже это маленькая страница с таким тегом, за которой можно понаблюдать: время ее загрузки меняется каждые 5 секунд, а текст, введенный в поле, стирается при перезагрузке. Второй блок обновляет свои часы через 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>

Обновление заново загружает всю страницу, поэтому все, что делал на ней читатель, прерывается. Это допустимо для страницы, с которой никто не взаимодействует, например для экрана статуса на стене. Для дашбордов, счетов и лент обновляйте только ту часть, которая меняется, как делает второй блок.

Редирект через 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 на новый.
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 секунд») и всегда добавляйте ссылку, чтобы люди могли перейти в своем темпе.

Частые ошибки

Цикл редиректов. Две страницы, которые перенаправляют друг на друга, гоняют читателя бесконечно. Проверьте, куда отправляет людей целевая страница.
Относительный URL, который указывает не туда. url=new-page вычисляется относительно текущего URL, поэтому с /docs/old он ведет на /docs/new-page. В сомнительных случаях используйте полный путь, например url=/new-page.
Нет запасной ссылки. Всегда добавляйте в body обычную ссылку на новую страницу.
location.href для редиректов. Тогда кнопка «Назад» ведет в цикл редиректов. Используйте location.replace.
Meta refresh при доступе к серверу. Настройте вместо него 301; он быстрее и понятнее любому инструменту.

Часто задаваемые вопросы

Как перенаправить HTML-страницу на другую?

Добавьте <meta http-equiv="refresh" content="0; url=https://example.com/new"> в <head> старой страницы, а в body обычную ссылку на новую страницу как запасной вариант. Если у вас есть доступ к серверу, лучше 301 редирект.

Как сделать редирект через 5 секунд в HTML?

Укажите число перед точкой с запятой, равное задержке в секундах: <meta http-equiv="refresh" content="5; url=https://example.com/new">. Сообщите читателю на странице, что его перенаправят, и дайте ему ссылку.

Как сделать автоматическое обновление страницы?

Используйте meta refresh с задержкой и без URL: <meta http-equiv="refresh" content="30"> перезагружает страницу каждые 30 секунд. Он перезагружает всю страницу и прерывает читателя, поэтому для живых данных обычно лучше обновлять часть страницы через JavaScript.

Вреден ли редирект через meta refresh для SEO?

Google его учитывает: мгновенный meta refresh (задержка 0) считается постоянным редиректом, а отложенный временным. Рекомендуемым способом все равно остается серверный 301, потому что он быстрее и понятен любому краулеру и браузеру.

Как сделать редирект через JavaScript?

Используйте location.replace('https://example.com/new'). Он заменяет текущую страницу в истории, поэтому кнопка «Назад» не возвращает на страницу с редиректом. location.href = url тоже работает, но оставляет старую страницу в истории.

Связанные концепции

Редирект в HTML: meta refresh, JavaScript и 301 редирект