Четыре варианта редиректа: Java Script, html, php и htaccess. Перенаправление на другую страницу с помощью JavaScript Javascript редирект на ту же страницу

Доброго времени суток, подписчики и гости моего блога. Сегодня я хочу рассказать вам очень важный и востребованный материал, механизмы которого используются на многих сайтах и веб-сервисах. А именно я объясню, что из себя представляет в JavaScript redirect.

В этой публикации вы найдете множество полезной информации о редиректе, узнаете о его главной отрасли применения. Также я расскажу, как можно создать redirect, используя php, html и даже.htaccess. И конечно же после каждой ключевой главы вы найдете примеры. А теперь приступим к разбору полетов!

Что такое redirect и с какой целью он было создан?

В переводе с английского redirect означает «перенаправлять, переадресовывать». И правда, с помощью redirect-а происходит автоматическое перенаправление пользователей на другие страницы веб-ресурсов по заранее заданному анкору (ссылке).

Каждый из вас хоть раз сталкивался с такими ситуациями, когда заходишь на один сайт , а он перенаправляет тебя на ту же страницу , только расположенную по новой ссылке. Также случаются и перенаправления пользователей на другие страницы или рекламу. Все это реализовано при помощи редиректов.

Благодаря такому механизму можно гибко управлять переадресацией: устанавливать переход на новые страницы с задержкой, в случае изменения домена перенаправлять пользователя на новый адрес по url без дополнительных действий последнего, открывать страницы в новой вкладке, организовывать redirect back при неудачной перессылке и т.д.

За такие действия в JavaScript отвечает объект document.location . На самом деле этот объект обладает рядом свойств, которые нужны для получения полной информации о веб-странице (page).

На данный момент я расскажу об одном свойстве, которое используется для перенаправления страниц – href. Если же есть желание углубить знания, то поищите информацию в документации.

Как с помощью document.location.href реализовать redirect?

Итак, document.location.href содержит в себе полный путь к страницам веб-сервиса. Если вы сейчас в любом онлайн-редакторе запустите строку document.write (document.location.href), то в ответе получите полную ссылку на вкладку, в которой это написали.

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

Я решил привести пример на конкретном задании, которое часто можно встретить среди тасков в реальных проектах.

Итак, у вас имеется какой-то веб-ресурс, который расположен по ссылке, например, http://pfd.ru. Но со временем вами был приобретен новый более подходящий домен и поэтому сайт был перенесен на новый адрес – http://ddd.ru.

Так как пользователи привыкли к старой ссылке или у них в закладки занесен этот сервис еще под старым адресом, вам нужно реализовать автоматический переход. При этом реализовать задачу нужно так, чтобы клиенты увидели изменения. Для этого необходимо написать вот такую программную реализацию:

Переадресация var delay = 6000; setTimeout("document.location.href="http://ddd.ru"", delay); Теперь сайт компании "****" располагается на новом адресе: http://ddd.ru. Через 6 секунд Вас автоматически перенаправит на него. Если переход не произошел автоматически, то перейдите по указанной ссылке: http://ddd.ru

В качестве небольшого бонуса я решил прикрепить еще один пример кода, по которому очень часто задают вопросы. Иногда возникают и другие ситуации, когда вместе с перенаправлением нужно передать некоторые данный на открываемую страницу через метод отправки POST. Такой механизм также можно реализовать через js.

Для отправки какой-либо информации в html-разметке используется тег .

…

Теперь с помощью функции, написанной на JavaScript, совершается отправка данных:

1 2 3 4

$("document").ready(function() { $("#newSite ").submit(); });

$("document").ready(function() { $("#newSite ").submit(); });

Я рассказал вам, как реализовывать переадресацию, используя средства языка js. А теперь перейдем к разбору такого же механизма, но в других языках программирования.

Redirect в html

Для осуществления перенаправления пользователя на другой сервис в html используется тег .

В примере я перенаправлю вас на официальный сайт W3C. Запустите прикрепленный код в любом доступном редакторе и проанализируйте его работу.

1 2 3 4 5 6 7 8 9

Переадресация html

Переадресация html

Расскажу немного про атрибуты тега .

означает, что в текущем браузерном окне откроется новый файл. Элемент content отвечает за время перенаправления (в данном случае 3 секунды) и адрес, на который будет совершен переход.

Однако такой подход срабатывает не всегда.

Переадресация в php

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

header («Location: https://www.w3.org/»);

После отработки строки, браузеру возвратиться трехзначный код состояния редиректа. Если в атрибутах header-а не указан тип переадресации, т.е. код 201 или 3**, то автоматически возвращается 302, который сообщает о временном перемещении.

Хочу отметить важную деталь. На сегодняшний день все уважающие себя разработчики используют редирект 301. Он позволяет:

• Осуществлять суммирование важных показателей веб-сервисов, вследствие чего даже при перемещении на новый адрес сайт не теряет своих позиций в поисковых системах;
• Производить склейку доменных имен с тройным «www» и без него;
• Перенаправлять роботов и пользователей на новые функционирующие веб-страницы, вместо устаревших.

Директива.htaccess

Вот мы плавно подошли к важной, очень полезной, но и сложной директиве.htaccess. Она представляет из себя документ с конфигурациями для Apache и аналогичных серверов. Ее действие распространяется только на тот каталог, в котором она расположена. Также возможности действуют и на подкаталоги.

301 Редирект - это способ постоянного перенаправления поисковых систем и посетителей сайта на адрес, который отличается от изначально запрашиваемого. Такой ответ сервера указывает на то, что старый url утратил актуальность, страницу переместили. После переиндексации Яндекс и Google поймут куда вы теперь хотите вести посетителей и станут предлагать пользователям новый адрес.

Удивительно, но факт: с помощью редиректа можно превратить потерю в победу и привлечь на свой ресурс еще больше трафика. Но об этом чуть позже.

Если вы хотите сделать правильную настройку 301 редиректа, обязательно изучите наше пошаговое руководство с примерами кода на все случаи и различными лайфхаками.

Для чего используется 301 редирект?

Код 301 - эффективный, простой в реализации вариант переадресации web-страницы. Это удобный способ сохранения рейтинга конкретной страницы сайта.

Основные причины, чтобы добавлять 301 редирект:

• сохранение «накопленных пользовательских сигналов» контента
• с передачей ссылочного веса новой странице;
• перенаправление трафика из других адресов на нужный;
• в случае ребрендинга и смены домена, чтобы не потерять клиентов;
• перемещение страниц;
• склейка (с www и без, http и https);
• удаление дублей страниц.

Внимание! Остановите выбор на адресе, который имеет стратегически большее значение, является предпочтительным для посетителей и поисковых систем.

Редирект можно назвать своеобразной палочкой-выручалочкой. В случае переезда всего сайта или отдельных страниц он сохранит все плоды проделанной работы: авторитет доменного имени и ранжирование в поиске. Главное - использовать перенаправление по назначению.

Сегодня вы получите 22 конкретных примера установки кода 301 и пять важных рекомендаций. С последних и начнем!

Важно! Ошибки в настройках редиректов уменьшают эффект их использования.

1. Избегайте редиректов, идущих друг за другом. Каждая последующая переадресация увеличивает нагрузку на сервер, уменьшает эффективность редиректов.

Правильным в данном примере должен быть редирект с 1 шага на 3й.

2. Размещайте правила редиректов от частных правил к общим так как противоречия частных общим могут вызывать их не срабатывание. Если частные будут ниже общих, в случае противоречий правил будут срабатывать общие как те, что идут первее по списку.

3. Из-за того что браузеры обычно запоминают перенаправления, лучше проверять код состояния HTTP через специальный сервис .

4. Переадресация не должна быть циклической, то есть странице нельзя ссылаться на саму себя.

Пример циклического редиректа: со страницы без слеша в конце URL стоит 301 редирект на страницу со слешем, на которой стоит 302 редирект обратно:

5. Полезный редирект - тот, что ведет на страницу, которая во всех нюансах повторяет запрашиваемую.

Популярные виды редиректов

Желаете узнать, как сделать переадресацию? Сначала надо ознакомиться с названиями и особенностями самых используемых статусов.

301

Это постоянный редирект, обозначающий, что старый адрес страницы стоит считать устаревшим, контент находится на новом месте. Передает на новый документ почти весь (нет точных данных) ссылочный вес и склеивает накопленные внутренние метрики.

302

Представляет собой временный редирект. Не склеивает накопленные внутренние метрики страницы.

Статус ответа сервера зависит от версии протокола HTTP:

• HTTP 1.0 - текущая публикация временно перемещена на другой url (Moved Temporarily);
• HTTP 1.1 - документ не найден (изменения ответа на Found).

307

307 Moved Temporarily подходит лишь для исключительных случаев - действительно кратковременного переезда контента, например, при техническом обслуживании.

Meta Refresh

Обновления Meta являются переадресациями, которые осуществляются не на уровне сервера, а на самой странице. Чаще всего такой код ответа связан с пятисекундным обратным отчетом, дополненным текстом «Если переход не произошел за пять секунд, нажмите здесь».

Важно! В использовании постоянного редиректа нет необходимости, если ваш переезд временный или связан с проблемами старого доменного имени. При получении бана или фильтра вы перенесете прошлые проблемы на новый адрес.

В чем разница между постоянной и другими переадресациями?

302 и 301 редирект похожи между собой. Тем не менее для большинства случаев оптимальным решением станет именно постоянная переадресация.

Эти коды ответа HTTP не одинаково воспринимаются роботами и, соответственно, по-разному влияют на поисковую выдачу. Редирект 301 - знак того, что поисковику стоит забыть о старом адресе и больше никогда на него не заходить. А 302 дает сигнал о продолжении индексирования контента, размещенного на изначально запрашиваемой странице.
В случае 301 перенаправления утратившая актуальность публикация перестанет отображаться в поисковой выдаче. При 302 редиректе в индексе будут присутствовать обе страницы.

По сути, лучше всегда ставить код 301.

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

Опыт из практики: 301 редирект против 302

Статус 302 - временная мера, сообщающая поисковикам о том, что на старой странице проходят технические работы и ее надо сохранить в выдаче.

Рассмотрим на примере. Сайт изменил доменную зону, а затем еще и обзавелся защищенным протоколом https. Однако разработчики настроили не постоянное, а временное перенаправление.

Во время работы 302 редиректа в индексе Яндекса и Google находилось 3 копии одной и той же интернет-площадки. Из-за этого произошло существенное проседание позиций.

Когда ошибка была исправлена, роботы склеили дубли, исключив лишние страницы из своей выдачи. Сайт снова вернулся в ТОП.

301 редирект vs Canonical

Несмотря на определенные нюансы, поисковые системы установили четкие правила использования команд. Вот как их понимают Гугл и Яндекс:

• 301 - «Моя страница навсегда переехала в другое место, она не вернется. Удалите, пожалуйста, ее из своего индекса и передайте вес новому документу».
• Canonical - «У меня имеется несколько версий содержания страницы. Просканируйте, пожалуйста, приоритетную для меня копию, которую я пометил canonical. Остальные материалы тоже будут доступны пользователям, но индексировать их не нужно».

Когда лучше применить 301 редирект:

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

Случаи использования rel=«canonical»:

• если статья имеет нужные посетителям дубли, например, описания
• одной и той же продукции, но разного цвета;
• когда постоянное перенаправление реализовать трудно;
• для кросс-доменов с похожими статьями;
• при разных адресах одного контента (сортировка каталога).

Где настраивается 301 редирект?

В зависимости от движка, переадресацию можно выполнить разными способами.

.htaccess, или httpd.conf для Apache

Это популярный благодаря своей простоте метод, для осуществления которого надо создать файл под названием.htaccess в папке сайта. Или отредактировать, если он уже предусмотрен движком.

Важно! Перед любыми изменениями сделайте Backup редактируемого файла (или всего сайта)

Для постоянного перенаправления пропишите в начало файла, подставив свои данные:

• Редирект всего сайта на другой адрес:

Redirect / http://new-site.ru/

• Редирект с одной страницы на другую:

Redirect 301 /page-1 .html /page-2 .html

• Редирект с www на без www:

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www.example\.ru
RewriteRule ^(.*)$ http://example.ru/$1

• Переадресация с HTTP на HTTPS

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}

Учтите, что при работе с файлом команда происходит на уровне сервера с ОС Linux или Apache с активированным модулем Mod_rewrite.

Вы можете изменить.htaccess редирект конфигурационным файлом hpptd.conf. В таком случае удастся создать меньшую нагрузку на сервер, однако у веб-мастеров обычно нет к нему доступа.

Через плагины в CMS

Редирект на другой сайт легко настроить при помощи специального плагина. Так, для WordPress подойдет расширение Simple 301 Redirects . Единственный недостаток дополнительного модуля - ручное формирование списка адресов для переадресации.

Через PHP-условие

Такое решение подойдет тем, кто отлично знает структуру web-проекта и разбирается в PHP. Если сайт сделан на CMS, попробуйте открыть файл index.php в корне движка и прописать там:

if ($_SERVER [ "REQUEST_URI" ] == "/index.php" ) {
header ("Location: /" , TRUE , 301 ) ;
exit () ;
}

(в первой строке укажите старый url, а во второй - новый)

Кроме того, перенаправление PHP можно сделать при помощи отправки заголовков (скрипта):

ASP редирект

ASP.NET редирект

Найдите в корне своего сайта файл web.config и вставьте в секцию синтаксис:

< script runat= “server ”>
private void Page_Load(object sender, System.EventArgs e)
{
Response .Status = “301 Moved Permanently”;
Response .AddHeader (“Location”,“http: //www.new-url.com”);
}

ColdFusion редирект