Как правильно сделать ссылку

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

В статье расскажу, что такое ссылка, как ее создать и оформить, и что будет, если оформить ссылку неправильно.

Что такое ссылка и как ее сделать

Ссылка (или веб-ссылка, гиперссылка, линк) — это текстовый или графический элемент, при клике на который пользователь переходит на другую страницу или другой сайт. Обычно ссылку выделяют цветом и/или подчёркиванием, чтобы она отличалась от остального текста на странице. Веб-ссылки — главный инструмент для связи между страницами и сайтами в интернете.

Создают ссылки с использованием HTML-кода, который состоит из двух основных частей: 

1. Якорный текст/анкор (текст привязки) — видимое слово или словосочетание, на которое можно кликнуть. Например, «Нажмите, чтобы прочитать статью».
2. URL-адрес — веб-адрес, на который линк перенаправляет пользователя. Это может быть адрес статьи, на которую мы хотим перенаправить человека.

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

С тегом <a> можно применять и другие атрибуты, чтобы указать дополнительные параметры. Например: 

• target — указывает, как будет открываться веб-ссылка: в текущем окне, в новом окне или в новой вкладке браузера; 
• rel — указывает отношение между текущей страницей и страницей, на которую указывает ссылка;
• title — добавляет всплывающую подсказку при наведении курсора на ссылку; 
• download — указывает, что линк ведёт на файл, который можно скачать. 

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

При создании важно убедиться в том, что ссылка релевантна контенту, на который она направляет. Это поможет пользователям и поисковым алгоритмам лучше понять контекст. Кроме того, нужно убедиться, что ссылки не «битые» (например, с ошибками 404 или 410). Неработающие линки могут нанести вред UX и SEO. 

Как сделать простую HTML-ссылку: инструкция

Сделаем ссылку с помощью самого простого тега <a>. Для этого:

1. Используйте открывающий <a> , чтобы обозначить гиперссылку. 
2. Добавьте атрибут href, чтобы указать URL-адрес, на который будет происходить переход по клику. 
3. Укажите текст ссылки, который увидят пользователи. 
4. Добавьте закрывающий тег <a>. 

Символы-мнемоники в виде знаков меньше (<) и больше (>) выполняют роль угловых скобок — такие используются во всех тегах HTML-вёрстки.

Например, вот так можно создать линк на главную страницу журнала «Конверт»:

Пользователи увидят на странице текст "Перейти в «Конверт»" и когда кликнут на него, будут перенаправлены на главную страницу журнала.

Типы ссылок

Внутренние. Указывают на другие страницы или разделы в пределах того же сайта или домена. Их применяют, чтобы пользователям было легко перемещаться внутри сайта. 

Например, чтобы с главной страницы интернет-магазина перейти на раздел «Контакты»: https://www.magazin.com/ → https://www.magazin.com/contacts.

Внешние. Указывают на ресурсы и страницы за пределами текущего домена или сайта. Используют, когда нужно дать дополнительную информацию или подтвердить свои тезисы внешними источниками. Например, если упоминаем какой-то закон в бизнес-статье, и даем на него ссылку.

Якорные. Применяют для указания на определённый фрагмент на той же странице. Актуальны на длинных страницах — благодаря якорным ссылкам пользователи могут быстро перейти к нужному разделу или теме.

Например, в этой статье можно нажать на содержание слева и перейти к разделу «Абсолютные и относительные ссылки», не прокручивая мышкой вниз. В названии URL-адреса можно заметить обозначение раздела: #anchor-3.

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

Например, «Главная» → «Конверт» → «Дизайн».

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

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

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

Абсолютные ссылки. Содержат полный адрес (URL) веб-страницы, который отображает весь путь до домена, включая протокол (http или https). Пример: 

В этом примере «https://» — это протокол, «www.example.com» — это домен, а «/index.html» — это путь к странице на сервере.

Относительные ссылки. Содержат только путь к странице относительно текущей страницы.

В этом случае линк указывает на файл «about.html», который находится в том же каталоге, что и текущая страница. 

Также относительная ссылка может указывать путь к страницам, которые находятся в разных каталогах. К примеру, если текущая веб-страница расположена в каталоге «blog», но нужно сослаться на файл «about.html» в родительском каталоге, то конструкция будет выглядеть так:

В этом варианте используется оператор «..», чтобы обозначить переход на один уровень вверх в структуре каталогов, а затем следует ссылка на файл «about.html» в родительском каталоге.

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

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

Ссылки для загрузки. Позволяют пользователям загружать с сайта разные типы файлов — документы, аудио- и видеофайлы.

Как сделать гиперссылку в текстовом редакторе

При работе в текстовых редакторах — Google Документах, Microsoft Word и подобных — иногда нужно сослаться на какой-то сайт или материал. Здесь можно добавить гиперссылку в виде кликабельного текста, без использования HTML-кода. Вот как это сделать: 

1. Откройте редактор и в нужном месте введите слово или словосочетание, которое станет анкором. Эта фраза будет видимым кликабельным элементом. 
2. Выделите анкор. 
3. Нажмите кнопку «Вставить гиперссылку» на панели инструментов. Эта кнопка обычно выглядит как значок цепочки и/или обозначена как «Гиперссылка». Также команду для вставки можно найти в меню, которые вызывается правым кликом мыши. Либо вызвать строку для ссылки комбинацией клавиш ctrl+K.
4. В появившемся окне нужно вставить URL в поле «Адрес». Дополнительно можно ввести подсказку, которая будет отображаться при наведении курсора на ссылку. 
5. После нажатия на «OK» или «Вставить» гиперссылка будет создана. 
6. Сохраните файл и кликните по ссылке для проверки её работоспособности.

Алгоритм добавления гиперссылки может немного отличаться в зависимости от используемого редактора. Например, при отсутствии функции «Вставить» может потребоваться ручной ввод HTML-кода. Но в целом последовательность шагов аналогична.

Как оформить ссылку на сайте для правильной индексации

Использование в HTML-коде определённых атрибутов позволяет дать указание поисковым роботам — индексировать и переходить по ссылке или нет. Это нужно, чтобы разрешить или запретить передачу ссылочного веса страницы — условного показателя авторитетности. Используют элементы: 

• dofollow — атрибут, который передаёт ссылочный вес с одной страницы на другую и позволяет поисковым роботам индексировать ресурс, на который ведёт линк. 
• nofollow — атрибут, который не передаёт ссылочный вес и запрещает поисковым роботам индексацию страницы, на которую указывает ссылка. 

Если у страницы, на которую указывает dofollow-ссылка, высокая репутация, это может положительно повлиять на ранжирование ссылающейся страницы, и наоборот, при низкой репутации. Dofollow-ссылки обычно используют для внутренней и внешней оптимизации сайта.

Nofollow-ссылки, хоть и не передают вес, но не препятствуют привлечению трафика. При клике пользователи попадут на указанный ресурс, не заметив разницы в атрибутах.

Как сделать dofollow-ссылку

Для создания dofollow-линка нужно в коде указать атрибут rel со значением dofollow: 

При переходе по этой ссылке поисковые роботы попадут на страницу unisender.com и проиндексируют её, одновременно передав часть ссылочного веса со ссылающегося ресурса. 

Веб-разработчики не всегда указывают атрибут dofollow, поскольку часто он считается значением по умолчанию для ссылок без атрибута rel или со значением rel равным noopener или noreferrer. 

Как сделать nofollow-ссылку

Чтобы создать nofollow-линк, нужно указать атрибут rel со значением nofollow:

Поисковые роботы не станут переходить на страницу unisender.com и индексировать её. При этом пользователи могут кликнуть по этой ссылке и перейти на сайт, на который она указывает. 

Как правильно ссылаться на различные ресурсы

В зависимости от того, на какой ресурс даётся линк, могут быть свои особенности или рекомендации. 

На сайт

Чтобы создать качественную ссылку на сайт, соблюдайте следующие рекомендации: 

Указывайте информативный якорный текст. Анкор должен максимально точно описывать назначение ссылки. К примеру, вместо «читать тут» можно написать «узнать больше об услуге». Хороший описательный анкор должен пояснять пользователям, куда приведёт их линк. 

Используйте абсолютные URL-адреса. В атрибуте href указывайте полный абсолютный URL-адрес, в том числе протокол http:// или https://. Это особенно важно при создании линков на внешние ресурсы.

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

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

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

На определённый материал

Чтобы сослаться на какую-то страницу на своём сайте, можно создать постоянный линк с помощью якоря (уникального идентификатора). Так ссылка будет работать, даже если расположение страницы на сайте изменится. 

Для создания постоянной ссылки: 

1. Определите уникальный идентификатор для материала. Сделать это можно, добавив атрибут id к нужному элементу в HTML-коде. Пример:

2. Создайте линк на данный материал, используя якорь в качестве фрагмента URL. Учитывайте, что URL должен указывать на страницу, на которой расположен материал. Пример:

Если вам нужно сделать постоянный линк на статью с чужого сайта, то можно запросить код у владельца. Местоположение опции постоянной ссылки на статью зависит от конкретной CMS. Чаще всего нужно зайти в режим редактирования статьи и найти поле «URL», «Ссылка», «Постоянная ссылка» или что-то подобное. В WordPress, к примеру, опция называется «Permalink» и находится в разделе «Настройки» → «Пермалинки» в админпанели.

На определённый фрагмент страницы

Чтобы сослаться на какой-то фрагмент текущей страницы, нужно также использовать якорь. Вот как это сделать: 

1. Определите на странице фрагмент, для которого создаёте якорь. Для этого добавьте атрибут id к нужному элементу в HTML-коде. Пример:

2. Добавьте якорь к ссылке, которая будет вести на нужный раздел. Якорь добавляется при помощи символа-решётки #, за которым следует значение атрибута id. Пример: 

Важно учесть, что значение атрибута id должно быть уникальным на странице. Если на странице есть несколько элементов с одинаковым id, браузер просто перекинет читателя на первый найденный элемент.

На email

Для создания ссылки на email необходимо использовать специальный тег mailto. Например, чтобы создать линк на электронную почту «example@gmail.com», нужно написать следующий HTML-код: 

Здесь: 

• href — атрибут, который определяет линк на ресурс; 
• mailto — протокол для отправки электронной почты; 
• example@gmail.com — адрес получателя; 
• Написать нам — анкор. 

Клик откроет окно для нового письма в почтовой программе, которая установлена на устройстве по умолчанию. В поле «Кому» будет указан адрес получателя. 

На Skype

Чтобы сослаться на Skype, нужно использовать такой формат кода: 

В данном случае: 

• skype: — это специальный протокол; 
• имя_пользователя — имя пользователя Skype; 
• ?chat — путь к чату с указанным пользователем. 

При нажатии на ссылку откроется чат с указанным пользователем в приложении Skype. 

На профиль в социальных сетях

Чтобы сослаться на аккаунт человека или компании в соцсетях: 

1. Откройте страницу профиля в социальной сети. 
2. Скопируйте адрес страницы из адресной строки браузера.
3. Вставьте скопированный адрес в атрибут href тега <a> в HTML-коде. 

Получится ссылка вот такого вида на примере ссылки во ВКонтакте: 

Здесь: 

• href — атрибут, определяющий ссылку на ресурс; 
• https://www. vk.com — адрес главной страницы соцсети; 
• имя_пользователя — имя, указанное в ссылке профиля или ID; 
• Профиль ВКонтакте — анкор. 

Аналогично можно создать линк на профиль в любой другой социальной сети, просто вставив адрес страницы в атрибут href.

Что будет, если неверно оформить ссылку

Неправильное оформление ссылки может спровоцировать несколько проблем: 

Перенаправление пользователей на неверную страницу. Это запутает и разочарует пользователей, что ухудшит их опыт использования сайта. 

Неправильная индексация страниц. При сканировании сайта поисковые роботы могут пропустить неработоспособные и неверно оформленные ссылки. Из-за этого страницы не будут проиндексированы и их рейтинг в поисковой выдаче снизится. 

Технические проблемы. Неправильный линк может стать причиной появления ошибки 404, если ведёт на удалённую или перемещённую страницу. 

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