Тег A (гиперссылка)

Автор: Антон Майоров
Создано:
Обновлено:

Тег <a> (от anchor — якорь) — важнейший HTML-тег, с помощью которого реализуются ссылки между веб-страницами и обеспечивается навигация по всей сети Интернет.

Содержание

Глобальное значение ссылок

Посредством тега <a> реализуются все виды ссылок:

  • навигационные ссылки внутри сайта,
  • внутренняя перелинковка между страницами сайта,
  • ссылки-закладки по элементам внутри страницы,
  • внешние входящие и исходящие ссылки.

Значение ссылок в SEO

Внешние и внутренние ссылки имеют большое значение в SEO и учитываются алгоритмами ранжирования поисковых систем.

Ссылочная SEO-оптимизация подразумевает работу с:

  • ссылочной структурой сайта,
  • перелинковкой страниц сайта,
  • наращиванием внешней ссылочной массы.

Поисковые алгоритмы берут в расчет следующие факторы:

  • значение анкоров для определения текстовой релевантности,
  • значения атрибута rel,
  • количество внутренних и внешних входящих и исходящих ссылок,
  • качество доноров.

Синтаксис тега <a>

Атрибут Href

Тег <a> применяется для HTML-разметки ссылок в сочетании с атрибутом href (от Hyper REFerence - гиперссылка), в котором указывается URL-адрес. Между открывающим и закрывающим тегами <a> размещается анкор ссылки:

 <a href="[URL]">[Анкор]</a>

Атрибут Rel

В качестве значения атрибута rel (от relationship — отношение) тега <a> можно указывать семантическое значение ссылки, которое может приниматься во внимание поисковыми алгоритмами. В таблице ниже представлены самые распространённые значения атрибута rel.

Значения атрибута Rel для тега <a>
Значение Описание Примеры применения
nofollow Не доверительная ссылка. Ссылки, оставляемые пользователями (в комментариях, подписях, на личных страницах и т. д.).
sponsored Платная ссылка. Рекламный баннер.
ugc Ссылка на контент, созданный пользователями. Ссылки на комментарии, посты на форумах и т. д.
bookmark Якорная ссылка. Ссылки в оглавлении страницы.
external Указывает, что акцептор не является частью сайта-донора. Любые внешние исходящие ссылки.
opener Ссылка создаёт вспомогательный контекст. Модальные ссылки, интерактивные заголовки вкладок и аккордионов.
author Ссылка на страницу автора. Имя автора в качестве анкора.
help Ссылка на справочную информацию. Ссылки на контекстную справку.
next Указывает, что акцептор является следующим в наборе документов относительно донора. Пагинация листингов товаров, статей и т. д.
prev Указывает, что акцептор является предыдущим в наборе документов относительно донора.. Пагинация листингов товаров, статей и т. д.
tag Указывает, что анкор ссылки является меткой (тегом) относительно акцептора, которая иденцифицируется по указанному URL. Метки (теги) в карточках товаров или статьях.

Атрибут Target

Атрибут target (цель) тега <a> указывает браузеру, как обрабатывать действие по ссылке. Может принимать следующие значения:

_self
Ссылка срабатывает в текущей вкладке браузера (применяется по умолчанию, если атрибут не прописан): 
<a href="/page" target="_self">Страница откроется в текущей вкладке</a>
_blank
Страница загружается в новой вкладке браузера (принято применять для внешних исходящих ссылок): 
<a href="/page" target="_blank">Страница откроется в новой вкладке</a>

Классификация ссылок

В зависимости от применяемых значений анкоров и атрибутов тега <a> иссылки делятся на:

Абсолютные и относительные ссылки

В зависимости от представления URL в атрибуте href ссылки делятся на:.

Абсолютная ссылка
В атрибуте href указывается абсолютный URL акцептора: 
<a href="https://seoportal.net">SEO-портал</a>

Абсолютные ссылки могут ссылаться как на внутренние (в пределах домена), так и на внешние (принадлежащие другим доменам) страницы.

Относительная ссылка
В атрибуте href указывается относительный URL акцептора: 
<a href="/>SEO-портал</a>

Относительные ссылки могут ссылаться только на страницы домена, на которых они указаны.

Внешние и внутренние

Относительно сайта, на котором указаны ссылки, они делятся на:

Внутренние
Ссылки между внутренними страницами сайта.
Внешние
Ссылки между страницами разных сайтов.

Внутренние и внешние ссылки оказывают разное влияние на ранжирование страниц-акцепторов.

Входящие и исходящие ссылки

Относительно рассматриваемой веб-страницы ссылки делятся на:

Входящие
Ссылются на текущую страницу (акцептор).
Исходящие
Размещаются на текущей странице (доноре).

Анкорные и безанкорные ссылки

В зависимости от текста в анкоре ссылки делятся на:

Анкорные
Когда анкор описывает контент акцептора: 
<a href="https://seoportal.net">SEO-портал</a>
Безанкорные
Когда анкор не описывает контент акцептора. В качестве анкора безанкорных ссылок может применяться URL-адрес или название домена, а также слова «тут», «здесь», «ссылка», «подробнее» и т. д.: 
<a href="https://seoportal.net">seoportal.net</a>

Анкоры ссылок учитываются алгоритмами ранжирования:

  • анкорные ссылки могут положительно влиять на релевантность акцептора запросу, которому соответствует анкор;
  • нельзя допускать спама внешних входящих ссылок, в которых применяются ключевые слова, т. к. это может негативно отразиться на ранжировании акцептора;
  • все внутренние ссылки можно смело делать анкорными.

Навигационные, контекстные и рекламные ссылки

В зависимости от назначения ссылки делятся на:

Навигационные
Размещаются в элементах навигации сайта (меню, карте сайта, оглавлениях страниц и т. д.).
Контекстные
Размещаются в контексте контента. Имеют наибольшую значимость в алгоритмах ранжирования.
Рекламные
Размещаются в рекламных блоках. Имеют наименьшую значимость в алгоритмах ранжирования.

Якорные ссылки

Якорная ссылка ссылается на элемент внутри страницы через указание идентификатора этого элемента (якорь ссылки) в атрибуте href после символа #:

<!-- Вариации якорных ссылок: --> <a href="#zakladka">Якорная ссылка внутри страницы </a> <a href="/page#zakladka">Относительная якорная ссылка</a> <a href="http://site.ru/page#zakladka">Абсолютная якорная ссылка</a> <!-- Элемент с якорем: --> <section id="zakladka">[Контент элемента]</section>

Якорные ссылки чаще всего применяются в интерактивных оглавлениях страниц, облегчающих навигацию по разделам этих страниц.

Сквозные ссылки

Размещаются на всех страницах сайта. Классическим примером внутренней сквозной ссылки является логотип в шапке сайта, ведущий на главную страницу. Также сквозными являются ссылки в главном меню, размещенном на всех страницах сайта.

Циклические ссылки

Циклическая ссылка ссылается на страницу, на которой размещена. Такие ссылки могут ухудшать юзабилити, «зацикливая» пользователей, поэтому их следует избегать в основном контенте страницы и в навигационной цепочке (хлебные крошки), а также в пунктах меню (при возможности).

Рекомендации

  • Применяйте якорные ссылки для навигации внутри страницы.
  • Внутренние ссылки рекомендуется делать анкорными и относительными.
  • Исходящие внешние ссылки рекомендуется указывать с атрибутом target="_blank".
  • Если ссылка не является доверительной, то рекомендуется указывать атрибут rel="nofollow".
  • Автоматизируйте добавление атрибута rel с определёнными значениями для указания поисковым роботам на семантическое значение акцепторов.

Ссылки

Внутренние материалы

Внешние материалы