Автоматическое перенаправление с одной HTML страницы на другую

Быстрый ответ

Для того чтобы мгновенно переадресовать загрузку с одной страницы на другую, используется тег <meta> с атрибутами http-equiv="refresh" и content="0;url=цель-переадресации".

Пример:

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

После загрузки страницы посетитель немедленно перенаправляется на https://www.example.com.

Использование HTML для переадресации: классический подход

Учитывая разные версии браузеров и пользовательские настройки, которые в некоторых случаях блокируют обновление <meta>, рекомендуется предусмотреть запасной вариант ссылки.

<noscript>
  <meta http-equiv="refresh" content="0; URL='http://www.example.com'"/>
  <a href="http://www.example.com">Перейдите по ссылке</a>
</noscript>

Те браузеры, для которых отключен JavaScript, обрабатывают резервную ссылку и осуществляют переадресацию.

JavaScript-перенаправление: динамичное и гибкое

Если требуется повышенный контроль или отсутствие перенаправления до проверки условий, использование JavaScript позволяет изменить адрес в процессе работы.

window.location.href = "https://www.example.com";

Если нужно более мягкое перенаправление, укажите задержку:

setTimeout(function(){
  window.location.href = "https://www.example.com";
  // Задержка, кажущаяся лишней сегодня, может предотвратить проблемы завтра, связанные с немедленной переадресацией
}, 3000); // задержка составляет 3 секунды

Серверное перенаправление: излюбленный приём SEO-специалистов

Поисковые системы предпочитают 301-й код перенаправления. Он переносит поисковый рейтинг с оригинальной страницы на новую, обеспечивая сохранность SEO-рейтинга.

Redirect 301 /oldpage.html /newpage.html

В приложениях на WordPress можно использовать плагины, такие как Redirection, для работы с перенаправлениями на профессиональном уровне без необходимости писать код.

Визуализация

Вы блуждаете по интернет-автостраде 🛣️ (текущая HTML-страница)

И вдруг перед вами появляется указатель:

🚧 СЛЕДУЮЩИЙ СЪЕЗД: Новое Место Назначения (Целевая HTML-страница) 🚧

<!-- И именно здесь происходит магия на вашей HTML-странице -->
<meta http-equiv="refresh" content="0; URL='http://www.newdestination.com'" />

🚗💨 Ваш браузер немедленно сворачивает на указанный съезд!

Пункт назначения: 🏁 Новое Место Назначения (www.newdestination.com)

SEO и UX: Заботимся о Google и пользовательском опыте

SEO и UX должны работать в гармонии при реализации переадресаций. Следуя рекомендациям Google:

1. HTTP-коды состояния уведомляют поисковые системы о контексте.
2. Избегайте цепочек переадресаций – они плохо воспринимаются пользователями и поисковыми ботами.
3. rel="canonical" указывает на предпочтительную версию, когда существуют страницы с похожим контентом.

<link rel="canonical" href="http://www.example.com/newpage" />

Не забывайте, что скорость загрузки влияет на рейтинг страницы. Мета-обновление может работать медленнее других методов.

Всегда готов к плану Б: ручной откат

Если перенаправление внезапно отказывает, на помощь придёт ручная резервная ссылка!

<noscript>
  <meta http-equiv="refresh" content="0; URL='http://www.newdestination.com'"/>
  <a href="http://www.newdestination.com">Если переадресация не произошла, нажмите здесь. Или просто продолжайте просмотр текущей страницы!</a>
</noscript>

Полезные материалы

1. Перенаправление в HTTP – HTTP | MDN
2. Как выполнить переадресацию на другую веб-страницу – W3Schools
3. Как реализовать перенаправление веб-страницы | CSS-Tricks
4. JavaScript – Как осуществить переадресацию на другую веб-страницу? – Stack Overflow
5. Как выполнить переадресацию одной HTML-страницы на другую при загрузке – Stack Overflow
6. Мета-элемент – W3C Wiki
7. Перенаправления и поисковой Google | Google Search Central