Соберите простую текстовую ссылку

Адрес назначения и видимая подпись решают разные задачи. Первый сообщает браузеру, что открыть; вторая помогает человеку понять смысл перехода. В редакторе CMS обычно достаточно выделить текст, нажать кнопку добавления ссылки и вставить URL. В исходном HTML нужно записать элемент целиком. Используйте обычные прямые кавычки, а не типографские символы из текстового редактора.

<a href="https://example.com/services/">Услуги компании</a>

Основы синтаксиса разобраны в руководстве MDN по гиперссылкам. Пример выше учебный: замените домен и путь реальным адресом. Не вставляйте URL административной панели или локального предпросмотра вместо публичной страницы — у посетителя такой переход может не открыться.

Выберите полный или внутренний адрес

Полный адрес с протоколом и доменом удобен для перехода на другой сайт. Путь от корня, например /services/, остаётся внутри текущего домена. Путь без начального слеша зависит от расположения текущей страницы. Именно это часто вызывает ошибки после переноса материала в другую папку: прежняя относительная ссылка начинает указывать на несуществующий адрес.

<a href="/services/seo-audit/">SEO-аудит</a>

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

Добавьте переход к разделу страницы

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

<a href="#conditions">Условия работы</a>
<section id="conditions">...</section>

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

Различайте вкладку, телефон и почту

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

<a href="https://example.com/" target="_blank" rel="noopener">Документ — в новой вкладке</a>
<a href="mailto:team@example.com">team@example.com</a>

Не путайте ссылку на почту с формой обратной связи. Она не отправляет сообщение автоматически и не подтверждает доставку. Для коммерческого сайта проверьте оба сценария отдельно: человеку без настроенного почтового приложения должен оставаться другой доступный способ связаться с командой.

Напишите содержательный текст перехода

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

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

Проверьте ссылки после публикации

Откройте каждый новый переход в опубликованной версии. Проверьте опечатки, регистр пути, лишние пробелы и доступность назначения без авторизации. Затем пройдите страницу клавишей Tab: ссылка должна получать видимый фокус и открываться клавишей Enter. Не убирайте признаки интерактивности только ради минималистичного оформления, иначе часть посетителей просто не заметит переход.

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

Частые вопросы

Почему ссылка отображается как обычный текст?

Проверьте, вставлен ли код в HTML-режиме, правильно ли закрыты кавычки и не экранировал ли редактор разметку. В визуальном редакторе проще использовать штатную кнопку ссылки.

Нужно ли добавлять index.htmll в адрес главной?

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

Можно ли сделать картинку ссылкой?

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