Руководство по Meta Refresh и JavaScript-перенаправлениям
Содержание
Серверные перенаправления (301/302) — всегда правильный первый выбор. Но иногда у вас нет доступа к конфигурации сервера, или нужно перенаправление на основе условий времени выполнения — тогда на помощь приходят клиентские перенаправления.
HTML meta refresh
<!-- Перенаправление немедленно -->
<meta http-equiv="refresh" content="0; url=/new-page.html">
<!-- Перенаправление через 3 секунды -->
<meta http-equiv="refresh" content="3; url=https://newdomain.com">- ✅ Работает без JavaScript
- ✅ Одна строка HTML
- ❌ Нельзя отменить после загрузки страницы
- ❌ Создаёт ловушку кнопки «Назад» (страница снова перенаправляет при возврате)
- ❌ Плохо для SEO — Google не рекомендует
⚠️ Ловушка кнопки «Назад»
Meta refresh добавляет текущую страницу в историю браузера перед перенаправлением. Когда пользователь нажимает «Назад», он попадает на перенаправляющую страницу и снова отправляется вперёд. Избегайте этого паттерна по возможности.
Методы JavaScript-перенаправлений
window.location.href (самый распространённый)
// Добавляет текущую страницу в историю — пользователь может вернуться
window.location.href = 'https://example.com';location.replace() (без записи в историю)
// Заменяет текущую запись в истории — пользователь не может вернуться
location.replace('https://example.com');location.assign() (аналогично href)
location.assign('https://example.com');window.open() (новая вкладка)
window.open('https://example.com', '_blank');Ключевые различия
Запись в историю
- Добавляет запись:
location.href,location.assign(), meta refresh - Без записи:
location.replace()
Возможность отмены
- Можно отменить: JavaScript (используйте
clearTimeout) - Нельзя отменить: meta refresh
Когда использовать каждый
Используйте meta refresh когда
- У вас статическая HTML-страница без JavaScript
- Нужно уведомление «страница перемещена» с обратным отсчётом
Используйте location.href когда
- Нужна условная логика перенаправления
- Хотите, чтобы пользователь мог вернуться назад
if (!user.isLoggedIn) {
location.href = '/login';
}Используйте location.replace() когда
- После авторизации — не позволяйте пользователям вернуться на страницу входа
- Автоматическое перенаправление со страницы ошибки
- Перенаправление при определении мобильного/десктопного устройства
if (/Android|iPhone/i.test(navigator.userAgent)) {
location.replace('/mobile/');
}Влияние на SEO
- Meta refresh — Google официально не рекомендует; может привести к потере позиций
- JavaScript-перенаправления — Google может их обрабатывать, но медленнее, чем серверные перенаправления
- Ни один не несёт HTTP-кодов статуса — поисковые системы не могут определить, постоянное это перемещение или временное
🚨 Важно
Для любого постоянного изменения URL всегда используйте серверный 301 редирект. Клиентские перенаправления — только для динамических сценариев времени выполнения.
Типичные ошибки
Код после перенаправления продолжает выполняться
// ❌ Код ниже всё ещё выполняется
if (needRedirect) { location.href = '/other'; }
doSomethingElse(); // всё ещё выполняется!
// ✅ Используйте return
if (needRedirect) { location.href = '/other'; return; }
doSomethingElse();Петля мобильного перенаправления
// ✅ Защита от повторного перенаправления
if (isMobile && !location.pathname.startsWith('/mobile/')) {
location.replace('/mobile' + location.pathname);
}Потеря строки запроса
// ❌ Строка запроса потеряна
location.href = '/new-page';
// ✅ Сохранение строки запроса
location.href = '/new-page' + location.search;