Что такое ссылка и 28 разновидностей URL

Что такое ссылка

Также ссылка в интернете имеет более полный термин - гиперссылка (англ. hyperlink). Гиперссылка является важнейшим элементом любого сайта, потому что поисковый робот, обходя ссылки, добавляет в свою базу страницы (индексирует их). Это определенным образом размеченный текст (либо некое графическое изображение), содержащий в себе переадресацию на страницу другого внешнего ресурса (сайта). Они были особенностью Сети с самого начала, но именно они превращают Интернет в Интернет. Они позволяют нам связывать наши документы с любым другим документом (или ресурсом), с которым мы хотим. С их помощью можно связывать документы с их конкретными частями и сделать приложения доступными на простом веб-адресе (сравните это с локальными приложениями, которые должны быть установлены, и другими такими же вещами). Почти любой веб-контент может быть преобразован в ссылку, так что когда вы кликаете по ней (или иным образом активируете), она заставляет веб-браузер перейти на другой веб-адрес (URL.). Если веб-браузер не знает, как отображать или обрабатывать файл, он спросит вас, хотите ли вы открыть файл (в этом случае обязанность открытия или обработки файла передается в соответствующее локальное приложение на устройстве) или загрузить файл (в этом случае вы можете попытаться разобраться с ним позже).

URL-адрес может указывать на файлы HTML, текстовые файлы, изображения, текстовые документы, видео и аудиофайлы и все остальное, что может жить в Интернете.

История

Первое упоминание ссылок было зафиксировано еще 3000 лет до н.э. в папирусах и на глиняных табличках. Современный гипертекст начал свое развитие в 1945 году, когда доктором Ванневаром Бушем была упомянута идея создания машины, предназначенной для хранения различных видов научных документов. То есть любой материал можно было связать с произвольным разделом другого документа. Позднее Дугласом Энгельбартом в 1963 году было предложено реализовать интерактивное взаимодействие компьютера и человека. Но с технической точки зрения это было невозможно на то время. Тогда Теодор Холм Нельсон занимался работой по созданию программы для подготовки текстов, позволяющей сравнивать различные элементы материалов, вносить и отменять изменения, пересматривать сделанную работу, он и предложил понятия “hypertext” и “hypermedia”. В 1991 году появилась Всемирная паутина (World Wide Web) и термин “ссылка” модернизировался в создание совокупности веб-страниц с различным, в том числе и мультимедийным, содержанием и гиперссылками.

Первая система, в которой была реализована концепция использования гипертекста — Hypertext Editing System. К этому времени под руководством сотрудника IBM Чарльза Голдфарба, был создан первый язык разметки документов Generalized Markup Language (GML), в котором была реализована концепция типа документа и вложенных друг в друга структур. Далее в комитете по обработке информации Американского национального института стандартов (ANSI) было создано новое направление, целью деятельности которого стало формирование стандарта на мощный язык разметки документов, который получил название SGML (Standard General Markup Language).

Зачем нужны ссылки и как работают

У использования ссылок на сайте есть несколько основных назначений:

• Навигация. Без перелинковки перейти на какую-то страницу веб-ресурса можно, только введя в адресную строку ее прямой адрес, а это вряд ли возможно: пользователи не в курсе адресов страниц. Пункты меню, линки, вставленные прямо в текст, – все современные ресурсы используют для навигации по сайту ссылки, оформленные разными способами.
• Идентификация. Иногда по ссылке, например, на файл, можно понять, к какому типу он относится. Это удобно при использовании файлообменников, в первую очередь для самих пользователей, у которых появляется доступ к информации.
• Продвижение. От количества линков на странице и ссылок, ведущих на нее, зависит ее ссылочный вес. Этот параметр имеет значение в продвижении: если он достаточно высок, страница будет лучше ранжироваться, что увеличит трафик. Причем роль играет не только объем ссылочной массы, но и ее качество.

Строение ссылки

URL-адрес — это уникальный адрес, который ведет на страницу, которая находится в интернете. URL состоит из нескольких частей: обязательных и опциональных. Например, адреса сайтов в интернете состоят из минимального количества частей: протокол, доменное имя сайта и порт. Протоколы HTTP/HTTPS и порт указывать не надо. Каждый URL состоит из определенной последовательности символов. Это не хаотичный набор знаков, а определенная структура, которая составляется по четкой схеме.

По задумке создателей, сетевой локатор необходимо максимально упростить, чтобы тот включал в себя небольшое число символов. Ссылка состоит из трех основных и четвертой (необязательной) частей.

1. Тега ссылки .
2. Адреса ссылки href.
3. Анкора.
4. Дополнительных атрибутов.

Дополнительные составляющие могут быть следующими:

1. способ обмена данными с ресурсом или тип сетевого протокола (https, http);
2. логин, то есть то имя учетной записи пользователя для обращения к ресурсу (название сайта);
3. пароль для входа в учетную запись;
4. хост или целиком вписанное доменное имя;
5. порт для подключения в пределах обозначенного хоста;
6. URL-путь – содержит уточняющую информацию о заданных характеристиках места расположения ресурса;
7. строка запроса, содержащая передаваемые на сервер параметры;
8. «якорь», в функцию которого входит возможность ссылаться на определенную часть документа, страницы.

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

Виды ссылок

Ссылки подразделяются на несколько классов. Выберем несколько основных подвидов.

По тому, куда ссылка в интернете ведет они делятся на:

• Внутренние — ссылки ведущие на документы в пределах одного сайта так называемая внутренняя перелинковка;
• Внешние — ссылки ведущие на ресурсы других сайтов, т.е. за пределы нашего сайта
• Входящие ссылки. На ваш сайт ссылаются другие веб-ресурсы.
• Исходящие ссылки. Вы ссылаетесь на страницы других сайтов.
• Сквозная ссылка. Одна ссылка стоит в одном месте на всех страницах какого-либо сайта.

По формату размещения:

• Баннерные или ссылки-изображения. Ссылка, которая представлена в виде статичной или динамичной картинки, кликнув на которую пользователь переходит на другую страницу или онлайн-ресурс.
• Статейные или текстовые ссылки. Анкоры, которые вписываются в информационные статьи с профильной тематикой. Хорошо работают для поднятия сайта в топ по популярным ключевым запросам.

По времени размещения:

• Временные (арендованные). Предоставление ссылки на сайт в течение месяца или другого оговоренного срока.
• Вечные. Ссылка с надежного авторитетного ресурса, которая размещается в статьях, обзорах на этом сайте. Дорогая, но весомая ссылочная масса.

По активности:

• Обычная ссылка. Такое состояние характеризуется для ссылок, которые еще не открывали. По умолчанию обычные текстовые интернет ссылки изображаются синим цветом и с подчеркиванием. В настройках можно сделать другой цвет.
• Посещенная ссылка. Как только пользователь открывает документ, на который ведет ссылка в интернете, она после перехода помечается как посещенная и меняет свой цвет на фиолетовый, установленный по умолчанию. Можно указать в коде другой цвет.
• Активная ссылка. Ссылка помечается как активная при щелчке по ней. Поскольку щелчок происходит достаточно быстро, подобное состояние ссылки весьма кратковременно. Цвет такой ссылки по умолчанию указан красный, можно сделать цвет другим.

По цели:

• Ссылки на подключаемые ресурсы, (это ссылки, в которых не используется тег ) например тег .
• Ссылки на web-страницы, редирект (абсолютные и относительные).
• Внутренние ссылки (якоря).
• Ссылки для скачивания.

По функциональности:

• Стандартная активная ссылка. Обычно оформляется как подчеркнутый сплошной линией текст, возможны варианты с выделением цветом, отличным от цвета остального текста. Иногда дополнительно делается разделение на внешние и внутренние ссылки.
• Неактивная ссылка. Ссылка указывается в виде текста, без выделений и прямого перехода.
• Функциональная ссылка (переключатель). Эти ссылки работают без перезапуска страницы, оформляются как подчеркнутые пунктирной линией.
• Ссылка, которая открывается в отдельном окне. Такие ссылки принято отображать в виде дополнительной иконки.

По коммерческой составляющей:

• Естественные ссылки. Анкоры, которые ведут на рекомендованный пользователю полезный документ (статью, новость, обзор и пр.). Являются наиболее авторитетными при ранжировании поисковыми роботами.
• Платные или неестественные ссылки. Это те же односторонние, однако их появление связано с определенными материальными затратами, поскольку платные ссылки — один из видов рекламы.

По формату обязательств:

• Односторонние ссылки с ссылкой на ваш контент. Не предполагают обратной (ответной) ссылки, к примеру, с вашего сайта на сайт партнера, установившего ссылку на ваш ресурс. Например, ссылки из директорий.
• Двусторонние или взаимные ссылки. Появляются в результате обмена веб-мастерами двух ресурсов линками (либо статьями, пресс-релизами и прочей информацией, содержащей ссылку) с целью повышения веса своего сайта, либо для привлечения дополнительной аудитории пользователей. Это могут быть также ссылки из каталогов веб-мастеров.

По строению:

• Статическая ссылка имеет точный определенный адрес.
• Динамическая ссылка обращается к базе данных и имеет в своем адресе символы типа ?, = и т.п.

Также можно выделить другие виды ссылок:

• «прямые» и «непрямые» ссылки. В некоторых случаях, когда создается ссылка на ресурс, она помещается в скрипт, либо используются параметры для переадресации. Такие варианты размещения ссылок именуют «непрямыми», положительного эффекта при ранжировании в выдаче поисковых систем они не оказывают.
• Битые. Ведут на несуществующий документ. Подобные ссылки необходимо находить и удалять.

Руководство по ссылкам в HTML

Из чего состоит ссылка

Выше мы разбирали строение ссылки. Сейчас подробнее рассмотрим атрибуты элемента . Список важных слов:

Пути ссылок

Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (http:// или https://) и содержать имя домена. Относительные ссылки ведут отсчёт от корня сайта или текущего документа. Протокол для сайта можно не указывать, в таком случае ссылка будет начинаться сразу с // без протокола. Браузер сам подставит нужный протокол, на котором работает сайт. Например:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Абсолютный адрес</title>
 </head>
 <body>
  <p><a href="//vk.com">VK</a></p>
 </body>
</html>

В данном примере ссылка вида <a href="//vk.com">VK</a> является абсолютной и ведёт на главную страницу Вконтакте. Абсолютные ссылки обычно применяются для указания на другой ресурс, такие ссылки достаточно длинные и громоздкие. Поэтому внутри сайта преимущественно используются относительные ссылки.

При создании ссылки относительно текущего документа надо понимать, какое значение для атрибута href следует указывать, поскольку оно зависит от исходного расположения файлов. Рассмотрим несколько примеров:

1. Файлы располагаются в одной папке:

   <a href="target.html">Ссылка</a>

2. Файлы размещаются в разных папках. Когда исходный документ хранится в какой-либо папке, а ссылаемый в корне сайта, то перед именем документа в адресе ссылки следует поставить две точки и косую черту (/)

   <a href="../target.html">Ссылка</a>

   Две точки в данном случае означают выйти из текущей папки на уровень выше.

3. Файлы размещаются в разных папках. Чтобы сослаться на документ в корне сайта, требуется повторить написание предыдущего примера два раза.

   <a href="../../target.html">Ссылка</a>

4. Файлы размещаются в разных папках. Когда исходный файл располагается в корне сайта, а файл, на который необходимо сделать ссылку — в папке, то:

   <a href="folder/target.html">Ссылка</a>

   Если файл находится внутри двух папок, то путь к нему записывается так.

   <a href="folder1/folder2/target.html">Ссылка</a>

5. Файлы размещаются в разных папках:

   <a href="../folder2/target.html">Ссылка</a>

Путь к файлу относительно корня сайта, он выглядит как "/folder/target.html". Так, запись <a href="/course/">Курсы</a> означает, что ссылка ведёт в папку с именем course, которая располагается в корне сайта, а в ней необходимо загрузить файл index.html.

Локальная ссылка (ссылка на тот же веб-узел) указывается с относительным URL-адресом (без http://www....). Пример:

<a href="html_images.php">HTML Images</a>

Изображения-ссылки

Ссылки-изображения (картинки) отличаются от текстовых ссылок отсутствием текстового анкора. Здесь используется изображение (любая картинка), которое вставляется при помощи тега .

Для того, чтобы использовать изображение в качестве ссылки, вам необходимо поместить изображение между тегами <a> </a>. Пример, как сделать картинку кликабельной:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование изображения в качестве ссылки<title>
	</head>
	<body>
		<a href = "http://yandex.ru">
			<img src="10.jpg" alt="Поиск в Яндекс"> <!-- размещаем изображение в качестве содержимого гиперссылки -->
		</a>
	</body>
</html>

Ссылка якорь

Можно сделать ссылки, которые будут направлять в другие разделы в пределах одной страницы. Например, указать структуру текста, то есть где находится какая тема. Вот как создается ссылка в HTML на эту же страницу:

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

   <h2 id="elephants">Слоны</h2>

2. Создайте гиперссылку с помощью идентификатора цели ссылки, которому предшествует символ хэша (#):

<a href="#elephants">все о слонах</a>

Приведенные выше фрагменты кода размещены в разных частях документа. Получается примерно следующее:

<!DOCTYPE html>
<html>
<title>Example</title>
<body>
<h2>Слоны</h2>
<p><a href="#elephants">Всё о слонах.</a></p>
<h2>Коты</h2>
<p>Всё о котах.</p>
</body>
</html>

Это необязательно должна быть одна и та же страница. Можно использовать этот вариант для перехода к идентификатору любой страницы. Но тогда перед тем, как вставить ссылку в HTML, добавьте целевой URL-адрес перед символом «#». Например:

<a href="http://www.example.com#elephants">Всё о слонах</a>

Важно, чтобы на странице был идентификатор с этим значением.

Открытие в новом окне

Атрибут target используется для того, чтобы указать браузеру, где необходимо открыть веб страницу. Следующий пример открывает документ в новом окне браузера:

<a href="https://yandex.ru" target="_blank">Поиск</a>

Ссылки для скачивания

Чтобы скачать какой-либо файл к ссылке добавляется атрибут download. Если этот атрибут отсутствует файл будет открываться (или пытаться открываться) в браузере. Например:

<a href="/file/html/html-1.html" target="_blank">Файл с примером откроется в браузере</a>

<a href="/file/html/html-1.html" download="">Файл с примером будет скачан</a>

Кнопка-ссылка

Этот код создает кнопку которая является ссылкой:

<form action="https://yandex.ru/">
    <input type="submit" value="Перейти на Яндекс" />
</form>

В атрибуте action нужно ввести адрес ссылки. В атрибуте value нужно ввести текст кнопки.

Ссылка на адрес электронной почты и телефон

Чтобы создать ссылку или кнопку для отправки сообщения на электронную почту используется элемент и mailto: — адрес почты. Самыми простыми и часто используемыми формами mailto: являются subject, cc, bcc и body; дальше прописываем адрес электронной почты. Например:

<a href="mailto:mailbox@neiros.ru">Отправить письмо для mailbox</a>

Сам адрес электронной почты не является обязательным для заполнения. Если оставить это поле пустым (в поле href оставить только "mailto:"), откроется новое исходящее сообщение почтовой программой, в поле получателя будет пусто.

На мобильных устройствах вы можете использовать протокол tel, который позволяет использовать ссылку для набора номера и вызова абонента. Номер следует указывать в международном формате, допустимо вставлять в номер дефис или писать его слитно. Например:

<!DOCTYPE html> 
<html>
 <head>
  <meta charset="utf-8">
  <title>Номер телефона</title>
 </head>
 <body>
  <p><a href="tel:+1555-2368">Звоните нам</a></p>
 </body>
</html>

Цвет ссылки

По умолчанию браузеры отображают ссылки подчеркнутыми и синего цвета, а посещенные ссылки окрашивают в фиолетовый цвет. Активная ссылка подчеркнутая и окрашена красным. Можно изменить цвета по умолчанию с помощью CSS. Пример:

<style>
a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}
a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}
a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}
a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>

Активная ссылка

Активной называется ссылка, на которую нажал пользователь. Чтобы как-то её выделить среди остальных ссылок, можно в CSS стилях задать ей другой цвет через псевдокласс active.

Например:

a:active {
    color: red;
}

Ссылка при наведении

Изменение цвета при наведении на ссылку курсора происходит, если задать ей псевдокласс hover.

a:hover {
    color: #11dd77;
}

Правила написания и размещения ссылок

Есть ряд правил написания и размещения ссылок, которые следует соблюдать. Чтобы избежать повторения распространенных ошибок важно придерживаться следующих правил:

1. При создании ссылок не используйте обратный слеш (\), такая ошибка делает ваши ссылки нерабочими. В сетевых URL-адресах используется только прямой слеш (/).
2. Не используйте в качестве URL-адреса файловые пути и не начинайте URL-адрес ссылки с названия диска вашего компьютера (C:, D: и т. д.).. С помощью протокола file можно создать ссылку на файл, расположенный на вашем компьютере, но не в сети.
3. Не применяйте в именах файлов и папок пробелы или специальные символы, даже если это допустимые символы.
4. Нельзя размещать внутри элемента блочные элементы, но можно помещать ссылку в блочный элемент-контейнер.
5. Используйте атрибут download, когда создаете ссылку

Что значат ссылки для SEO

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

Покупка временных и вечных ссылок позволяют повысить позиции сайта в органической выдаче по основным ключевым запросам. Использовать ссылочную массу нужно правильно, ведь слишком большое количество ссылок или некачественная ссылочная масса могут негативно сказаться на рейтинге сайта, интернет-магазина, лендинга. Хороший оптимизатор должен знать, как определить ее качество, релевантность продвигаемому ресурсу.То есть внешняя ссылка должна вести с надежного сайта, желательно с высокой посещаемостью и профильной тематикой, которая пересекается с направленностью ресурса, на который она ведет. Качественную ссылочную массу можно купить на крупных биржах ссылок, напрямую у разработчиков или владельцев ресурсов. Бесплатно получить ссылки для сайтов, которые были созданы недавно, очень трудно, поэтому легче закупить.

Чем больше сайтов размещают статьи со ссылками на ваш сайт, тем выше уровень его авторитетности.

Классификация ссылочных анкоров

Ссылки бывают анкорные и безанкорные. Безанкорные ссылки также влияют на положительный рейтинг сайта, так как априори считаются естественными. Поэтому при наращивании ссылочной массы необходимо получать с веб-ресурсов как анкорные, так и безанкорные ссылки. Для каждого сайта индивидуально продумывается ссылочная стратегия, которая является залогом успеха при продвижении. Анкоры можно подразделить на следующие:

1. Прямое или точное вхождение — анкор, состоящий из ключевой фразы под которую продвигается статья. Должен быть прописан в том же виде, что и ключевое слово, например «купить машину»;
2. Разбавленный — анкор с добавлением нескольких дополнительных слов, для улучшения SEO продвижения по ключевым словам. Например, «купить в Москве машину»;
3. Текст запроса с окружением, т. е. с околоссылочным текстом. Например, «как заказать доставку цветов в Краснодаре». В этом случае «доставка цветов» – ключевая фраза, а все остальное – околоссылочный текст;
4. Безанкорный текст — анкор, в котором вместо текста используются картинки, адрес целевой страницы (URL) либо нейтральные слова (здесь, тут).

Основные правила для анкора:

• В анкоре не должно быть грамматических и пунктуационных ошибок.
• Желательно анкор разбавлять другими словами. 30% анкоров можно оставить с точным вхождением.
• Делайте только читабельные анкоры (пример плохого анкора: «купить квартиру ипотека Воронеж» и т.п.).

Как получить внешнюю ссылку

Есть всего три варианта получения ссылок. Разберем каждый подробнее.

Обмен ссылками

Самый популярный и действенный метод получения ссылок – обмен. В этом случае выигрывают обе стороны из-за повышения весовых характеристик сайтов.

Лучше всего для обмена выбирать схожие по тематикам сайты, с показателями, как можно более высокими и широкой аудиторией. Для продвижения сайта ссылками в Яндексе, нужно искать ресурсы для обмена в этом же поисковике. Для этого даже существует ряд онлайн-программ, которыми можно воспользоваться. Другие способы поиска:

1. Регистрация в специальном каталоге.
2. Поиск на форумах в темах про размещение.

Для успешного обмена рекомендуем написать уникальную статью. В этом случае ссылка получается наиболее правдоподобной с точки зрения поисковика. Чаще всего пишут либо короткие уникальные однолинки (короткие тексты с одной ссылкой), либо объемные статьи с несколькими ссылками (многолинки). Но заранее подготовьте свой сайт:

1. Создайте каталог для обмена, куда будут размещаться ответные ссылки.
2. Каталог должен содержать несколько различных рубрик по тематике сайта, делается это для того чтобы избежать большого количества ссылок на одной странице.
3. Важно дождаться, пока каталог будет проиндексирован поисковой системой и приобретет вес.

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

Покупка ссылки

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

Процесс покупки осуществляется между оптимизатором и вебмастером. Один из них берет на себя обязательства разместить на странице своего ресурса URL с анкором, ведущий на сайт клиента. Второй – оплачивает это размещение. Оплата за размещение ссылок может быть как фиксированной, единовременной, так и помесячной, с абонентской платой.

Естественный прирост

Естественные ссылки — это внешние ссылки, появившиеся в Сети естественным путем. Ссылочная масса набирается естественным образом, если сайт содержит уникальный интересный контент и регулярно пополняется. Их можно получать:

1. Крауд-маркетинг. Метод получения естественных ссылок с тематических блогов, через сервис сайтов-опросников в формате вопрос-ответ, форумов. Публикуйте на платформах органичные комментарии.
2. Контент-маркетинг. Публикуйте и совершенствуйте свой контент.
3. Социальные сети. Создайте профили в социальных сетях, которые ведут на ваш сайт и тем самым занимаются его продвижением.
4. Бартер. Предлагайте протестировать ваш продукт в обмен на отзыв.
5. Вирусный маркетинг. Публикуйте вирусные материалы и новости, чтобы за короткое время привлечь внимание большой аудитории, но не забывайте про качество контента в целом.
6. Нетворкинг и коллаборации. Предлагайте специалистам, которые работаю в вашей нише, создавать общие товары, услуги или выводите их на онлайн-конференции и вебинары о новостях, проблемах и способах решений.
7. Удобство сайта. Продумывайте внутреннюю перелинковку, моделируйте дизайн под целевую аудиторию, тестируйте цвет, форму и расположение кнопок, рекламных баннеров, изображений в тексте.
8. Активность. Проводите среди своих клиентов, подписчиков в социальных сетях конкурсы и розыгрыши, дарите подарки и бонусы, устраивайте акции с обязательным упоминанием вас при репостах и другое.

Часто задаваемые вопросы

Заключение

Проектирование и работа с ссылочным профилем сайта довольно сложная задача. К тому же, линкбилдинг является огромным и важным пластом работ в современном SEO. В статье мы разобрали основные типы ссылок, а главное — как с ними работать. Поэтому следует грамотно подойти к перелинковкам, обмену ссылками или их закупке. Если у вас недостаточно знаний, опыта или времени, то рекомендуем обратиться в специалистам, которые возьмут этот пласт работы на себя.