Якоря в адресе: как работает часть после решётки

Как это работает технически

Якорь — часть адреса после символа решётки. Его принципиальное отличие от всего остального в URL: браузер не отправляет эту часть на сервер вообще. Запрос уходит без якоря, а после получения и отрисовки страницы браузер самостоятельно находит на ней элемент с соответствующим идентификатором и прокручивает к нему.

Полный адрес: site.ru/blog/statya/#chast-vtoraya
На сервер уходит: site.ru/blog/statya/
Браузер после загрузки: ищет элемент id="chast-vtoraya" и прокручивает к нему

Это объясняет, почему якорь никак не может создать отдельную индексируемую страницу — сервер о нём попросту не узнаёт, вся работа происходит локально в браузере посетителя уже после загрузки документа.

Как якорь выглядит в разметке страницы

Для работы якоря на странице должен существовать элемент с соответствующим атрибутом идентификатора, а ссылка указывает на этот идентификатор через решётку.

<h2 id="chast-vtoraya">Часть вторая</h2>

<a href="#chast-vtoraya">Перейти к части второй</a>

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

Главное практическое применение: оглавление длинной статьи

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

<nav>
  <ol>
    <li><a href="#pravila">Основные правила</a></li>
    <li><a href="#oshibki">Типичные ошибки</a></li>
    <li><a href="#chek-list">Чек-лист</a></li>
  </ol>
</nav>

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

Якоря на одностраничных сайтах

Лендинги с разделами «О нас», «Услуги», «Контакты» на одной физической странице традиционно используют якоря для навигации по меню. Это удобно для посетителя, но стоит понимать ограничение: с точки зрения поисковой системы это одна страница с одним адресом, а не несколько самостоятельных документов, конкурирующих за разные запросы.

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

Якорь и канонический адрес

Канонический адрес, разобранный в статье про rel=canonical, никогда не должен содержать якорь — canonical указывает на документ целиком, а не на его часть, и добавление решётки с идентификатором в это поле не имеет смысла и может быть проигнорировано системой.

Чек-лист

1. Якорь обрабатывается только браузером и не передаётся на сервер, поэтому не создаёт отдельной индексируемой страницы.
2. Идентификатор для якоря формируется читаемо: латиницей, в нижнем регистре, через дефис.
3. Оглавление с якорями уместно для длинных материалов с чёткой структурой разделов.
4. Разделы одностраничного сайта, требующие отдельного продвижения по разным запросам, лучше выносить на самостоятельные страницы, а не оставлять как якоря одного документа.
5. Канонический адрес не должен содержать якорь.

Специальный якорь для возврата к началу страницы

Отдельный частый случай использования — ссылка «наверх» в конце длинной страницы, использующая якорь на самый первый элемент документа или специальное пустое значение решётки, которое многие браузеры интерпретируют как переход к началу страницы без необходимости создавать отдельный именованный идентификатор.

Как якоря видны в системах аналитики

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

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