Как перенаправить веб-страницу

Как перенаправить веб-страницу

466

Данная статья является переводом поста в блоге CSS-Tricks. Уникальная статья доступна по ссылке.

Потому я поручил это Робину, и он сделал хорошую работу! Ниже приводится гостевой пост Робина Рендла. Я постоянно желал расположить тут пост с обзором разных методов перенаправления веб-сайта.
Это чрезвычайно полезно, раз мы желаем перенаправить определенные странички в новое место, поменять структуру URL-ов веб-сайта, убрать «www»-часть URL-адреса либо даже на сто процентов перенаправлять юзеров на иной веб-сайт (к примеру). Перенаправление состоит в том, что, когда интернет-страничку посещают по одному URL, он меняется на иной URL. К примеру, человек входит в собственном браузере на «website.com/page-a», а заместо этого он перенаправляется на «website.com/page-b».

Но мы не желаем, чтоб все странички старенького веб-сайта выдавали ужасное «404 Not Found». Допустим, мы лишь что переместили наш интернет-веб-сайт и желаем закрыть старенькый. Нам нужно, чтоб старенькые ссылки перенаправляли к тому же содержанию на нашем новеньком веб-сайте.

Также было бы отлично, раз бы наши перенаправления докладывали поисковым системам, что это изменение является неизменным, потому они должны обновиться в согласовании с ним. Вот наш пример: мы желаем, чтоб old-website.com/blog/post перенаправил к new-website.com/blog/post, совместно со всеми иными постами, которые употребляют таковой же формат URL.

Ну, до этого чем мы начнем, мы должны незначительно выяснить о HTTP. Как нам это делать?

Коды HTTP-ответов
Пусть это и звучит как вправду крутое имя для научно-умопомрачительного полицейского кино, на самом деле это процесс, с помощью которого мы запрашиваем с сервера ресурсы (такие как CSS, HTML и изображения). Опосля того, как мы отправили запрос, эти ресурсы будут давать ответ вроде «Эй, я тут, пойдем!» (код ответа HTTP 200 OK). HTTP). Существует много кодов HTTP-ответа. Более известным является, пожалуй, 404 Not Found. Отвечать 404 статусом могут не лишь странички, но и хоть какой иной ресурс, который мы запрашиваем, будь то изображения либо что-то другое. Каждый раз, когда мы перебегаем по URL либо обращаемся с запросом из браузера, мы используем протокол передачи гипертекста (Hypertext Transfer Protocol, сокр.

Нас интересует 3XX категория, такие ответы как 301 Moved Permanently либо 302 Found, поэтому что эти коды состояний предусмотрены для перенаправления. В зависимости от способа, который мы выберем, не непременно знать эти коды, но в ряде способов они важны. Каждый HTTP-ответ обозначается определенным трехзначным числом, так что 404 Not Found является 4XX кодом, уточняющим, что это ошибка клиента, а 200 принадлежит к категории 2XX и обозначает удачный запрос.

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

Так как же мы на самом деле осуществим перенаправление интернет-странички?

Перенаправления в HTML
Мы можем расположить этот мета-тэг снутри в верхней части хоть какой HTML-странички, к примеру, так: Может быть, самым обычным методом для перенаправления на иной адресок будет мета-тег с refresh.

<meta http-equiv="refresh" content="0; URL=’http://new-website.com’" />
Обратите внимание, что мы не должны устанавливать HTTP-код, но принципиально два раза проверить странноватое открытие и закрытие кавычек (раз в кавычках есть кавычки, то они должны быть различных типов и соответствовать). Атрибут «content» – это задержка перед тем, как браузер перенаправляет на новейшую страничку, так что мы присвоили ему значение в 0 секунд.

Это не безупречное решение и его вообщем не рекомендуется применять. Этот код также отключает клавишу «Назад» в старенькых браузерах. Хотя этот способ является самым обычным методом перенаправить интернет-страничку, у него есть несколько недочетов. Согласно W3C, некие браузеры бесятся, видя мета-тэг с refresh. Юзеры могут узреть вспышку, так как страничка A загрузится до этого, чем они будут перенаправлены к страничке B.

Наиболее безопасным вариантом может быть перенаправление веб-сайта с помощью JavaScript.

Переадресация с помощью JavaScript
Перенаправить на иной URL с помощью JavaScript чрезвычайно просто, мы просто должны поменять свойство location объекта window:

window.location = "http://new-website.com";
Но JavaScript очень странен и есть много методов сделать это:

window.location = "http://new-website.com";
window.location.href = "http://new-website.com";
window.location.assign("http://new-website.com");
window.location.replace("http://new-website.com");
Таковым же образом можно применить self либо top. Стоит также упомянуть, что вы могли просто применять location, так как объект window просто предполагается.

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

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

Нам необходимо решение на стороне сервера, которое поможет нам выслать 301 ответы в поисковые системы и браузеры.

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

Для перенаправления юзеров на наш новейший веб-сайт мы сделаем новейший .htaccess файл (либо отредактируем имеющийся) и добавим его в корневой каталог на древнем веб-сайте. ".htaccess" — это документ, который дает нам возможность отдавать приказы Apache, той маленький части программного обеспечения, которая выполняется на сервере. Вот правило, которое мы добавим:

Redirect 301 / http://www.new-website.com
С всех страничек, которые посещает юзер на древнем веб-сайте, он сейчас будет перенаправлен на новейший веб-сайт. Как вы сможете созидать, мы ставим код HTTP-ответа перед правилом перенаправления.

Стоит отметить, что этот вид перенаправления работает лишь на Linux-серверах с включенным mod_rewrite – модулем Apache, который дозволяет перенаправить запрошенный URL-адресок на сервере, проверяя определенный эталон и, раз этот эталон будет найден, он изменит запрос определенным образом. Так же есть много .htaccess-снипетов здесь, на CSS-Tricks. Большая часть хостинговых компаний включают его по умолчанию, но раз у вас есть неувязка — связаться с ними будет наилучшим решением. Раз же вы отыскиваете больше инфы о mod_rewrite, то есть хорошее управление на tuts+.

Ворачиваясь к нашему примеру, раз мы используем приведенный выше код, юзер, переходя по адресу «old-website.com/blog/post», будет выслан на «new-website.com», что не чрезвычайно комфортно, поэтому что он не увидит ту страничку, которую он запросил. Заместо этого мы добавим последующее правило к нашему ".htaccess" файлу, чтоб перенаправить все посты в блоге в необходимое место:

RedirectMatch 301 /blog(.*) http://www.new-website.com$1
Мы можем добавлять такие правила как: Либо, может быть, мы желаем перенаправлять отдельные странички наиболее непосредственно.

Redirect 301 /page.html http://www.old-website/new-page.html
А для ошибок мы можем перенаправлять юзеров на нашу страничку 404 (возможно, заполненную каламбурами и gif-ми):

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .* 404.html [L]
</IfModule>
Будет верно то, что юзер увидит содержимое файла 404.html, в то время как запрошенный URL остается прежним. Поначалу мы проверяем, есть ли у нас модуль mod_rewrite, потом включаем его и, раз файл либо каталог не найден, мы отсылаем юзера к нашей 404 страничке.

Раз вас не устраивает возня с ".htaccess" файлами и у вас есть установленный WordPress, существует хорошее расширение, которое может сделать все за вас.

Перенаправления в Nginx
Раз ваш сервер работает на Nginx, то в файле «nginx.conf», вы сможете добавить блок server для обработки перенаправляющих запросов:

server {
listen 80;
server_name old-website.com;
return 301 $scheme://new-website.com$request_uri;
}
Мы опять используем 301 HTTP-ответ, а переменная $scheme запросит http:// либо https:// в зависимости от того, какой протокол употреблял уникальный интернет-веб-сайт. Будет полезно повнимательнее посмотреть на HTML5 Boilerplate nginx.conf, чтоб выяснить фаворитные практики по Nginx.

Перенаправления в Lighttpd
Для серверов, работающих под управлением Lighhtpd, вы делаете перенаправление, импортируя поначалу модуль mod_redirect, а потом используя url.redirect:

server.modules = (
"mod_redirect"
)

$HTTP["host"] =~ "^(www.)?old-website.com$" {
url.redirect = (
"^/(.*)$" => "http://www.new-website.com/$1",
)
}
Перенаправления в PHP
C PHP мы можем применять функцию header, которая достаточно проста:

<?php
header(‘Location: http://www.new-website.com’);
exit;
?>
Это обязано быть помещено перед хоть какой разметкой либо хоть каким иным контентом, но есть маленькая заминка. По умолчанию функция посылает код 302, который докладывает, что содержание было временно перемещено. В нашем определенном случае нам необходимо неизменное перемещение файлов на наш новейший веб-сайт, потому мы используем 301 код:

<?php
header(‘Location: http://www.new-website.com/’, true, 301);
exit();
?>
Необязательный параметр true будет подменять ранее установленный заголовок, а 301 в конце подменяет код ответа.

Перенаправления в Ruby on Rails
Из хоть какого контроллера в проекте Rails мы можем быстро отправиться к новенькому интернет-веб-сайту с redirect_to и опцией :status установленной в :moved_permanently. Таковым образом, данный по умолчанию 302 код мы заменяем на Moved Permanently:

class WelcomeController < ApplicationController
def index
redirect_to ‘http://new-website.com’, :status => :moved_permanently
end
end
В Rails 4 есть наиболее обычный путь обработки этих запросов: мы можем добавить перенаправление в routes.rb файл, который автоматом посылает 301 ответ:

get "/blog" => redirect("http://new-website.com")
Раз же мы желаем перенаправлять все статьи блога на записи на новеньком веб-сайте, мы можем сделать это методом подмены того что выше на последующее:

get "/blog/:post" => redirect("http://new-website.com/blog/%{post}")
Перенаправления в .NET
Я никогда ничего не писал на платформе .NET, но, похоже, есть довольно точная документация на Microsoft’s Developer Network.

Перенаправления в Node.js
Дальше приводится чрезвычайно стремительная локальная установка, которая разъясняет, как перенаправления работают в Node. Поначалу мы включаем http модуль и создаем новейший сервер, за которым следует способ .writeHead():

var http = require("http");

http.createServer(function(req, res) {
res.writeHead(301,{Location: ‘http://new-website.com’});
res.end();
}).listen(8888);
Но чтоб перенаправить все посты в секции /blog, мы должны проанализировать URL из запроса комфортным для этого модулем url в Node: Раз вы создадите новейший файл с именованием index.js и вставите код, приведенный выше, а потом запустите index.js в командной строке, то вы увидите, что локальную версию веб-сайта перенаправило на new-website.com.

var http = require("http");
var url = require("url");

http.createServer(function(req, res) {
var pathname = url.parse(req.url).pathname;
res.writeHead(301,{Location: ‘http://new-website.com/’ + pathname});
res.end();
}).listen(8888);
С помощью способа .writeHead(), мы можем прикрепить путь из запроса к концу URL-строчки. Сейчас он будет перенаправлять на тот же путь на новеньком веб-сайте. Ура JavaScript-у!

Перенаправления в Flask
С фреймворком Flask для Python мы можем просто сделать маршрут, указывающий на подстраницы с функцией переадресации, параллельно указывая 301 в качестве функции, поэтому что по умолчанию устанавливается 302:

@app.route(‘/notes/<page>’)
def thing(page):
return redirect("http://www.new-website.com/blog/" + page, code=301)

habrahabr.ru Раз вы понимаете остальные трюки для перенаправления страничек, пишите комменты ниже, и я буду обновлять пост по мере поступления инфы.