Редирект с задержкой html. Перенаправления с помощью.htaccess, PHP, HTML и JavaScript

Четыре варианта редиректа (перенаправления) пользователей, наглядно и с примерами.

1. Редирект через Java Script - будет работать только если у пользователя включена поддержка JS на устройстве. Не парьтесь, процент пользователей без JS ничтожно мал. Если желаете проверить, насколько это не комфортно - просто отключите у себя в браузере JS на один день.

Код работающего редиректа:

2. Html редирект

Данный пример перенаправляет пользователя по нужному адресу с задержкой в 1 секунду.

Помню, в IE он отрабатывал не корректно, вернее совсем не отрабатывал. Если будете использовать - проверьте, на всякий случай.

3. Редирект на php

Просто и со вкусом, файл с расширением.php с таким содержанием:

4. Редирект через.htaccess

Redirect / http://url4trafic.ru

При перенаправлении трафика из социальных сетей в общих случаях наиболее актуален вариант из примера №1, с небольшим дополнением - а именно - с использованием ogp разметки. Чтоб было немного понятней - разметка Open Graph это протокол разметки контента страницы для отправки её содержимого в социальные сети. При публикации ссылки в социальную сеть вы можете «вручную» указать какие картинку-миниатюру и описание отображать.

Работающий пример (возможны неточности и недочёты, но оно таки работает:)

Заголовок страницы

Как это выглядит при публикации вКонакте:

Краткий разбор моментов:
- указывает что будет использоваться разметка Open Graph
- - заполняем заманчивое описание - в примере выше это «Джон Сина назвал дату своего возвращения»
- Заголовок страницы - интригующий заголовок - в примере выше это «Джон Сина возвращается к выступлениям - Новости реслинга WWE»
- - это путь к изображению, которое будет загружаться - в примере выше этот тот самые мужик в синей майке.
Чтобы ссылка получилась красивой и большой - изображение изначально должно быть достаточных размеров. Для вКонтакте например, это больше 537x240 пикселей. Лучше - больше.

Location="http://url4trafic.ru" - это как вы уже догадались url, куда мы будем отправлять пользователя.

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

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

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

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

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

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

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

Итак, 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, совершается отправка данных:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Редирект (англ. "Redirect") - это автоматическое перенаправление пользователей с одной страницы сайта на другую страницу (причем как в пределах одного сайта, так и на внешние сайты). Для поисковых систем редирект применяется для склейки адресов страниц.

У каждого редиректа есть свой номер, который отвечает за его функцию. Существуют следующие виды редиректов:

• 300 редирект - множественный выбор;
• - перемещен навсегда;
• 302 редирект - документ найден;
• 303 редирект - смотри другое;
• 304 редирект - документ не изменился;
• 305 редирект - используй прокси;
• 306 редирект - не используется;
• 307 редирект - временный редирект;

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

Существует несколько способов сделать редирект. У каждого есть свои плюсы и минусы. Ниже мы рассмотрим каждый из них в отдельности с примерами.

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

В любом из выше перечисленных вариантов будет автоматический переход на сайт http://ya.ru/

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

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

В общем виде редирект через файл.htaccess выглядит так:

• КОД_РЕДИРЕКТА - здесь указывается номер редиректа (можно не указывать, по умолчанию стоит 301);
• /АДРЕС_ОТКУДА - страница, с которой будет осуществлен переход. Обязательно должна начинаться со слэша "/";
• АДРЕС_КУДА - указываем полный адрес (URL) куда будет осуществлена переадресация;

301 редирект с сайта без www на страницу сайта с www.

В данном случае будет автоматически переход с любой страница site.ru на www.site.ru соотвественно. Например

Для обратного редиректа с www на без www (www.site.ru -> site.ru) необходимо прописать следующий код:

Все пользователи будут автоматически перенаправляться на домен http://site.ru/

Со страницы /start.html будет выполнен автоматический переход на http://site.ru/hi.html

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

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

Например, с адреса http://site/2014/11/24/primerposta/ будет 301 редирект на http://site/primerposta/ .

Редирект html делается через мета тег с помощью атрибут refresh :

В данном случае будет выполнен редирект (автоматический переход) на http://site.ru/ через 1 секунду. В content первым параметром является секунды, а вторым URL. Если секунды не указаны, то это означает 0 (мгновенный переход).

В PHP есть специальная функция header отвечающая за различные варианты переадресации.

Примеры

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

Проверить правильность настройки редиректа можно через сервис

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

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

Редиректы выполняются с помощью .htaccess , PHP скрипт , HTML мета-тегов и JavaScript .

Редиректы используются для информирования серверов о том, что контент сайта был перенесен с одного URL-адреса на другой. Делать это необходимо, когда исходный веб-адрес (цель входящей ссылки ) занимает высокие позиции в выдаче поисковых систем (SERP ). В этом случае редирект сообщает поисковому роботу, что нужный контент был перенесен, предоставляя пользователю ссылку на новый адрес.

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

Кроме этого перенаправление позволяет одинаковому контенту быть доступным по различным веб-адресам. Все альтернативные адреса перенаправляются в сторону приоритетного домена сайта:

Различают клиентские и серверные HTML meta redirect . В случае с серверными перенаправлениями происходит передача кодов состояния HTTP пользовательским агентам (браузерам и поисковым роботам ).

Когда дело доходит до перенаправлений на стороне клиента, все выглядит по-другому: они выполняются без какого-либо ответа, и никакие коды состояний не передаются. Именно поэтому не все системы поддерживают редирект. Это может привести к ситуациям, когда посетители остаются на оригинальном сайте и не перенаправляются на новую страницу.

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

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

Ниже приведены актуальные коды состояния HTTP 301 и 302 :

• redirect 301 HTML – перемещен навсегда: запрашиваемый ресурс теперь постоянно доступен по новому URL . Старый URL с этого момента становится недействительным;
• 302 – перемещен временно: запрашиваемый ресурс доступен по новому URL . При этом исходный URL по-прежнему сохраняет свою актуальность.

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

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

После того, как файл .htaccess со следующим кодом помещается в основные каталоги, запросы на исходный домен перенаправляются серверной стороной на домен www.example.com ‘ ‘:

Htaccess перенаправление на новый домен redirect 301 / http://www.example.com/

Строка кода начинается с redirect 301 HTML и определяет код состояния HTTP , который будет передан сервером. Далее следует путь к контенту, который должен быть перенаправлен. В данном случае будет перенаправлено все содержимое. В заключении целевой URL перенаправляется на URL пользовательского агента: ‘http://www.example.com’ .

Этот метод позволяет перенаправить отдельные файлы. Следующий код показывает редирект с одного сайта на другой:

Вот как выглядит постоянное перенаправление на сервере Apache с активным модулем mod_rewrite :

RewriteEngine On RewriteRule ^directory/example-document.html$ http://www.example.com/example.html

В первой строке кода модуль mod_rewrite сервера Apache активируется с помощью команды ‘RewriteEngine On’ . После этого указывается «RewriteRule » с путем к файлу перенаправления и адресом назначения. Символы ^ и $ обозначают начало и конец пути, а L означает последнее правило для соответствующего запроса. R = 301 пересылает статус HTTP 301 .

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

HTML redirect на другую страницу может также быть выполнен PHP скриптом (например, в index.php ). Следующий код отображает постоянное перенаправление к целевому URL ‘www.example.com’ :

При передаче через PHP скрипт код состояния HTTP определяется с помощью функции «header » во второй строке кода. В этом примере должен быть выполнен постоянный 301 редирект . Учитывая, что серверные перенаправления обычно выполняются на временной основе, то для постоянного редиректа нужно явно указать код состояния 301 . Адрес назначения перенаправления также прописан в ‘header ‘.

В примере перенаправление происходит на ‘http://www.example.com ‘. Функция ‘exit ‘ в четвертой строке кода заканчивает сценарий и препятствует выполнению следующей строки. Чтобы редиректы работали через PHP скрипт, блок кода должен быть расположен в начале HTML страницы. Это препятствует передаче сервером содержимого HTML на страницу перенаправления.

Если выполнение перенаправления на стороне сервера невозможно по техническим причинам, то можно использовать клиентское решение. Для этого применяется HTML метатег «refresh » и JavaScript . Недостатком перенаправления на стороне клиента является то, что серверы не передают коды состояния HTTP запрашивающим браузерам или поисковым роботам.

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

Redirect HTML index на стороне клиента оказывают негативное влияние на поисковый индекс. С клиентскими редиректами 301 не происходит явного исключения из индексации через код состояния HTTP . Это может привести к перенаправлению доменов, конкурирующих с доменами назначения, когда речь заходит о поисковых запросах, связанных с рейтингом. В отличие от серверных редиректов, которые остаются невидимыми для пользователей, клиентские всегда сопровождаются задержками.

HTML перенаправления реализуются через метатеги с атрибутом ‘http-equiv ’. Для этого нужен простой HTML-файл и соответствующий тег в заголовке для создания перенаправления. Чтобы посетители получали информацию о редиректе, в HTML-документе должно быть установлено соответствующее уведомление: «Пожалуйста, подождите. Вы будете перенаправлены … ‘. Простое перенаправление с помощью refresh выглядит следующим образом.