Данная статья является переводом поста в блоге CSS-Tricks. Оригинальная статья доступна по ссылке.
Ниже приводится гостевой пост Робина Рендла. Я всегда хотел разместить здесь пост с обзором различных способов перенаправления сайта. Поэтому я поручил это Робину, и он проделал отличную работу!
Перенаправление состоит в том, что, когда веб-страницу посещают по одному URL, он изменяется на другой URL. Например, человек заходит в своем браузере на «website.com/page-a», а вместо этого он перенаправляется на «website.com/page-b». Это очень полезно, если мы хотим перенаправить определенные страницы в новое место, изменить структуру URL-ов сайта, убрать «www»-часть URL-адреса или даже полностью перенаправлять пользователей на другой сайт (к примеру).
Допустим, мы только что переместили наш веб-сайт и хотим закрыть старый. Однако мы не хотим, чтобы все страницы старого сайта выдавали ужасное «404 Not Found». Нам необходимо, чтобы старые ссылки перенаправляли к тому же содержанию на нашем новом сайте.
Вот наш пример: мы хотим, чтобы old-website.com/blog/post перенаправил к new-website.com/blog/post, вместе со всеми другими постами, которые используют такой же формат URL. Также было бы хорошо, если бы наши перенаправления сообщали поисковым системам, что это изменение является постоянным, поэтому они должны обновиться в соответствии с ним.
Как нам это делать? Ну, прежде чем мы начнем, мы должны немного узнать о HTTP.
Коды HTTP-ответов
Каждый раз, когда мы переходим по URL или обращаемся с запросом из браузера, мы используем протокол передачи гипертекста (Hypertext Transfer Protocol, сокр. HTTP). Пусть это и звучит как действительно крутое имя для научно-фантастического полицейского кино, на самом деле это процесс, с помощью которого мы запрашиваем с сервера ресурсы (такие как CSS, HTML и изображения). После того, как мы послали запрос, эти ресурсы будут давать ответ вроде «Эй, я здесь, пойдем!» (код ответа HTTP 200 OK). Существует много кодов HTTP-ответа. Наиболее известным является, пожалуй, 404 Not Found. Отвечать 404 статусом могут не только страницы, но и любой другой ресурс, который мы запрашиваем, будь то изображения или что-то другое.
Каждый HTTP-ответ обозначается определенным трехзначным числом, так что 404 Not Found является 4XX кодом, уточняющим, что это ошибка клиента, а 200 принадлежит к категории 2XX и обозначает успешный запрос. Нас интересует 3XX категория, такие ответы как 301 Moved Permanently или 302 Found, потому что эти коды состояний предусмотрены для перенаправления. В зависимости от метода, который мы выберем, не обязательно знать эти коды, но в ряде методов они важны.
В нашем случае мы будем использовать 301 код, потому что некоторые веб-браузеры или прокси-сервера будут кэшировать этот тип, делая старую страницу недоступной, а это в данном случае именно то, что нам нужно.
Так как же мы на самом деле осуществим перенаправление веб-страницы?
Перенаправления в HTML
Возможно, самым простым способом для перенаправления на другой адрес будет мета-тег с refresh. Мы можем разместить этот мета-тэг внутри в верхней части любой HTML-страницы, к примеру, так:
<meta http-equiv="refresh" content="0; URL='http://new-website.com'" />Атрибут «content» – это задержка перед тем, как браузер перенаправляет на новую страницу, так что мы присвоили ему значение в 0 секунд. Обратите внимание, что мы не должны устанавливать HTTP-код, но важно дважды проверить странное открытие и закрытие кавычек (если в кавычках есть кавычки, то они должны быть разных типов и соответствовать).
Хотя этот метод является самым простым способом перенаправить веб-страницу, у него есть несколько недостатков. Согласно 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");Стоит также упомянуть, что вы могли просто использовать location, так как объект window просто подразумевается. Таким же образом можно применить self или top.
С объектом location мы также можем делать много других интересных вещей, например, перезагрузить страницу или изменить URL и его происхождение.
Здесь есть несколько проблем:
- JavaScript должен быть включен и загружен/выполняться для того, чтобы все работало.
- Не очень понятно как поисковые системы на это реагируют
- Нет привязанных кодов состояния, поэтому вы не можете полагаться на информацию о перенаправлении.
Нам нужно решение на стороне сервера, которое поможет нам отправить 301 ответы в поисковые системы и браузеры.
Перенаправления в Apache
Пожалуй, самый распространенный способ перенаправления веб-страницы заключается в добавлении специальных правил в ".htaccess" для веб-сервера Apache. После этого мы можем позволить серверу со всем разобраться.
".htaccess" — это документ, который дает нам возможность отдавать приказы Apache, той небольшой части программного обеспечения, которая выполняется на сервере. Для перенаправления пользователей на наш новый сайт мы создадим новый .htaccess файл (или отредактируем существующий) и добавим его в корневой каталог на старом сайте. Вот правило, которое мы добавим:
Redirect 301 / http://www.new-website.comС любых страниц, которые посещает пользователь на старом сайте, он теперь будет перенаправлен на новый сайт. Как вы можете видеть, мы ставим код HTTP-ответа перед правилом перенаправления.
Стоит отметить, что этот вид перенаправления работает только на Linux-серверах с включенным mod_rewrite – модулем Apache, который позволяет перенаправить запрошенный URL-адрес на сервере, проверяя определенный образец и, если этот образец будет найден, он изменит запрос определенным образом. Большинство хостинговых компаний включают его по умолчанию, но если у вас есть проблема — связаться с ними будет лучшим решением. Если же вы ищите больше информации о mod_rewrite, то есть отличное руководство на tuts+. Так же есть много .htaccess-снипетов тут, на CSS-Tricks.
Возвращаясь к нашему примеру, если мы используем приведенный выше код, пользователь, переходя по адресу «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>Сначала мы проверяем, есть ли у нас модуль mod_rewrite, затем включаем его и, если файл или каталог не найден, мы отсылаем пользователя к нашей 404 странице. Будет правильно то, что пользователь увидит содержимое файла 404.html, в то время как запрошенный URL останется прежним.
Если вас не устраивает возня с ".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);Если вы создадите новый файл с именем index.js и вставите код, приведенный выше, а затем запустите index.js в командной строке, то вы увидите, что локальную версию сайта перенаправило на new-website.com. Но чтобы перенаправить все посты в секции /blog, мы должны проанализировать URL из запроса удобным для этого модулем url в Node:
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)Если вы знаете другие трюки для перенаправления страниц, пишите комментарии ниже, и я буду обновлять пост по мере поступления информации.
Автор: VirmarY
