Какие ссылки использовать: абсолютные или относительные

Имеется в виду: какие адреса использовать для переходов внутри сайта? Допустим, мы хотим создать на домене site.ru с уже работающим сайтом другой подсайт, файлы которого будут находиться в папке shop. URL этого подсайта будет такой: http://site.ru/shop . Почему мы усложнили задачу, будет ясно в конце данной статьи.

1. Абсолютные ссылки

Ссылка на главную страницу магазина
href="http://sites.ru/shop/"

Ссылка на страницу товара
href="http://sites.ru/shop/t-shirts/t-shirt-life-is-good/"

2. Относительные ссылки

При использовании относительных ссылок за точку отсчета каждый раз берется отправная страница.

Ссылка с главной страницы на страницу товара
href="t-shirts/t-shirt-life-is-good/"

Ссылка со страницы товара на главную страницу
href="../../"

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

Промежуточные варианты

Выше мы рассмотрели два крайних случая: чисто абсолютные и чисто относительные ссылки. Однако имеются и другие варианты ссылок.

Прежде нужно сказать, что в этом мире всё относительно. Это касается и ссылок. Говоря о том, что ссылка абсолютная, нужно всегда указывать: относительно чего. Например, ссылка http://site.ru/shop/ абсолютна только в пределах World Wide Web, в масштабах же Солнечной системы она уже не будет абсолютной.

Для краткости договоримся все промежуточные варианты ссылок, которые мы рассмотрим ниже, называть с помощью следующей конструкции "адрес относительно ..." , хотя по сути все они будут абсолютными. Первые два варианта ссылок (1 и 2) будем по-прежнему называть просто "абсолютными" и "относительными".

3. Адрес относительно протокола (protocol relative)

Главная страница магазина
href="//sites.ru/shop/"

Страница товара
href="//sites.ru/shop/t-shirts/t-shirt-life-is-good/"

Google рекомендует переходить именно на адреса без указания протокола. Однако, неизвестно, как долго будет длиться переходный период, так как сейчас считается, что http:// и https:// — это разные сайты.

4. Адрес относительно корневой папки домена (root relative)

Главная страница магазина
href="/shop/"

Страница товара
href="/shop/t-shirts/t-shirt-life-is-good/"

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

5. Адрес относительно главной страницы сайта (base relative)

В HTML есть тег <base>. Он задает базовый адрес, который будет автоматически добавляться ко всем относительным ссылкам и якорям. Ставить этот тег нужно в разделе <head>. В качестве базового адреса мы укажем URL главной страницы:

<base href="http://sites.ru/shop/">

Главная страница магазина
href=""

Страница товара
href="t-shirts/t-shirt-life-is-good/"

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

Остается только привыкнуть к тому что, хотя адреса и записаны, как относительные, ведут они себя как абсолютные. Особенно нужно помнить о якорях, так как привычная конструкция href="#comments" теперь производит переход не в пределах текущей страницы, а переводит на главную страницу, так как впереди будет автоматически приписан URL главной страницы. Теперь впереди хеш-тега нужно явно прописывать адрес текущей страницы: href="t-shirts/t-shirt-life-is-good/#comments".

Что касается "настоящих" абсолютных ссылок (1, 3, 4), то они работают как обычно — тег base не оказывает на них никакого влияния.

Заключение

Какой вариант ссылок использовать, решать вам, так как в каждом случае нужно учитывать и другие факторы. В Blox CMS для внутренних ссылок используются адреса относительно главной страницы сайта (вариант 5). Для внешний ссылок и рассылок с сайта лучше использовать абсолютные ссылки (вариант 1).


Примечания

  • Действие элемента base распространяется только на html-документ, но не касается относительных URL внутри css, js, svg и др. файлов.


См. также