Использование гиперссылок в SEO

— Dmytro Yakovenko 2021/01/12

Гиперссылка (англ. hyperlink) — часть документа, ссылающаяся на элемент в этом документе (текст, изображение) или на другой объект (веб-страницу, файл (документ), каталог, приложение), расположенный на локальном диске или в Интернет. Текст, содержащий гиперссылки, называется гипертекстом или гипертекстовым документом.

Для определения ссылки в HTML используется тег <a>.

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы. 

<a href="URL">...</a>
<a name="идентификатор">...</a>

Часто применяемые шаблоны: 

<a href="https://dieg.info/review/obzor-shinjiru/" target="_blank">Обзор Shinjiru (Синджиру)</a>

Как гиперссылки влияют на SEO

Обратные ссылки (backlinks) сайта имеют огромное влияние на их рейтинг ВНЕ зависимости от сегодняшних факторов ранжирования. Интернет по сути - это клоака ссылок. Но знать особенности современного ранжирования ссылок поисковыми системами - Вы должны.

В мире SEO конкурирующие сайты активно работают над созданием обратных ссылок как белыми, так и сомнительными способами. Недавно Google ввел новые атрибуты sponsored и ugc, которые частично заменяют старый и привычный нам rel="nofollow".

Стандартные атрибуты

  • href – определяет находящийся между начальным и конечным тегами текст или изображение как гипертекстовую ссылку (URL, или линк) на документ (и/или область документа), указанный в значении данного атрибута. Возможные значения:
file://диск:\папка\...\папка\файл - Абсолютная локальная ссылка. Указывает адрес ресурса на текущем компьютере в формате
file://\\хост\папка\...\папка\файл - Абсолютная сетевая ссылка. Указывает адрес ресурса на соседнем компьютере в сети в формате.

Здесь "хост" - имя компьютера или его IP адрес.

Относительная ссылка используется для указания местоположения ресурса относительно текущего каталога. Применяются следующие обозначения: 

/ - корневой каталог web-сервера или логического диска 
./ - текущий каталог 
../ - родительский каталог 
каталог/ - дочерний каталог

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

http://... – создает ссылку на www-документ;
ftp://... – создает ссылку на ftp-сайт или расположенный на нем файл;
mailto:... – запускает почтовую программу-клиент с заполненным полем имени получателя.
Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&";
news:... – создает ссылку на конференцию сервера новостей;
telnet://... – создает ссылку на telnet-сессию с удаленной машиной;
wais://... – создает ссылку на WAIS – сервер;
gopher://... – создает ссылку на Gopher – сервер;

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

  • атрибут name для якорей уже давно не используют, а используют универсальный атрибут id. Более подробно изучите раздел Что такое ссылка якорь в HTML и как её сделать.
  • target - определяет, окно браузера, в которое должен быть загружен ресурс. Может принимать следующие значения:
    • _blank - ресурс загружается в новое окно, например <a href="URL" target="_blank">…</a>;
    • _parent - ресурс загружается в родительском окне текущего документа;
    • _top - ресурс загружается в окне верхнего уровня фреймовой структуры;
    • _self - ресурс загружается в текущем окне. Является значением по умолчанию;
    • "имя окна" - ресурс загружается в заданном окне (фрейме).
  • tabindex - число, определяющее последовательность активизации элемента кнопкой "Tab".
  • accesskey - символ, используемый как комбинация клавиш в сочетании с клавишей Alt. Нажатие сочетания активизирует ссылку. Этот атрибут не получил широкого применения.

SEO атрибуты nofollow, noreferrer, noopener, sponsored, ugc

Вы можете использовать атрибуты в комбинации друг с другом, например допускается такой синтаксис rel="nofollow sponsored" или даже так rel="nofollow sponsored ugc".

  • С 1 марта 2020 sponsored — для рекламных и спонсорских ссылок.
  • С 1 марта 2020 ugc — для пользовательского контента UGC (user-generated content). Использование ugc на платных ссылках, может привести к штрафу.
  • rel="nofollow" - атрибут тега <a> с 1 марта 2020 для всех ненадежных ссылок, по которым мы не хотим передавать вес. Ранее nofollow использовался для всех платных, спонсорских, UGC и ненадежных ссылок, теперь введены значения sponsored и ugc.

Значение предназначено для поисковых систем: он указывает им на то, что рейтинг PageRank и ТИЦ со страницы, на которой ссылка размещена, не должен передаваться странице, на которую данная ссылка ведет. Атрибут со статусом rel=”nofollow” стандартизирован. Наиболее популярные поисковые системы, соблюдающие стандарты W3C, не учитывают ссылки с таким атрибутом при расчёте индекса цитирования веб-сайтов и поисковые роботы не следуют по ним. Данный атрибут можно использовать для всех ссылок, ведущих на другие сайты. Для ссылок, ведущих на собственные страницы, данный атрибут лучше не использовать.

Пример использования атрибута nofollow для ссылки на рекламу 

<a href="http://www.example.com" rel="nofollow">Попытка рекламы</a>
У META - тега nofollow область действия вся страница.
  • noreferrer - не передавать в HTTP заголовке поле Referer. Referer (от ошибочного написания англ. referrer — отсылающий, направляющий) — в протоколе HTTP один из заголовков запроса клиента, который содержит URL источника запроса. То есть если Вы переходите с одной страницы (или сайта) на другую, referer будет содержать адрес первой страницы (или сайта).
  • noopener использовать для внешних ссылок, если они открываются в новом окне target="_blank". Атрибут noopener предотвращает хакерский взлом вашего сайта и повышает безопасность. Noopener не оказывает никакого влияния на производительность или SEO вашего сайта.

Примеры SEO кода:

  1. Обычные ссылки, которую можно рекомендовать: 
    <a href="https://wiki.dieg.info"> Ссылка, которую можно рекомендовать </a>
  2. Рекламные ссылки: 
    <a href="wiki.dieg.info" rel="sponsored"> Рекламная ссылка </a>
  3. Пользовательский контент, например ссылка оставлена в комментариях сайта: 
    <a href="wiki.dieg.info" rel="ugc"> Ссылка пользователя </a>
  4. Не передавать вес ссылке: 
    <a href="wiki.dieg.info" rel="nofollow"> Ненадежная ссылка </a>

Что такое ссылка якорь в HTML и как её сделать

В HTML существует возможность ссылаться не только на другие html документы, но и возможность ссылаться на части одного документа. Такой механизм получил название "закладки" или якорь. Вы как бы отмечаете некоторый элемент в документе (ставите якорь), а потом ссылаетесь на него из этого же или из другого документа. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Чтобы пометить документ, используется атрибут id - уникальный идентификатор элемента: 

<h2 id="chapter5">Глава 5</р2>
<span id="reviews"></span>

Чтобы сослаться на закладку в текущем документе используют гиперссылки с таким значением атрибута href: 

<a href="#chapter5">Перейти к 5й главе</a>

Можно, так же, ссылаться на закладку в другом html документе. При этом, требуется указать адрес самого документа, затем символ "#" и имя закладки: 

<a href="htmldocs/book.html#chapter5">Перейти к 5й главе</a>

Часть адреса "#имя" получила название хэш.

Если вы укажете в качестве закладки только символ "#", то документ будет прокручен на самое начало. Таким образом, символ "#" тоже можно назвать корректной закладкой.

Чтобы перенаправить пользователя к началу страницы (такую ссылку называют «заглушкой»), нужно написать так: 

<a href="#">Наверх</a>

Использование библиотеки jQuery для получения атрибутов тега a

В библиотеке jQuery реализованы псевдоклассы тега А чтобы применять к элементам разные процедуры форматирования.

  • Пример 1: Получить значение атрибута href тега a 
    <script type="text/javascript">
            $(function() {
$("td a").bind('click', function(){
var getvalue = $(this).attr('href');
alert(getvalue);
</script>
  • Пример 2: Получить значение (анкор) тега a и вставить его в тег input 
    <script type="text/javascript">
            $(function() {
//$("td a").css('font-weight','bold');
 
$("td a").bind('click', function(){
var getvalue = $(this).html();
$("input[name=s_email]").val(getvalue);
return false;
        });
});
</script>

Пример создания навигационной графической панели сайта

В элемент a можно вкладывать не только текст, но и изображение. Именно так и создаются графические ссылки. Графические ссылки в ряде случаев выглядят гораздо эстетичнее, чем текстовые. Здесь, однако, нас подстерегает не очень приятный сюрприз - изображения, заключенные в элемент a приобретаю рамку. Для того, чтобы избавиться от нее необходимо использовать атрибут border элемента img: 

<a href="/"><img src="/appfiles/img/image.svg" alt="Logo Mama" /></a>
При использовании изображений в качестве ссылок, не забудьте указать для них атрибут alt. В случае невозможности отображения рисунка, браузер сделает гиперссылкой его текстовое описание.

Сейчас на небольшом примере мы с вами поэтапно спроектируем и реализуем несложную графическую навигационную панель сайта. Выглядеть это будет так:

Кажется, что все просто: берем изображение, размещаем его на странице… Что может быть проще? Однако, различные фрагменты этого изображения должны быть гиперссылками на различные ресурсы. Таким образом, мы приходим к необходимости разрезать рисунок на несколько частей.

Вот что получилось у меня:

В результате, у нас есть три "кнопки" - гиперссылки "Назад", "Содержание" и "Вперед". Разместим все это добро на странице:

Шаг 1 - Листинг навигационная панель. 

<div style="text-align: center;">
    <img src="navbar/navbar01.gif" alt="" />
    <img src="navbar/navbar02.gif" alt="Назад" />
    ...
    <img src="navbar/navbar09.gif" alt="" />
</div>

Как говорится - "Первый блин комом"! Между изображениями появились зазоры, хотя никто этого не планировал. Все дело в том, что MSIE добавил между изображениями пробельный символ. Это происходит потому, что элементы img разделены переводом строки в коде страницы. Зная это, положение вещей легко поменять, удалив пробельные символы (переводы строки, табуляции…) между элеменнами img.

Шаг 2 - Листинг навигационная панель. 

...<img src="navbar/navbar01.gif" alt="" 
/><img src="navbar/navbar02.gif" alt="Назад"
/>...

Теперь все в норме! Снабдим код гиперссылками. Чтобы не придумывать адреса, в качестве значения атрибута href используйте "#":

Шаг 3 - Листинг навигационная панель. 

...<a href="#"><img src="navbar/navbar02.gif" alt="Назад"
/></a>...

Полученный результат выглядит явно как то не так… Все дело в рамках вокруг изображений. Избавимся от них, добавив в изображения-ссылки атрибут border="0":

Шаг 4 - Листинг навигационная панель. 

...<a href="#"><img src="navbar/navbar02.gif" alt="Назад" border="0"
/></a>...

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

PQ VPS сервера в 28+ странах.