Как осуществить перенаправление на другую веб-страницу с помощью JavaScript?

В данной статье мы рассмотрим разные методы JS redirect. Изучим запасные варианты перенаправления на тот случай, когда JavaScript отключен. А также влияние использования JavaScript для перенаправлений на SEO.

Перенаправление при помощи JavaScript

В идеале перенаправление должно осуществляться на стороне сервера при помощи корректного заголовка перенаправления HTTP, отправленного покупателю. Но если необходимо перенаправить посетителя при помощи JavaScript, используйте для этого один из способов, приведенных ниже:

// перенаправление на новую страницуwindow.location.href = 'http://www.example.com/';// то же, что и window.location.href =...window.location = 'http://www.example.com/';window.location.assign('http://www.example.com/');// перенаправление на другую страницу// с заменой первоначального документа в истории браузера на новыйwindow.location.replace('http://www.example.com/');

В большинстве случаев функцию replace() будет лучшим методом. Поскольку она не создаст циклического перенаправления в том случае, если посетитель нажмёт в браузере кнопку «Назад«.

Некоторые браузеры и большинство поисковых роботов не исполняют программный код JavaScript по различным причинам, так что нужен запасной вариант JS redirect page.

Запасной вариант на случай если JavaScript отключен:

Лучше всего использовать заголовки HTTP на стороне сервера, чтобы осуществлять перенаправление с соответствующим кодом. Но так как мы говорим исключительно о JavaScript-перенаправлениях, то можно использовать метатэг refresh(в секции <head></head>), чтобы приказать браузеру перезагрузить текущую страницу через указанное время. Рассмотрим следующий пример:

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

Ноль, указанный в атрибуте content, заставляет браузер осуществить перенаправление немедленно. Изменение этого параметры на положительное число прикажет браузеру сделать паузу перед обновлением страницы(значение в секундах).

Также можно без проблем реализовать запасной вариант. Например, ссылку, для устаревших браузеров, в которых тэг refresh не работает:

<p><a href="http://example.com/">Redirect</a></p>

Чтобы убедиться, что код выполняется только, когда JavaScript отключен, можно без проблем обернуть метатэг в тэги noscript:

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

Побочные эффекты:

  • Если страница выполняет перенаправление слишком быстро(то есть меньше, чем за 2-3 секунды), она может изменять поведение кнопки «Назад» в браузере. При этом каждый раз, когда вы будете перемещаться назад на исходную страницу, перенаправление осуществляется мгновенно. Это плохо в плане юзабилити, так как может «запереть» посетителя на странице, на которую он был перенаправлен.
  • Это может быть расценено как признак дорвейной страницы.
  • Ошибка или плохо спланированные JS location redirect могут создать бесконечную последовательность перенаправлений, перебрасывая посетителя туда-сюда между несколькими страницами.

Влияние JavaScript-перенаправлений на SEO:

Почему JavaScript-перенаправление может отрицательно сказаться на позиции веб-сайта в поисковых системах:

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

HTML-страница, содержащая метатег refresh, возвращает код ответа HTTP 200 OK, что отличается от кодов ответа перенаправления — 301, 302 и т.п. Как программный код ответа HTTP 200 OK с тэгом refresh интерпретируется браузером/ботом/роботом, зависит только от его задач и программного кода.

Альтернативы JavaScript-перенаправлению, не влияющие на SEO:

Лучшим методом исправить эту проблему будет:

  1. Добавление тэга link rel=canonical в секцию <head></head> веб-страницы, чтобы сообщить поисковым системам о дублировании страницы, например, <link rel=»canonical» href=»http://www.example.com/» />. Этот вариант проще реализовать, поскольку он не подразумевает каких-либо изменений на стороне сервера. Но не все поисковые системы и роботы могут принимать во внимание этот тэг.
  2. Возвращение любого из следующих заголовков HTTP со стороны веб-сервера(или серверного скрипта):
    • Заголовок перенаправления HTTP с наиболее верным кодом ответа перенаправления, например, 301, 302, и т.п.;
    • Заголовок «404 не найдено» для веб-страниц, от которых вы планируете окончательно избавиться.

Несмотря на то, что ответ 404 считается плохим с точки зрения SEO, он может иметь смысл в некоторых ситуациях. Чтобы определиться, какое действие для JS redirect to another page подходит для вас, задайте себе следующие вопросы:

  1. Существуют ли важные ссылки на страницу из внешних источников?
  2. Получает ли страница существенное число трафика?
  3. Будет ли этот URL-адрес популярным, на который пытаются попасть посетители?

Если ответ на любой из данных вопросов да, то можно без труда подумать об использовании перенаправления 3xx вместо ответа 404. Иначе может выскочить 404.

Причины этого следующие :

  • мы сэкономим трафик запросов к серверу, исключив запросы поисковых систем, пытающихся добраться до удалённых или не нужных страниц;
  • мы сможем корректно сообщить посетителю об ошибке, предоставив ему варианты поиска или иные связанные ссылки, что может улучшить пользовательский опыт.

Быстрое перенаправление после загрузки страницы

Разместив программный код перенаправления в разделе <head></head> , можно легко выполнить немедленное перенаправление. К примеру:

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

В виде альтернативы можно без труда использовать событие onload тэга body :

<body onload="window.location = 'http://example.com/'"><!-- Ваш контент здесь --></body>

Но всё, что предшествует тэгу body , будет выполнено браузером перед редиректом.

Перенаправление при загрузке страницы

Допустим, что перед выполнением JS redirect вы планируете убедиться, что страница закончила загрузку и выполнились определённые скрипты. В зависимости от того, когда необходимо осуществить перенаправление, можно использовать следующие три события:

  1. Событие window.onload : возникает, когда объектная модель документа загружена, и весь контент загружен (то есть всё загружено).
  2. Событие document.onload : возникает, когда готова объектная модель документа (строится из кода разметки). То есть перед тем, как загружаются картинки или другой внешний контент.
  3. Событие document.onreadystatechange : возникает, когда:
    • документ всё ещё загружается;
    • документ загружен, но внешние ресурсы (картинки, стили, фреймы и т.п.) ещё нет;
    • документ и все внешние ресурсы загружены (то же самое, что и событие window.onload ).

Примеры :

// Пример №1window.addEventListener('load', function(event) {// все ресурсы загруженыwindow.location = 'http://www.example.com/';});// Пример №2document.onreadystatechange = function () {switch(document.readyState) {case 'loading':// документ всё ещё загружаетсяbreak;case 'interactive':// документ загружен; сейчас возможно обращение к элементам DOMbreak;case 'complete':// страница в полном объеме загружена (то есть все ресурсы загружены)break;}}

Перенаправление по истечении некоторого времени

Чтобы отсрочить JS redirect page на пару секунд, можно без проблем использовать JavaScript-функцию setTimeout следующим образом:

// перенаправление через 3 секунды (или 3000 мс)setTimeout(function() {window.location.href = "http://www.example.com";}, 3000);
  • Время в возможности setTimeout определяется в миллисекундах (то есть 1000 мс = 1 секунда).
  • Поскольку вывод веб-страницы браузером происходит последовательно сверху вниз, тэги script (которые не отмечены атрибутами defer или async ) загружаются и выполняются до того, как выводится страница. Так что размещение кода в блоке <head></head> должно привести к немедленному выполнению кода и JS location redirec t после указанного числа миллисекунд. Но можно без проблем разместить код в конце веб-страницы. Программный код будет выполнен, когда браузер достигнет этого места в веб-документе.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *