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

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

http://site.ru/shop

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

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


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

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


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

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

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

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


Выше мы рассмотрели два крайних случая: чисто абсолютные и чисто относительные ссылки. Однако имеются и другие варианты ссылок. Прежде нужно сказать, что в этом мире всё относительно. Это касается и ссылок. Говоря о том, что ссылка абсолютная, нужно всегда указывать: относительно чего. Для краткости договоримся все промежуточные варианты ссылок, которые мы рассмотрим ниже, называть с помощью следующей конструкции «адрес относительно ...», хотя по сути все они будут абсолютными. Первые два варианта ссылок (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 не оказывает на них никакого действия. Действие элемента base распространяется только на html-документ, но не касается относительных URL внутри css, js, svg и др. файлов.

Заключение


Какой вариант ссылок использовать, решать вам, так как в каждом случае нужно учитывать и другие факторы. Я для внутренних ссылок использую адреса относительно главной страницы сайта (5.base-relative). Для внешний ссылок и рассылок с сайта лучше использовать абсолютные ссылки (1.absolute).
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 28

    +9
    base уже сто лет в обед, это вообще для фреймов придумывали. Не юзайте эту каку
      0
      Почему?
        +4

        Попробуйте вставить в страничку с base svg с clippath (что будет). Некоторые библиотеки тоже начинают криво работать.

          0
          Это, как раз, частный случай, особенностей якоря. В вашем коде стоит: clip-path=«url(#myClip)». Я сделал тестовую страницу специально с папкой на уровень ниже, и добавил имя папки в url: clip-path=«url(svg/#myClip)». Теперь, ваша картинка работает: http://blox.ru/svg/.

          Нужно всегда держать в голове особенность применения якорей с тегом base. Например, Angular JS в режиме HTML5 также использует base, и программисты столкнулись по началу с трудностями.
            +1

            Я не утверждал, что исправить нельзя.


            Нужно всегда держать в голове особенность применения якорей с тегом base.

            Именно из-за этого и появляются не самые приятные проблемы. Поэтому я поддерживаю первый комментарий.

              0
              Cамое простое решение — вынести svg-код в файл ".svg", где base уже не действует.
            +3
            Меняется логика работы путей. Я не говорю хуже/лучше, но она становится другой.
            Соответственно, весь ваш код, и на сервере и в браузере, должен об этом знать. Включая все либы, сторонние ресурсы и т.д.
            Особенно если у вас красивые человеко-понятные урлы, где параметры передаются в урле же, а то и во фрагменте.
            Типа /products/t-shirts/#page2
            Happy debugging, как говорится.
              –1
              1.
              Если библиотека не поддерживает стандарты HTML5, то это несерьезная библиотека.
              2.
              А в чем проблема с параметрами и хешами в ЧПУ?
              href="/shop/t-shirts/?a=1&b=2
              href="/shop/t-shirts/#comments
              это обычные ссылки.
                +1
                При чём здесь HTML5? Base — это из очень, очень лохматых времён ещё до HTML4. Тогда многие сайты представляли собой просто набор html-файлов и картинок без всякой динамики, которую часто заменяли фреймы. При переносе такого «сайта» из папки в папку на этом или другом же сервере нужно было или менять все ссылки на всех страницах и прописывать новые урлы (а с учётом качества поддержки, кхм, «стандартов» в те времена это была не самая тривиальная операция для машинной обработки), либо один раз прописать/поправить base в файле корневого фреймсета.
                Бэкенд про base в общем случае ничего не знает. От веб-сервера приходит путь от корня сайта, и задача вычленить текущий base лежит на бэкенде. Что хуже, бекенд должен выдать в ответ html, в котором все ссылки приведены с учётом base, который устанавливается «где-то выше». Т.е. каждая вьюха, компонент или что там у вас рендерит html кроме своих непосредственных параметров должно знать, а какой там на этой странице base. Я могу ошибаться, но сильно вот не уверен, что какой-нибудь Yii или другие современные фреймворки с их декомпозицией в такое умеют.
                  –1
                  Да, ошибка, оказывается base был уже с HTML3
            0
            Мы много лет пользуемся ссылками на основе base в нашей CMS — проблем пока не было, кроме одной. Програмисты, не знающие о том, что в CMS используется base, спотыкаются при первой попытке использования якоря, потом всё идет нормально.
            0
            А нельзя в base не указывать последний слеш и ставить его в начале путей? Тогда они будут выглядеть как абсолютные.
              0
              Проверено, не прокатит
              0
              href="../../" — ссылка со страницы товара на главную страницу

              href="/"
                +1
                По этой ссылке вы попадете на главную страницу, так сказать, портала http://site.ru/
                В этой же статье описан более сложный случай, а именно: на портале имеется независимый сайт (интернет-магазин), который лежит в папке http://site.ru/shop
                  +4

                  Безотносительно примера, в таком случае лучше вынести магазин на отдельный поддомен.

                    0

                    Наши СЕОшники говорят, что поддиректории лучше для SEO, чем поддомены.


                    Быстрый гуглинг выдает кучу обсуждений по этому вопросу — видать, тема и правда спорная. Но вроде, превалирующая рекомендация — поддиректории.

                –2
                Ссылки на сайте должны быть только абсолютными, в этом случае когда контент с сайта скопируют у вас есть небольшой шанс что ссылки на ваш сайт останутся. Конечно при копировании ссылки на источник могут быть удалены, изменены, но практика показывает что ссылки в том или ином виде остаются неизменными достаточно часто. Никакой значимой пользы от относительных ссылок нет (перенос сайта на другой домен вариант настолько редкий и настолько просто обходится простой заменой что его не разумно учитывать).
                  +1
                  Не совсем понятно как будет копироваться контент. Например, если просто копи-пастить в WYSIWYG редактор, то там будут стоять уже абсолютные ссылки.
                  А если говорить о ботах, то они учитывают и хост, и base, так как, на мой вгляд, самый распространенный вариант ссылок отнюдь не абсолютный, а root-relative то есть, href="/shop/".
                  –11

                  Использовать ссылки вида http://sites.ru/shop/?/t-shirts/t-shirt-life-is-good и не морочить никому голову.

                    +7
                    Удивительная тенденция на хабре последнее время — создавать посты с тем, что есть в любом учебнике по HTML.

                    Надо бы написать статью, что за тег <a>, и зачем в нём нужен target.
                      +2
                      Тоже заметил, в последнее время прямо наплыв статей, в которых разъясняется элементарщина, в частности по вебу.
                      Такое чувстсво, что на хабре в песочнице статей годных мало, поэтому модераторы закрывают на это глаза.
                        +1
                        Что плохого в том, что рассказываются основы? Когда кто-то приходит на секцию по боксу, его тоже неделю-две заставляют со скакалками прыгать, и никто же не говорит «что это за саранча тут записалась». Флажок «Tutorial» в том числе говорит о том, что статья — обучающая.
                          0
                          Все нормально, просто новое поколение подрастает, и то, что нам кажется очевидным, для них — удивительный мир открытий )
                          Тут и про favicon на днях писали, и про php -S, так что про ссылки — из той же оперы )
                            0
                            Ну напишите не элементарщину?
                          0
                          Согласен статья элементарная. Я ее сначала написал для себя, чтобы разложить все по полкам у себя в голове. Но главное решить для себя нетривиальный вопрос «root-lelative(4) vs base(5)». Надеюсь сообщество поможет мне разобраться.
                            +2
                            У меня правила следующие:
                            — отдельный проект — отдельный домен/субдомен
                            — в рамках проекта все ссылки root-relative
                            — между проектами только абсолютные (естественно)
                            — подгрузка сторонних javascript только protocol relative
                            — никогда ни при каких условиях не использовать base
                          +1
                          Использую по проектам абсолютные ссылки по четвертому примеру. Если нужно сделать http://sites.ru/shop/, то добавляю рядом с папкой основного сайта папку shop, направляю на нее shop.site.ru и не имею никаких проблем с если так можно выразиться, вложенными проектами. С CMS, которые используют относительные пути, тег base, либо абсолютные из первого примера не дружу, так как возникают нюансы при синхронизации между локальной и рабочей версиями.

                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                          Самое читаемое