Изучаем абсолютные и относительные ссылки
При выборе основной структуры URL доступны два варианта: абсолютные и относительные ссылки. Если выбрать неподходящий тип ссылок, то это в значительной степени усложнит процесс сканирования сайта поисковыми роботами и негативно скажется на его продвижении:
Обновлено: 2022-01-15 15:59:48 Валентин Сейидов автор материала
Что такое абсолютная ссылка?
Абсолютная ссылка предполагает указание полного адреса страницы, на которую вы ссылаетесь. Пример абсолютной ссылки :
Что такое относительная ссылка?
В относительной ссылке не требуется указывать полный URL . Относительная ссылка предполагает, что страница, на которую вы ссылаетесь, находится на том же сайте. Пример относительной ссылки выглядит следующим образом:
Чем удобны относительные ссылки?
Прежде, чем выяснить, какая из ссылок является абсолютной , разберемся с положительными сторонами использования относительных URL .
- Более быстрый способ
Работа c крупными сайтами становится значительно легче, если использовать относительные ссылки.
- Промежуточная среда
Если вы создаете сайт на основе CMS , в которой используется промежуточная среда с отдельным уникальным доменом ( будь то WordPress или SharePoint ), то он будет целиком дублироваться в этой промежуточной среде. Применение относительных ссылок позволяет одному и тому же сайту существовать, как на промежуточном, так и на рабочем домене. Это не только упрощает написание кода для разработчиков, но и позволяет сэкономить уйму времени.
Страницы с относительными ссылками загружаются быстрее, чем c абсолютными URL . Хотя разница не будет заметной, она все же есть.
В чем преимущества абсолютных ссылок?
- Защита от скачивания
Абсолютные ссылки значительно усложняют процесс скачивания информации с сайта при помощи специальных программ. Если все внутренние ссылки на сайте будут относительными, то любая специализированная программа без труда скопирует сайт целиком, что позволит загрузить его на новый домен.
- Защита от дублирования контента
Абсолютные ссылки также помогают избежать проблемы дублированного контента. Представьте, что есть несколько версий главной страницы, проиндексированных в Google , без указания канонической ( основной ) версии сайта. Например:
http://www.example.com http://example.com https://www.example.com https://example.com
По мнению Google , это четыре разных сайта, и по всем четырем ссылкам поисковый робот будет заходить как на новый сайт. В данном случае, если все ссылки будут относительными, то робот проиндексирует весь сайт по нескольким разным URL , а это приведет к проблемам с дублированным контентом.
- Улучшенная стратегия внутренней перелинковки
При работе со ссылками всегда следует учитывать внутреннюю перелинковку. Если неправильно применить тег , и при этом все ссылки на сайте будут относительными, то это приведет к образованию несуществующих страниц с ошибкой 404 .
Например: когда на странице http://www.example.com/category/xyz.html есть тег base href , который выглядит следующим образом:
, а затем на страницах используются относительные внутренние ссылки ( /category/abc.html ). Когда Google будет сканировать подобные внутренние ссылки, это приведет к ошибке 404 .
Этой ситуации можно избежать, если использовать абсолютные ссылки HTML .
- Способствуют сканированию
Поисковые роботы Google переходят по внутренним ссылкам, чтобы глубже изучить сайт. Этот процесс имеет некоторые ограничения по количеству URL , которые будут просканированы. Учитывая этот факт, если у вас будет миллион страниц, и робот будет часто натыкаться на ошибки, он, скорее всего, прекратит сканирование сайта.
Этого можно избежать за счет использования абсолютных ссылок, которые помогают поставить процесс сканирования на поток.
Убедитесь, что вы выбрали правильную стратегию, основанную на ваших потребностях в SEO-оптимизации . В большинстве случаев используются абсолютные ссылки, так как у этого формата больше плюсов, чем минусов. Однако бывают ситуации, в которых лучше использовать относительные ссылки.
1. Относительные, абсолютные и смешанные ссылки
Относительная ссылка — это ссылка, которая автоматически изменяется при копировании или перемещении формулы в другую ячейку.
Например, формула =А 1 ˆ 2 записанная в ячейке содержит относительную ссылку \(А1\).
Если копировать эту формулу вдоль столбца и вдоль строки относительная ссылка автоматически изменится так:
- при перемещении на один столбец в формуле изменится буква столбца \(A\) поменяется на \(B\);
- при перемещении на одну строку вниз в формуле изменится номер строки с \(1\) на \(2\).
Абсолютная ссылка — это ссылка на определённую (фиксированную) ячейку. Обозначается знаком \($\), например, \($А$1\). При копировании данная абсолютная ссылка не изменяется.
Смешанная ссылка — это ссылка, которая сочетает в себе относительную и абсолютную ссылку. В смешанных ссылках может быть абсолютно адресуемый столбец и относительно адресуемая строка \($А1\), или наоборот \(А$1\).
При копировании или перемещении формулы абсолютная часть ссылки остается неизменной, а относительная меняется в зависимость от месторасположения.
Абсолютная ссылка
Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подпишись на рассылку и получи книгу в подарок!
Абсолютная ссылка – это ссылка, включающая в себя полный адрес, по которому можно перейти к файлу.
Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA
Такой URL содержит в себе все элементы без сокращений. Если относительный тип имеет простую форму вида /page1.html, то полный – http://www.page.com/page1.html.
Рассмотрим, чем отличается абсолютная ссылка от относительной и как её используют.
Отличие абсолютной ссылки от относительной
В информатике часто используются абсолютные ссылки при создании и редактировании таблиц в Excel. Если человек использует относительную ссылку в содержании формулы, то данные меняются при копировании и переносе в другую ячейку. При использовании абсолютной ссылки содержание остается таким же.
На сайтах разница в том, что абсолютная ссылка – это полный адрес ресурса, относительная – часть этого же url. Основное отличие относительной ссылки от абсолютной – URL-адрес. Абсолютная ссылка начинается с протокола передачи данных – HTTP или HTTPS. Далее указывается имя домена. Рассмотрим пример абсолютной ссылки в HTML:
В таком виде конструкция вставляется в HTML код страницы. Один из недостатков этого вида ссылки – длина. Из-за большого количества элементов код становится громоздким. Поэтому в некоторых случаях используются относительные адреса.
Чтобы получить относительную ссылку, нужно немного изменить и сократить структуру кода. Убираем из него протокол передачи данных (HTTP или HTTPS) и доменное имя. Тогда ссылка будет выглядеть так:
Ссылка в этом случае будет работать только в случае, если указанный в ней файл находится в папке или каталоге из корневой директории сайта. На корневую директорию site.ru в относительной ссылке указывает первый слеш. Поэтому, если вы хотите сделать относительный линк на главную страницу сайта, необязательно писать ее полный адрес. Можно воспользоваться короткой конструкцией:
Для чего нужны абсолютные ссылки на сайте
Эти линки универсальны, их можно использовать в любых разделах сайта для указания как на внутренние файлы, так и на внешние ресурсы. Но на практике с их помощью обычно перенаправляют на сторонние ресурсы. Для перенаправления на файлы в пределах своего сайта лучше применять относительные ссылки. Они короче, поэтому делают код менее громоздким. К тому же, если вы используете только абсолютные ссылки, у вас могут возникнуть проблемы при переносе сайта на новый домен. Все линки придется переделывать, так как они будут ссылаться на старый домен.
Абсолютные и относительные линки – это два разных вида ссылок, используемых для различных целей. Поэтому нельзя сказать, что какой-то вариант хуже, а какой-то – лучше. Если смотреть на сайт глазами поисковых роботов, лучше использовать полный путь к странице, если рассматривать этот вопрос с точки зрения удобства работы с сайтом – выбирайте относительные, чтобы ссылаться на внутренние файлы в корневых папках и каталогах.
Рассказать о статье:
Получите профессиональный взгляд со стороны на свой проект
Специалисты студии SEMANTICA проведут комплексный анализ сайта по следующему плану:
– Технический аудит.
– Оптимизация.
– Коммерческие факторы.
– Внешние факторы.
Мы не просто говорим, в чем проблемы. Мы помогаем их решить
29.01.2018 37370
Нейромаркетинг: что это такое Нейромаркетинг «собрал в себе» все способы влияния на человека, чтобы побудить его потреблять больше. Эйл Смидс в 2002 году объединил два слова: нейробиология и маркетинг. Получившийся термин описывает коммерческое использование открытий нейробиологии. С помощью изучения мозга стояла задача понять потребителя и повысить продажи. Обычный пример: если вы ходили по магазинам, то, наверно, замечали, как в одном…
11.03.2018 33398
Front-end разработчик – это программист, основная задача которого состоит в разработке пользовательского интерфейса, то есть UI дизайна. Другими словами, данный специалист отвечает за внешнюю часть веб-ресурса в браузере, с которой контактируют посетители. Именно поэтому он должен сделать интерфейс максимально удобным и интуитивно понятным, чтобы взаимодействие и процесс поиска нужного раздела или информации не занимало у человека много времени и переходов…
27.06.2018 51393
Конкурсы –– один из способов продвижения блога. С их помощью вы общаетесь с аудиторией, привлекаете в блог новых подписчиков и активизируете старых. Суть в том, что вы обещаете участникам подарок за то, что они тем или иным образом расскажут о вас другим пользователям. Этот метод раскрутки считается эффективным. Какие виды розыгрышей можно провести Существуют три механики, которые маркетологи советуют чередовать…
Абсолютные и относительные ссылки
Это короткая шпаргалка о том, как правильно ставить ссылки и не теряться в адресах.
Абсолютные ссылки
Абсолютная ссылка — это адрес ресурса целиком. Обычно такие ссылки ставят на сторонние ресурсы и надеются, что адрес не изменится.
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
- Как ставить пустые ссылки
- Что лучше использовать: ссылки или кнопки
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Что такое Lazy Loading и как её включить на сайте
Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.
Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.
- 22 ноября 2023
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
- 1 ноября 2023
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Простое диалоговое окно на HTML
Вот короткое демо:
- 18 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — 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