Абсолютные и относительные ссылки. Что это значит и чем они отличаются?
Хоть интернет и полон информации о seo и продвижении сайтов, найти что-то про абсолютные и относительные ссылки непросто. Поэтому начинающие вебмастеры часто путаются в этих понятиях и не понимают, когда какой вид линков использовать. В этой статье мы подробно рассмотрим эти виды ссылок и разберемся в их преимуществах и недостатках.
Что такое абсолютные ссылки?
Это классический линк, к которому мы все привыкли. Он содержит в себе информацию о протоколе передачи данных (http или https), имя домена и, если необходимо, расположение целевой страницы.
И в HTML это будет выглядеть так: Артджокер
А если мы хотим направить посетителей на наш блог, ссылка будет выглядеть вот так: https://artjoker.ua/ru/blog/
И в HTML это будет иметь такой вид: блог студии Артджокер
Абсолютные ссылки оказывают влияние на позиции сайта в поисковой выдаче, если они размещены на сторонних ресурсах. Размещение таких линков на разных сайтах-донорах называется линкбилдингом. Однако, если подобные ссылки ведут на другие страницы того же сайта, на котором они находятся, они могут загромождать код и увеличивать время загрузки ресурса.
Поэтому заменить относительные ссылки на абсолютные — не всегда правильное решение. Если они предоставляют навигацию внутри сайта, лучше оставлять их относительными.
Что такое относительные ссылки?
Относительная ссылка приведет пользователя на страницу, которая находится в пределах просматриваемого сайта. То есть, это инструмент внутренней навигации. Такой линк не будет содержать в себе информацию о протоколе передачи данных и имя домена. Он отображает только месторасположение нужного документа (страницы) и выглядит подобным образом: /ru/blog/
В HTML ссылка будет иметь такой вид: блог студии Артджокер
Каждый раз, когда в структуру сайта вносятся изменения, нужно проверять перелинковку на SEO ошибки. Для этого необходимо найти относительные ссылки на сайте — можно использовать специальные инструменты — и выявить нерабочие. Сломанные линки могут плохо повлиять на позиции сайта в поисковых системах.
Чем плохи относительные ссылки?
Нельзя сказать, что они чем-то плохи или хороши. Они просто отличаются от абсолютных и служат другим целям. Более того, если речь идет о внутренней перелинковке, относительные ссылки лучше абсолютных. Ведь они не загромождают код и не ломаются даже если осуществить смену домена или переход на https.
Чем отличаются абсолютные ссылки от относительных?
Давайте подытожим, чем же отличаются относительные ссылки от абсолютных. Абсолютные ссылки:
- содержат полный адрес сайта (протокол передачи данных, доменное имя, целевую страницу);
- используются на сторонних ресурсах для линкбилдинга;
- применяются в основном для внешней оптимизации сайта.
- содержат только информацию о расположении целевой страницы;
- работают только внутри сайта;
- помогают поисковым роботам пройти всю структуру сайта и правильно его проиндексировать;
- используются для внутренней оптимизации и навигации.
Как видите, эти два вида линков имеют совершенно разное назначение. Поэтому сравнивать их пользу невозможно — оба типа полезны для своих целей.
Поделись своей эмоцией после прочтения статьи
Отлично!
Хорошо!
Любопытно..
Не очень
О чем это?
Спасибо, ваша оценка важна для нас
Поделитесь вашим email Спасибо за подписку!
Подпишитесь на нашу рассылку, чтобы получать интересные материалы и инсайты из жизни компании Мы будем готовить для вас только самые актуальные и интересные материалы ��
Относительная ссылка
Относительная ссылка — ссылка, указывающая на неполный путь к файлу или странице. Путь такой ссылки высчитывается относительно текущей страницы или корня сайта.
Разница между относительными и абсолютными ссылками
Абсолютная ссылка включает полный URL. Например, «http://www.site.ru/folder/page.html». В относительной ссылке указывается только путь к странице без домена. Например:
- «page.html» — ссылка относительно текущей страницы;
- «/folder/page.html» — ссылка относительно корня сайта;
- «../» — ссылка на папку выше текущей страницы.
Для того чтобы все документы сайта всегда легко находились, лучше использовать абсолютные ссылки. Применение относительных ссылок может привести к тому, что при изменении структуры сайта некоторые ссылки могут оказаться нерабочими.
Преимущество использования относительных ссылок в том, что при переносе сайта на другой домен (без изменения структуры сайта), не придется менять доменные имена во всех ссылках.
Для указания ссылок на внешние ресурсы (на других доменах) необходимо использовать абсолютные ссылки.
Абсолютные и относительные ссылки
Это короткая шпаргалка о том, как правильно ставить ссылки и не теряться в адресах.
Абсолютные ссылки
Абсолютная ссылка — это адрес ресурса целиком. Обычно такие ссылки ставят на сторонние ресурсы и надеются, что адрес не изменится.
https://htmlacademy.ru https://htmlacademy.ru/blog/boost/tools/chrome-devtools-2 Не забывайте — если вы используете абсолютные ссылки на сайте, то при смене структуры папок или перемещении файлов большинство ссылок могут сломаться.
Относительные ссылки
То, куда ведут относительные ссылки, зависит от расположения текущей страницы. Посмотрим на примере:
Предположим, мы загрузили страницу по такому адресу:
https://htmlacademy.ru/blog/frontend/html/index.html Во всех примерах ниже приведены относительная ссылка и полный путь, в который браузер расшифровывает ссылку.
Ссылка на файл в той же папке
1.html https://htmlacademy.ru/blog/frontend/html/1.html Файл расположен в той же папке, где и текущая страница. Пишется без дополнительных знаков.
Ссылка на файл в папке ниже текущей
directory/3.html https://htmlacademy.ru/blog/frontend/html/directory/3.html Файл в дочерней папке относительно текущей. Перед именем файла через / пишем название папки.
dir1/dir2/5.html https://htmlacademy.ru/blog/frontend/html/dir1/dir2/5.html Страница находится на две папки ниже текущей.
Ссылка относительно корня сайта
/2.html https://htmlacademy.ru/2.html Файл расположен в корневой папке сайта. Для ссылки относительно корня используется / . Такая ссылка сработает только на веб-сервере — с локальными файлами на компьютере это не сработает.
/dir1/dir2/4.png https://htmlacademy.ru/dir1/dir2/4.png Файл на два уровня ниже корня сайта.
Ссылка на папку выше текущей
../6.html https://htmlacademy.ru/blog/frontend/6.html На одну папку «вверх» относительно текущей. Для «подъёма» используется синтаксис ../ .
../../7.html https://htmlacademy.ru/blog/7.html На две папки вверх. Синтаксис ../ может повторяться сколько угодно раз, главное, чтобы все папки «по пути» существовали.
Комбинированная ссылка
../../../dir1/dir2/8.html https://htmlacademy.ru/dir1/dir2/8.html На три папки вверх и на две папки вниз относительно текущей — поднялись до корня и последовательно спустились в папки dir1 и dir2 .
Все приведённые примеры одной картинкой:
id-ссылки (якорные ссылки)
Якорные ссылки пригодятся, если нужно сослаться на определенное место документа — например, на заголовок. Для этого заголовку нужно установить определенный атрибут id , а в ссылке через # дописать этот атрибут в конце.
Содержание первой главы Ставим якорную ссылку на той же странице:
Ставим якорную ссылку на другую страницу:
Пройдите интерактивный тренажёр по якорным ссылкам, чтобы узнать наверняка, как это делается.
Что будет, если ошибиться
Файл, на который вы ссылаетесь, не загрузится — появится ошибка 404. Если так случилось, можно посмотреть через Chrome DevTools, что с адресом.
Ещё можно по незнанию поставить ссылку на файл на своём компьютере, а потом удивляться, почему не грузятся картинки. Такое в 1998 произошло на сайте Microsoft Game Studios. Разработчики оставили ссылку на файл на диске H:/ .
Сейчас, конечно, такого никто в больших компаниях не допустит — но если вы сначала делаете страничку на своём компьютере, могут быть нюансы. Поэтому пользуйтесь нашей шпаргалкой, чтобы избежать ошибок.
Ссылки — сила:
- Что такое ссылки и как их ставить. Тег a
- Как ставить пустые ссылки
- Что лучше использовать: ссылки или кнопки
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Простое диалоговое окно на HTML
Вот короткое демо:
- 18 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
- 18 сентября 2023
Атрибут class в HTML на примерах
Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
- 14 сентября 2023
В чём отличия цитат blockquote, cite и q
В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.
- 12 сентября 2023
Осмысленный alt-текст: 6 правил
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 31 июля 2023
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023
Как понять, что перед вами заголовок
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023
Как правильно вставлять SVG
Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.
SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~ Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.
- 1 июня 2023
Как создавать адаптивные изображения. Атрибут srcset
Адаптивные изображения автоматически изменяют свой размер, чтобы соответствовать экрану пользователя, что улучшает вид страницы и ускоряет загрузку.
Давайте рассмотрим несколько способов создания адаптивных изображений.
�� В статье мы говорим о пикселях и ретина-дисплеях. Если вы не знаете, что это такое — прочитайте статью.
- 25 мая 2023
Абсолютные и относительные ссылки в HTML
В нашем справочнике есть целый раздел, посвященный HTML.
Рассмотрим, что они из себя представляют ссылки в HTML в абсолютном и относительном вариантах.
Так как гиперссылка, которая неразрывно связана с гипертекстом, является частным случаем ссылки, то в ракурсе рассматриваемой нами темы эти термины можно считать тождественными.
Абсолютный и относительный пути в ссылках
Основным отличительным признаком любой ссылки является наличие URL адреса, который чаще всего содержит абсолютный путь (полный) до страницы или файла:
http://site.ua/category1/single-page1 http://site.ua/catalog1/file1.htmlВ таком виде мы вводим ссылки в поисковую строку браузера для получения доступа с объекту. При этом любой URL обязательно начинается с наименования протокола передачи данных и включает имя домена («http://site.ua/»). Именно в подобном виде путь до объекта (веб-страницы или файла) используется в качестве параметра атрибута href при создании абсолютной ссылки с помощью средств HTML для ее последующей вставки в контент заданной странички (документ):
анкор анкорАбсолютные гиперссылки можно теоретически использовать везде, но на практике их применяют чаще тогда, когда нужно сослаться на внешний веб-ресурс, а относительные более эффективны при переходах в пределах одного сайта, поскольку они короче и не загромождают HTML код.
Варианты относительных ссылок
Если представленный выше пример полного пути в URL-адресе немного модифицировать, убрав «http:», то как раз получится образец относительного пути:
//site.ua/category1/single-page1 //site.ua/catalog1/file1.htmlЕсли же привлечь средства HTML, то можно создать ссылку относительно протокола:
анкор анкорТакой вариант вполне работает не только в пределах домена, но и на сторонних веб-страницах, причем независимо от того, какой протокол (HTTP или HTTPS) установлен для конкретного сайта. Поэтому на практике данный вид относительных ссылок с успехом можно применить, к примеру, в случае перевода веб-проекта на безопасный протокол HTTPS.
Пойдем далее и вдобавок к названию протокола уберем еще и двойной слеш вместе с доменным именем. Получится другая вариация относительного пути:
/category1/single-page1 /catalog1/file1.htmlНа его основе таким же образом создается относительная гиперссылка:
анкор анкорВозьмем для наглядности пример с файлом (file1.html).
Такой линк будет работать только лишь в том случае, если файл расположен в папке (каталоге), которая, в свою очередь, находится в составе корневой директории вебсайта. То есть, путь до файла (в составе URL, который служит параметром атрибута href) будет указан относительно корня веб-ресурса:
Если файл (в нашем примере file2.html) входит напрямую в состав корневой директории, то путь к нему относительно корня (site.ua) примет такой вид:
Тут самый первый слеш «/» заменяет корневую папку «site.ua/». То есть, при создании перехода на главную страницу сайта с любой его страницы можно использовать короткую конструкцию:
Тот же самый принцип работает и при проставлении линков с одной веб-страницы проекта на другую. Образцом может служить тот же блог WordPress, где есть главная страница, статические и привязанные к определенным рубрикам (категориям) веб-страницы записей.
Скажем, с абсолютно любой странички проекта можно проставить относительную ссылку на иную страницу с указанием рубрики.
Возьмем для примера такой блог, в котором есть рубрика «HTML» и эта статья внутри рубрики:
А, скажем, относительная ссылка на статическую веб-страницу (которая не принадлежит ни одной рубрике, но входит в состав корневой папки «Блог.com») с любой другой странички в пределах одного проекта может выглядеть так:
Итак, мы выяснили, что гиперлинки именно относительно корневой папки обычно и используются на практике, когда необходимо сослаться с одной страницы сайта на другую.
Теперь давайте рассмотрим еще несколько случаев создания линков относительно текущего веб-документа (файла или web-страницы), а не корня сайта. Здесь один из файлов будет донором (с которого проставлена ссылка), а другой акцептором (на который ведет гиперссылка).
1. Файлы расположены в одной папке:
В этом случае относительная ссылка будет содержать только лишь название документа, который является акцептором (обратите внимание, что знак слеша тут опущен, так как путь указывается не относительно корня, а вполне конкретной папки):
2. Файлы находятся в разных директориях, причем документ, на который необходимо сослаться, располагается внутри каталога, находящегося в одной папке, содержащей донор:
Тогда в процессе создания относительной гиперссылки в содержании донора следует прописать дополнительно директорию, где находится акцептор:
Если целевой файл, на который указывает ссылка, находится еще на уровень ниже относительно донорского документа в иерархической структуре (к примеру, располагается в catalog3, который вложен в catalog2), то путь будет таким:
И так далее, в зависимости от количества вложенных друг в друга директорий.
3. Теперь разберем обратную ситуацию, когда документ-акцептор располагается на уровень (или несколько) выше донорского файла:
При таком раскладе перед наименованием файлика необходимо поставить слеш «/» и двоеточие, означающее, что акцептор расположен на один уровень выше:
Если документ, на который ссылаются, находится на целых два уровня выше (скажем, донорский документ пребывает в папке catalog3, которая вложена в catalog2), то HTML код относительной гиперссылки примет следующий вид:
Как вы, наверное, поняли, подобных уровней может быть сколько угодно много, все зависит от файловой структуры вашего веб-проекта. Чем больше уровней между акцептором и донором, тем большее количество двоеточий и слешей необходимо указать.
4. Есть еще вариант, когда акцептор и донор расположены в разных папках одного уровня:
Для того, чтобы сформировать относительный гиперлинк, нужно перейти на один уровень выше (catalog), а в пути указать директорию документа, на который будем ссылаться:
5. Ну и теперь самый сложный случай. Это когда документ, содержащий относительную ссылку, и файл, на который она ведет, располагаются в разных папках, причем директория с донором находится на один или несколько уровней выше папки с акцептором:
Если разница 1 уровень, то относительной ссылкой является такая:
Это только основные примеры относительных ссылок, на самом деле их гораздо больше. Но главное — понять суть алгоритма их создания. Тем более, что все другие вариации будут просто производными от выше указанных.
Особенности относительных и абсолютных гиперссылок
Если в качестве целевого объекта абсолютной или относительной ссылки указать не файл, а всю директорию, то в конце URL желательно прописывать слеш:
text anchorТем самым вы указываете серверу, что необходимо открыть для просмотра весь каталог, а не конкретный файл. Если же опустить значок «/» и оформить гиперссылку вот так:
text anchor. то серверный обработчик сначала начнет поиски файла «uploads», именно в таком виде (без расширения), а уже затем отыщет папку с таким именем. Проставив сразу же слеш, вы сэкономите ресурсы сервера, на котором располагается сайт.
Также необходимо иметь ввиду, что в целях безопасности содержимое любого рабочего каталога сайта должно быть скрыто. Поэтому веб-сервер обычно сконфигурирован таким образом, чтобы воспрепятствовать отображению его файлов. Например, вместо этого может быть показан пустой индексный файл index.php либо index.html (в браузере это будет просто белая страница).
Я настоятельно рекомендую проверить, так ли обстоит дело на вашем сайте. Например, если у вас веб-проект под управлением WordPress, то изучите соответствующий материал, повествующий о базовых настройках защиты при использовании в том числе этого метода (правда, в современных версиях WP данная ситуация уже под контролем, но проверка не помешает).
В общем-то, принцип создания абсолютных и относительных ссылок действует и в отношении стандартных веб-страниц сайта. Но, поскольку львиная доля вебмастеров (особенно это касается владельцев полномасштабных веб-ресурсов, а не одностраничников) использует для управления веб-ресурсом CMS, то здесь есть некоторые нюансы.
Что касается главной страницы, то абсолютная ссылка на нее включает доменное имя, которое является названием корневой папки в соответствии с файловой структурой сайта на сервере:
Образец относительного линка в отношении главной: