Абсолютный и относительный url в HTML ссылках | 1
Абсолютный URL
Адрес ссылки может быть абсолютным, либо относительным. Абсолютные адреса должны начинаться с указания протокола (http:// или https://) и содержать доменное имя сайта (к примеру brainoteka.com). Относительные ссылки указываются относительно от корня сайта или текущего документа.
Так выглядит абсолютная ссылка на ресурс brainoteka.com
<a href="http://brainoteka.com">Обучающие курсы</a>Ссылки относительно текущего документа (Относительный url)
При создании относительных ссылок необходимо учитывать, какое значение для атрибута href следует указывать, поскольку оно зависит от исходного расположения файлов. Вот несколько примеров
При указании относительных ссылок, нужно учитывать, что значение атрибута href будет зависеть от исходного расположения файлов на сервере.
Ссылки на файлы, расположенные в одной папке
В этом случае код будет следующий.
<a href="secondpage.html">Ссылка</a>Файлы размещенные в разных папках (уровень вверх)
Когда исходный документ хранится в одной папке, а ссылаемый в корне сайта, то перед именем файла в адресе ссылки ставится две точки и слэш (/), как показано ниже.
<a href="../secondpage.html">Ссылка</a>Две точки означают выйти из текущей папки на уровень выше.
Файлы размещаются в разных папках (2 уровня вверх)
В данном случае чтобы сослаться на документ в корне сайта, требуется повторить написание предыдущего примера дважды.
<a href="../../secondpage.html">Ссылка</a>Ну и по аналогии, на сколько уровней вверх нам будет необходимо перейти вверх, столько раз, данная конструкция и будет повторяться
Файлы размещаются в разных папках (Уровень вниз)
Теперь, исходный файл располагается в корне сайта, а файл, на который необходимо сделать ссылку — в папке. Как изменится значение href в данном случае?
<a href="Site/secondpage.html">Ссылка</a> Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.
<a href="Site/Folder/secondpage.html">Ссылка</a>Ссылки относительно корня сайта
Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как «/Папка/Имя файла» со слэшем вначале. Так, запись
<a href="/Content/">Контент</a>означает, что ссылка ведет в папку с именем Content, которая располагается в корне сайта, а в ней необходимо загрузить индексный файл.
Учимся понимать разницу между относительными и абсолютными ссылками
При выборе основной структуры URL доступны два варианта: относительные и абсолютные ссылки. Если выбрать неподходящий тип ссылок, то это в значительной степени усложнит процесс сканирования сайта поисковыми роботами и негативно скажется на его продвижении:
Абсолютная ссылка предполагает указание полного адреса страницы, на которую вы ссылаетесь. Пример абсолютной ссылки:
<a href = http://www.example.com/xyz.html>
В относительной ссылке не требуется указывать полный URL. Относительная ссылка предполагает, что страница, на которую вы ссылаетесь, находится на том же сайте. Пример относительной ссылки выглядит следующим образом:
<a href = “/xyz.html”>
Прежде, чем выяснить, какая из ссылок является абсолютной, разберемся с положительными сторонами использования относительных URL.
- Более быстрый способ
Работа c крупными сайтами становится значительно легче, если использовать относительные ссылки.
- Промежуточная среда
Если вы создаете сайт на основе CMS, в которой используется промежуточная среда с отдельным уникальным доменом (будь то WordPress или SharePoint), то он будет целиком дублироваться в этой промежуточной среде. Применение относительных ссылок позволяет одному и тому же сайту существовать, как на промежуточном, так и на рабочем домене. Это не только упрощает написание кода для разработчиков, но и позволяет сэкономить уйму времени.
- Быстрая загрузка
Страницы с относительными ссылками загружаются быстрее, чем c абсолютными URL. Хотя разница не будет заметной, она все же есть.
- Защита от скачивания
Абсолютные ссылки значительно усложняют процесс скачивания информации с сайта при помощи специальных программ. Если все внутренние ссылки на сайте будут относительными, то любая специализированная программа без труда скопирует сайт целиком, что позволит загрузить его на новый домен.
- Защита от дублирования контента
Абсолютные ссылки также помогают избежать проблемы дублированного контента. Представьте, что есть несколько версий главной страницы, проиндексированных в Google, без указания канонической (основной) версии сайта. Например:
http://www.example.com http://example.com https://www.example.com https://example.com
По мнению Google, это четыре разных сайта, и по всем четырем ссылкам поисковый робот будет заходить как на новый сайт. В данном случае, если все ссылки будут относительными, то робот проиндексирует весь сайт по нескольким разным URL, а это приведет к проблемам с дублированным контентом.
- Улучшенная стратегия внутренней перелинковки
При работе со ссылками всегда следует учитывать внутреннюю перелинковку. Если неправильно применить тег <base href>, и при этом все ссылки на сайте будут относительными, то это приведет к образованию несуществующих страниц с ошибкой 404.
Например: когда на странице http://www.example.com/category/xyz.html есть тег base href, который выглядит следующим образом:
<base href=”http://www.example.com/category/xyz.html”/>, а затем на страницах используются относительные внутренние ссылки (/category/abc.html). Когда Google будет сканировать подобные внутренние ссылки, это приведет к ошибке 404.
Этой ситуации можно избежать, если использовать абсолютные ссылки HTML.
- Способствуют сканированию
Поисковые роботы Google переходят по внутренним ссылкам, чтобы глубже изучить сайт. Этот процесс имеет некоторые ограничения по количеству URL, которые будут просканированы. Учитывая этот факт, если у вас будет миллион страниц, и робот будет часто натыкаться на ошибки, он, скорее всего, прекратит сканирование сайта.
Этого можно избежать за счет использования абсолютных ссылок, которые помогают поставить процесс сканирования на поток.
Убедитесь, что вы выбрали правильную стратегию, основанную на ваших потребностях в SEO-оптимизации. В большинстве случаев используются абсолютные ссылки, так как у этого формата больше плюсов, чем минусов. Однако бывают ситуации, в которых лучше использовать относительные ссылки.
Данная публикация представляет собой перевод статьи «What Is The Difference Between a Relative And an Absolute Url?» , подготовленной дружной командой проекта Интернет-технологии.ру
что это и как правильно ставить?
Приветствую, всех читателей блога int-net-partner.ru! Эту статью можно назвать продолжением статьи о УРЛ-адресах. Будем разбираться в том, что же такое абсолютные и относительные ссылки для сайта.
Абсолютные ссылки — которые соответствуют требованиям обозначения URL-адреса, т.е. содержат протокол передачи данных (http://), доменное имя и путь до определённого документа (страницы сайта).
Абсолютная ссылка, если смотреть изнутри, формируется при помощи атрибута href, в котором содержится путь до необходимой страницы сайта.
data-ad-client=»ca-pub-8243622403449707″
data-ad-slot=»1319308473″
data-ad-format=»auto»>
<a href=»http://int-net-partner.ru/investirovanie/pervye-doxody-na-forex-trend.html»>Первые доходы на инвестировании</a>
Адрес страницы начинается с http:// и заканчивается .html, а строка «Первые доходы на инвестировании» — анкор, мы будем видеть только текст и при нажатии на него перейдём на страницу сайта.
Первые доходы на инвестировании — так мы будем видеть ссылку.
Как видите всё очень просто, надо сказать, что абсолютными пользуются в основном для перехода на внешний сайт, для переходов внутри сайта многие вебмастера используют относительные ссылки, так как они не такие длинные и не утяжеляют сайт, код сайта.
Надо ещё сказать, что укоротить можно, например, картинки, загружаемые файлы, а ссылки на статьи таким способом не укоротишь, так как сами статьи хранятся в базе данных MySql.
Относительные ссылки — в которых адрес ссылающегося документа проставлен относительно другого документа, а точнее относительно её кода (названия).
Таким образом самый короткий относительный путь получается, когда web-документ, относительно которого проставляется ссылка (донор) и web-документ, на который она ведёт (акцептор) находятся в одном месте, в одной папке на хостинге:
Таким образом относительная ссылка будет состоять только из названия акцептора:
<a href=»akceptor.html»>анкор</a>
А если акцептор находится в папке, которая расположена в одной директории с файлом-донором?
Всё так же просто:
<a href=»papka/akceptor.html»>анкор</a>
Получается, что нужно прописать имя папки, в которой находится файл-акцептор, потом через»/»(слеш) имя документа или файла.
Ладно, с этим,я думаю, разобрались, теперь задачка посложнее. Представим такую ситуацию: теперь файл-донор находится в папке, а файл-акцептор расположен уровнем выше, рядом с папкой:
Тогда вид относительной ссылки примет вид:
<a href=»…/akceptor.html»>Что такое URL адреса?</a>
Как видите, для таких случаев придумали специальный элемент «…/», а если нужно по на несколько уровней выше, например на два?
Тогда добавляем ещё такой же элемент:
<a href=»…/…/akceptor.html»>Что такое Урл?</a>
Давайте разберём ещё одну ситуацию: файл-акцептор находится на 2 уровня выше в какой-то папке, в данном случае «primer-2»:
А вот такой вид примет относительная ссылка:
<a href=»…/…/primer-2/akceptor.html»>Что такое URL адреса?</a>
Все вышеприведённые примеры ссылок были написано относительны файла-донора. А если ссылки брать относительно корневой папки (в той, где лежит сайт на хостинге)? Корневая папка в обозначении относительных путей выглядет так: «/». Да, одиночный, прямой слеш=)
А вот так будет выглядеть относительная ссылка при переходе на главную страницу сайта:
<a href=»/»>анкор</a>
Таким образом, можно значительно сокращать гиперссылки относительно корневой папки сайта:
<a href=»http://int-net-partner.ru/wp-content/uploads/WebMoney-nastroiki.jpg»>анкор</a>
А вот, что получилось после сокращения:
<a href=»/wp-content/uploads/WebMoney-nastroiki.jpg»>анкор</a>
В данном случае я заменил название сайта на прямой слеш. Вот так легко и просто можно сократить гиперссылки на сайте.
Как правильно ссылаться на папку?
Хочу вам рассказать об одном маленьком, но очень важном нюансе при создании ссылок как относительных, так и абсолютных.
Если вы ссылаетесь на папку, то необходимо в атрибуте href, в конце пути на ссылаемый документ добавить прямой слеш «/»:
<a href=»/wp-content/uploads/»>анкор</a>
Но не в коем случае не оставлять так:
<a href=»/wp-content/uploads»>анкор</a>
Если вы не поставите слеш, сервер начнёт сначала искать файл с именем «uploads» и только потом папку. Таким образом, не поставив слеш, сервер затратит, в данном случае, лишние ресурсы на поиски файла, которого на самом деле не существует.
Следует сказать, что при обращении к папке с помощью ссылок, сервер отобразит индексный файл, который находится в ней index.html, либо index.php., а если не найдёт его, то может отобразить все файлы, которые находятся в ней. Это происходит в том случае, если на веб сервере неправильно настроена безопасность, а это значительно снижает безопасность вашего Интернет-ресурса.
Да, обращение к главной странице сайта, это тоже обращение к папке, при этом индексный файл, который лежит там, запускается автоматически, поэтому для снижения нагрузки на сервер необходим о добавить прямой слеш после доменного имени.
<a href=»http://int-net-partner.ru/»>Абсолютная ссылка на главную</a>
А на этом статью буду заканчивать, спасибо за внимание и до скорых встреч в новых статьях!
Напоследок весёлое видео:
P.S.
Как вам статья? Рекомендую получать свежие статьи блога на e-mail, чтобы не пропустить много новой интересной информации!
С уважением, Александр Сергиенко
Что такое абсолютная ссылка и относительная ссылка
Всё относительно, даже ссылки
В продолжение темы разных интернетовских терминов, напишу о типах URL, а именно об абсолютных и относительных ссылках. Ведь всё в интернете — ссылки 
Что такое абсолютная ссылка в Интернет?
Подобные ссылки указывают на полный путь к файлу. Например, вот это — полный путь: web-ru.net/prodvizhenie-sajta/seo/kak-prodvinut-sajt-v-poiskovikah-s-chego-nachat.html, потому что в нём указывается протокол (http) и имя хоста (полное доменное имя), на котором лежит html-файл.
В общем-то, и всё 
Что означает относительная ссылка?
Как и следует из названия, «пути» таких ссылок высчитываются относительно чего-либо. Тут есть кой-какие моменты:
Чтобы все документы сайта всегда были найдены, предпочтительно использовать абсолютные ссылки. Относительные могут привести к тому, что при изменении структуры сайта некоторые файлы будут не найдены.
Loading… 
Какие ссылки использовать внутри сайта, относительные или абсолютные
Многие начинающие сео специалисты и веб-мастера задаются вопросом о том, какие ссылки использовать на сайте. Часть специалистов считает целесообразным использовать относительные ссылки, другие уверяют, что лучше использовать абсолютые ссылки. В данном посте мы попробуем разобраться — какая разница между этими типами ссылок, а также когда и как их использовать.
Для начала разберемся, как выглядит ссылка и какой код используется для ее создания.
В данном примере, мы использовали относительную ссылку, где pagename.html это страница на которую Вы перейдете при нажатии на page about car. Вы можете увидеть, что данная ссылка не имеет полного адресса (полный веб адрес включает в себя атрибуты
Вот несколько примеров относительных и абсолютных ссылок:
Относительные ссылки:
- index.html
- /graphics/image.jpg
- /main-folder/folder/file.html
Абсолютные ссылки:
- http://www.mysite.com
- http://www.mysite.com/graphics/image.jpg
- http://www.mysite.com/main-folder/folder/file.html
Первое отличие можно увидеть в том, что абсолютные ссылки всегда включают доменное имя веб-сайта, в том числе http://www, в то время как относительные ссылки указывают только на файл или путь к файлу.
Когда пользователь нажимает на относительную ссылку, браузер принимает ее как путь к месту на текущем сайте. По этой причине, вы можете использовать только относительные ссылки, когда вы делаете внутренние ссылки на страницы или файлы, а абсолютные ссылки рекомендуется использовать, если вы ссылаетесь на страницу или файл на другом сайте.
Рассмотрим более подробно, в чем все же состоит преимущество относительной ссылки над абсолютной, какие между ними различия и какую из них целесообразнее использовать?
Абсолютные ссылки хороши по таким свойствам:
- активные ссылки при автоматическом копировании полностью переносятся на сайт копировщика;
- поисковые системы точнее определяют главное зеркало сайта;
- корректная работа в RSS ридерах;
- страница загружается намного быстрее, если применяются размещенные на стороннем сервере файлы;
- нет проблем с rel=«canonical».
- безопаснее при взломе сайта
- более безопаснее при переходе на новую CMS
- лучше использовать при распространении контента по электронной почте
Положительные черты относительных ссылок без протокола:
- при использовании http: и https: проблем с протоколами нет;
- Google советует пропускать протокол.
Относительные ссылки без имени хоста имеют такие плюсы:
- при переносе на другой домен не нужно менять путь во внутренних ссылках;
- не возникает сложностей в случае расположения сайта на нескольких доменах.
- делает код HTML короче, что также влияет на скорость загрузки сайта.
- короткий URl
Относительные ссылки, которые вычисляются по текущему местоположению, обладают такими преимуществами:
- дают возможность протестировать сайт, не подключаясь к Интернету;
- объект переносится в папки проще.
Заключение:
Можно сделать выводы, что нет абсолютного предпочтения в использовании одного из типов ссылок. Оба варианта ссылок важны для сео, нужно только правильно их применять с учетом рассмотреных примуществ каждого из них.
Атрибуты ссылок | htmlbook.ru
Основной атрибут href тега <a> мы уже освоили, рассмотрим еще несколько полезных, но необязательных атрибутов этого тега.
target
По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега <a>. Синтаксис следующий.
<a target="имя окна">...</a>В качестве значения используется имя окна или фрейма, заданное атрибутом name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен применяются следующие.
- _blank — загружает страницу в новое окно браузера.
- _self — загружает страницу в текущее окно (это значение задается по умолчанию).
- _parent — загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
- _top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.
В примере 8.4 показано, как сделать, чтобы ссылка открывалась в новом окне.
Пример 8.4. Открытие ссылки в новом окне
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Ссылка в новом окне</title>
</head>
<body>
<p><a href="new.html" target="_blank">Открыть
в новом окне</a></p>
</body>
</html>Атрибут target корректно использовать только при переходном <!DOCTYPE>, при строгом <!DOCTYPE> будет сообщение об ошибке, поскольку в этой версии HTML target уже не поддерживается.
Учтите также, что пользователи не любят, когда ссылки открываются в новых окнах, поэтому используйте подобную возможность осмотрительно и при крайней необходимости.
title
Добавляет поясняющий текст к ссылке в виде всплывающей подсказки. Такая подсказка отображается, когда курсор мыши задерживается на ссылке, после чего подсказка через некоторое время пропадает. Синтаксис следующий.
<a title="текст">...</a>В качестве значения указывается любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки. В примере 8.5 показано, как использовать атрибут title для ссылок.
Пример 8.5. Создание всплывающей подсказки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Подсказка к ссылке</title>
</head>
<body>
<p><a href="zoo.html" title="Рисунки различных животных и не только...">Рисунки</a></p>
</body>
</html>Результат данного примера показан на рис. 8.8.
Рис. 8.8. Вид всплывающей подсказки в браузере
Цвета и оформления всплывающей подсказки зависят от настроек операционной системы и браузера, и меняться разработчиком не могут.