В чём разница между двумя типами
| Тип ссылки | Пример | Что означает |
|---|---|---|
| Абсолютная | https://site.ru/catalog/divany/ | Полный адрес с доменом и протоколом |
| Относительная от корня | /catalog/divany/ | Путь от корня текущего домена |
| Относительная от текущей страницы | ../divany/ или divany/ | Путь относительно расположения текущего документа |
Браузер разворачивает относительную ссылку в полный адрес автоматически, ориентируясь на текущий адрес страницы, но в исходном коде сайта она хранится в короткой форме.
Плюсы относительных ссылок
- Меньше кода — короче писать и легче читать в разметке.
- Переносимость между окружениями. Ссылки, записанные от корня, продолжают работать на тестовом сервере, на локальной копии и на боевом сайте без изменений, потому что не привязаны к конкретному домену.
- Автоматический учёт протокола. Относительная ссылка не завязана на http или https — если сайт целиком переведён на защищённый протокол, ссылки менять не нужно.
Плюсы абсолютных ссылок
- Однозначность в письмах, RSS, соцсетях. Вне контекста сайта — например, в email-рассылке — относительная ссылка не работает, потому что там нет «текущей страницы», от которой можно оттолкнуться.
- Надёжность при синдикации контента. Если статья копируется на другую площадку, абсолютная ссылка продолжает вести на исходный сайт, а относительная сломается и укажет на несуществующий путь внутри чужого домена.
- Явные требования некоторых тегов. Канонический адрес и микроразметка BreadcrumbList, разобранная в статье про хлебные крошки, всегда должны быть абсолютными — относительная запись там не работает надёжно.
Практическое правило. Внутренняя навигация сайта — меню, ссылки между страницами, хлебные крошки в вёрстке — используют относительные ссылки. Всё, что покидает контекст сайта или встраивается в метаданные для внешних систем — canonical, og:url, ссылки в письмах, — используют абсолютные.
Частые ошибки
Относительная ссылка от текущей страницы вместо корня. Запись вида divany/ без начального слэша интерпретируется относительно текущего пути, а не корня сайта, и при переносе одного и того же блока вёрстки на страницу другого уровня вложенности ссылка начинает вести не туда.
На странице /catalog/: divany/ → /catalog/divany/ (верно)
На странице /catalog/divany/: divany/ → /catalog/divany/divany/ (ошибка)Именно поэтому относительные ссылки от корня, начинающиеся со слэша, надёжнее — они не зависят от того, откуда именно происходит переход.
Смешанный протокол в абсолютных ссылках. Если часть ссылок на сайте прописана с http://, а сайт работает по https://, каждый такой переход проходит через лишний редирект, даже внутри одного домена.
Особый случай: canonical и hreflang
Оба этих тега технически допускают относительную запись по стандарту, но на практике многие системы обработки данных интерпретируют их надёжно только в абсолютной форме. Правило простое: любой тег в разделе head, который читает не браузер посетителя, а внешняя система — поисковый робот, агрегатор, парсер, — должен содержать полный абсолютный адрес.
Что выбрать для разных случаев на практике
| Место использования | Рекомендация |
|---|---|
| Меню и внутренняя навигация | Относительная от корня |
| Ссылки внутри текста статьи | Относительная от корня |
| Тег canonical | Абсолютная |
| Микроразметка (BreadcrumbList, Product и другие) | Абсолютная |
| Ссылки в email-рассылке | Абсолютная |
| Изображения и подключаемые файлы | Относительная от корня |
Чек-лист
- Внутренняя навигация — относительные ссылки от корня со слэшем в начале.
- Canonical, hreflang и микроразметка — только абсолютные адреса.
- Ни одна ссылка на сайте не содержит http, если сайт работает по https.
- Относительные ссылки проверены на страницах разных уровней вложенности.
Протокол-независимые ссылки: устаревший приём
Раньше существовал ещё один вариант — ссылка без протокола вовсе, начинающаяся сразу с двух слэшей: //site.ru/catalog/. Браузер подставлял тот же протокол, что использовался для текущей страницы. Этот приём был полезен, пока сайты существовали в двух версиях — http и https — одновременно. Сегодня, когда https стал единственным стандартом, необходимость в таком приёме отпала, и вместо него достаточно обычной относительной ссылки от корня.
Тег base и его влияние на относительные ссылки
Отдельная тонкость — HTML-тег <base>, который может переопределить, от какого адреса разворачиваются все относительные ссылки на странице. Он редко используется на обычных сайтах, но встречается в шаблонах некоторых конструкторов и одностраничных приложений. Если на сайте относительные ссылки ведут не туда без видимой причины, стоит проверить исходный код страницы на наличие этого тега.
Частые вопросы
Что лучше использовать в меню сайта — абсолютные или относительные ссылки?
Относительные от корня, начинающиеся со слэша. Они короче, переносимы между окружениями и не зависят от домена или протокола.
Можно ли указывать canonical относительной ссылкой?
Формально стандарт это допускает, но на практике надёжнее использовать полный абсолютный адрес — так тег корректно интерпретируется всеми системами, включая поисковые роботы.
Почему ссылка вида divany/ иногда ведёт не туда?
Потому что без начального слэша она интерпретируется относительно текущей страницы, а не корня сайта. На страницах разного уровня вложенности такая ссылка разворачивается по-разному.
Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.