Редирект HTML — це технологія World Wide Web, дозволяє зробити веб-сторінку доступною по декількох URL-адресами. Наприклад, користувач відкриває в браузері сторінку «example.com/page-1» і перенаправляється на сторінку «example.com/page-2». Сторінка, на яку відбувається переадресація, знаходиться на тому ж або на іншому сайті. Існує чотири основних види перенаправлень (редиректів): 301, 302, HTML-редирект і JavaScript-редирект.
301, «Переміщено назавжди»
Код статусу HTTP-відповіді 301 «Переміщено назавжди» використовується для постійного перенаправлення URL-адрес. Тобто поточні посилання або запису з використанням URL-адреси, на який отримано відповідь, повинні бути оновлені. Відповідь від сервера 301 має завжди включати альтернативний URL-адресу, на який повинно здійснюватися перенаправлення. Якщо це так, то браузер негайно повторить альтернативний URL-адресу. Це найкращий спосіб забезпечити редирект користувачів та пошукових роботів на потрібну сторінку. Код статусу 301 означає, що сторінка назавжди переміщено в нове місце.
302, «Знайдено» або «Переміщено тимчасово»
Код статусу 302 вказує, що запитуваний ресурс перенесений на іншу адресу. При редірект 302 «Знайдено» або «Переміщено тимчасово» сервер перенаправляє користувача на нову точку призначення, хоча початкове розташування, як і раніше використовується для запитів.
HTML-редирект
Meta Refresh редирект — це перенаправлення на стороні клієнта, він не є постійним перенаправленням 301. Це самий простий скрипт редіректу HTML. Він розміщується всередині розділу веб-сторінки, наприклад:
Атрибут» content — це затримка перед перенаправленням користувача на нову сторінку, тому його значення встановлюється в 0 секунд. Інакше перед перенаправленням на нову сторінку відбудеться завантаження вмісту поточної. Сторінка, що містить код переадресації, повинна містити лише інформацію, пов’язану з перенаправленням.
Повний вихідний код:
HTML Page Redirection
Ця сторінка перенесена на example.com
Перенаправлення сторінок в HTML 5
Наведений вище код буде працювати і HTML 5.
Javascript-редирект URL-адрес
Можна перенаправити користувача за допомогою JavaScript кількома способами. Майже всі методи переадресації JavaScript пов’язані з об’єктом window.location, який є властивістю об’єкта Window. Він контролює, яка сторінка завантажується в браузері:
window.location = «http://net-informations.com/faq»
Наведений вище код JavaScript перенаправляє користувача на сторінку http://net-informations.com/faq.
Повний вихідний код редіректу HTML:
function newPageLocation()
{
window.location=»http://net-informations.com»;
}
Перенаправлення на поточний URL-адресу з передачею параметрів
Наступний код JavaScript демонструє, як передати параметр перенаправлення зі сторінки за допомогою редіректу HTML без затримки:
function showUser(username)
{
window.location = ‘/user_detail?username=’+username;
}
Різниця між window.location та location.href
window.location — це об’єкт, що містить властивість, а location.href — це рядок. window.location є об’єктом, який містить всю інформацію про поточне місцезнаходження документа (хост, href порт, протокол тощо). location.href є скороченням від window.location.href, і це лише рядок з повним URL поточної сторінки. Значення toString() об’єкта location збігається з властивістю href, тому вони ідентичні, якщо використовуються як рядки. Налаштування window.location аналогічна налаштуванні window.location.href:
window.location.href = «http://www.example.com»;
Наведений вище код Javascript встановлює новий href (URL-адресу) для поточного вікна.
Перенаправлення URL-адреси при завантаженні сторінки
Якщо потрібно перенаправити користувача на іншу сторінку при завантаженні сторінки, можна використовувати наступний код. Він протягом 3 секунд відображає повідомлення і перенаправляє користувача на нове розташування сторінки:
function redirectPage()
{
window.location=»http://net-informations.com»;
}
Будь ласка, зачекайте….ця сторінка буде переадресована на нову сторінку….
Повернення на головну сторінку
Іноді необхідно здійснити index HTML редирект. Для цього можна використовувати наступний скрипт:
window.location = window.location.host
Є й інші способи перенаправлення сторінок за допомогою JavaScript:
window.history.back(-1);
Це те ж саме, що натиснути в браузері кнопку «Назад»:
window.navigate(â€about.jspâ€);
Як перенаправити користувача на мобільну версію сайту
Іноді потрібно перенаправити користувача на мобільну версію сайту. Наступний код JavaScript допоможе зробити це:
if (screen.width <= 699) {
document.location = «mobile/mobilepage.html»;
}
Примітка. Зазвичай смартфони мають невелику ширину екрану, тому необхідно перенаправляти відвідувачів на мобільну версію сайту, якщо використовуються ними пристрої мають ширину екрана не більш 699 пікселів.
Для iPhone і iPad
if ((navigator.userAgent.match(/iPhone/i))
(navigator.userAgent.match(/iPod/i))) {
location.replace(«http://example.com/iphone.html»);
}
Наведений вище код перенаправлення на сторінку редіректу HTML виявляє тільки iPhone і iPad. Недоліком підходу з використанням JavaScript є те, що не всі смартфони підтримують його. А також те, що користувачі завжди можуть відключити підтримку JavaScript в своїх браузерах.
Пошукова оптимізація і перенаправлення URL-адрес
Зазвичай пошукові системи використовують код статусу 301 для передачі рейтингу сторінки зі старого URL-адреси на новий. Javascript редирект повертає код стану http-відповіді 200 OK. Тому краще використовувати інші методи переадресації, які повертають код стану: 301 «Переміщено назавжди».
Наприклад, якщо потрібно повідомити пошукові системи про перенаправлення URL-адрес, необхідно додати мета-тег rel = «canonical» в розділ head. Це пов’язано з тим, що пошукові системи не аналізують JavaScript з метою перевірки перенаправлення:
У чому різниця між canonical і редиректами 301?
Коли використовуєте 301 редирект HTML, ви показуєте пошуковій системі, що поточна сторінка постійно переміщується в інше місце.
Canonical використовується для запобігання санкцій з боку пошукової системи за дублювання контенту. При його використанні поточна сторінка існує, але показується для пошукової системи, як «копія» інший «головної сторінки«. З наступного прикладу ви отримаєте чітке уявлення про це:
http://example.com/demo-1.html
http://example.com/category-1/demo-1.html
http://example.com/category-1/subcategory-1/demo-1.html
Наведені вище URL-адреси містять один і той же контент. Зазвичай пошуковим системам не подобається дубльований контент, і за це вони штрафують. Тому в даному випадку потрібно помістити на одну зі сторінок тег canonical, щоб зробити її «основний«. Наприклад, ми зробимо основний сторінкою «http://example.com/category-1/subcategory-1/demo-1.html».
Переклад статті «URL redirection» дружною командою проекту Сайтостроение від А до Я.
