Якорные ссылки: как создавать ссылки-переходы в HTML и CMS и что они дают для SEO

Якорная ссылка, также называемая ссылкой-переходом, это одна из старейших возможностей HTML и одна из самых полезных в длинном контенте. Она позволяет читателю перейти к нужному ответу вместо прокрутки. Сам Google считает ссылки ключевым сигналом того, как связаны страницы, и в его рекомендациях по ссылкам подчёркивается, что ссылки должны быть настоящими элементами a с href. В этом руководстве показано, как создавать якорные ссылки в обычном HTML и в основных CMS, что они дают для SEO и для ответов ИИ и как они соотносятся с анкорным текстом.

Что такое якорная ссылка?

Якорная ссылка это гиперссылка, пунктом назначения которой служит место внутри страницы. URL заканчивается знаком решётки и идентификатором, который называется фрагментом: example.com/guide#step-3. Когда пользователь кликает по ней, браузер загружает страницу (или остаётся на ней) и прокручивает к элементу с id step-3.

Есть три распространённых применения:

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

Поисковые системы считают example.com/guide и example.com/guide#step-3 одной и той же страницей. Фрагмент никогда не создаёт новый URL для индексации, поэтому якорные ссылки не могут вызвать дублирование контента.

Как создать якорную ссылку в HTML?

Достаточно двух фрагментов кода: id на целевом элементе и ссылки на него.

1. Добавьте id к цели: <h2 id="pricing">Цены</h2>. Используйте строчные буквы, цифры и дефисы без пробелов и следите, чтобы каждый id на странице был уникальным.
2. Сошлитесь на него на той же странице: <a href="#pricing">Смотреть цены</a>.
3. Сошлитесь на него с другой страницы: <a href="/guide#pricing">Раздел о ценах в руководстве</a>.
4. Проверьте: кликните по ссылке, убедитесь, что заголовок появляется вверху экрана и не спрятан под фиксированной шапкой (это исправляет свойство CSS scroll-margin-top).

Старый способ, <a name="pricing"></a>, всё ещё работает в браузерах, но в HTML5 считается устаревшим. Используйте id на самом заголовке. Родственная возможность, текстовые фрагменты, позволяет ссылке выделять отрывок без какого-либо id с помощью синтаксиса #:~:text=, как описано в MDN. Google использует этот механизм, когда прокручивает посетителей к цитируемому отрывку в некоторых избранных сниппетах.

Как добавить якорные ссылки в WordPress, Shopify, Webflow или Wix?

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

Если ваша CMS создаёт id автоматически, проверьте их: некоторые формируют id из полного текста заголовка, что даёт длинные нестабильные фрагменты, которые ломаются при редактировании заголовка.

Помогают ли якорные ссылки SEO?

Якорные ссылки прежде всего функция удобства. Их ценность для SEO косвенная, но в длинном контенте она реальна:

• Ссылки «перейти к» в результатах: на длинных хорошо структурированных страницах Google иногда показывает под результатом ссылки на разделы, что может повысить видимость и клики. Когда их показывать, решает Google.
• Лучшее сопоставление фрагментов: чёткие заголовки с id помогают поисковым системам и ИИ-ассистентам находить точный ответ внутри длинной страницы, по той же логике, по которой выигрывают избранные сниппеты.
• Вовлечённость: оглавление позволяет читателям добраться до нужной части вместо того, чтобы уйти искать её в другом месте.
• Доступность: ссылки-пропуски и навигация внутри страницы помогают пользователям клавиатуры и программ чтения с экрана, этот принцип описан в рекомендациях W3C по доступности.
• Точные внутренние ссылки: ссылка на #definition в другой статье отправляет читателей к нужному отрывку, что усиливает вашу внутреннюю перелинковку.

Чего якорные ссылки не делают: они не передают странице дополнительный вес, поскольку ссылка на page#section считается ссылкой на страницу, и они не заменяют хороший контент. Одно техническое предупреждение прямо из основ JavaScript SEO от Google: не используйте фрагменты для загрузки разного содержимого страницы, потому что Googlebot не может надёжно обрабатывать такие URL. Используйте фрагменты только для прокрутки внутри контента, который уже есть на странице.

Чем якорная ссылка отличается от анкорного текста?

Эти два термина близки и часто путаются. Якорная ссылка описывает, куда ведёт ссылка (к разделу). Анкорный текст описывает, что в ссылке написано (кликабельные слова). Наша статья глоссария об анкорном тексте подробно раскрывает вторую тему.

Каковы лучшие практики для якорных ссылок и их текста?

У каждой якорной ссылки есть и анкорный текст, поэтому оба набора правил действуют вместе.

• Короткие читаемые id: #pricing, #how-to-install, а не #section-1 или фрагмент из 12 слов.
• Описательный текст ссылки: Google рекомендует текст, который описателен, достаточно краток и релевантен, и не советует общие формулировки вроде «нажмите здесь».
• Оглавление на длинных страницах: при объёме больше примерно 1500 слов перечислите разделы H2 вверху, каждый со ссылкой на свой id.
• Заголовки-вопросы: заголовки, сформулированные как вопросы, которые задают люди, делают ссылки-переходы полезнее, а текст проще цитировать.
• Стабильные id: не меняйте id после публикации, если на него ссылаются другие страницы или сайты.
• Проверьте структуру: анализатор структуры заголовков показывает, чисты ли у вас уровни H2 и H3, прежде чем вы добавите якоря.

Каких ошибок следует избегать?

• Дублирующиеся id: если у двух элементов одинаковый id, ссылка переходит только к первому.
• Скрытые цели: заголовок внутри закрытой вкладки или аккордеона может быть недоступен для ссылки.
• Фиксированные шапки, закрывающие заголовок: добавьте scroll-margin-top в CSS.
• Маршрутизация на фрагментах: одностраничные приложения, меняющие контент через URL вида #/page, трудно сканировать Google.
• Переоптимизированный анкорный текст: повторение одного и того же точного ключевого слова в каждой ссылке выглядит как манипуляция.

Заключение

Якорная ссылка отправляет читателей к точному разделу страницы через фрагмент #id. Создайте её, добавив id к заголовку и сославшись на него, в HTML или через настройки вашей CMS. Её польза для SEO косвенная, но конкретная в длинном контенте: оглавления, возможные ссылки-переходы в Google, более чёткие отрывки для ответов ИИ и лучшие внутренние ссылки, при условии что анкорный текст остаётся описательным. Если вы не хотите структурировать каждую статью вручную, Sorank, наше ПО для SEO и GEO на autopilot, пишет структурированные статьи с заголовками-вопросами и внутренними ссылками и публикует их в вашей CMS: смотрите генератор статей для блога на основе ИИ и попробуйте его с бесплатным 3-дневным пробным периодом.