Оглавление статьи и якорные ссылки

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

Как это работает

Якорная ссылка — это ссылка не на другую страницу, а на конкретное место текущей. Каждому разделу (заголовку) присваивают идентификатор, а в оглавлении ставят ссылку на этот идентификатор. Клик — и страница прокручивается прямо к разделу.

Наглядно это работает так: клик по пункту оглавления «перематывает» страницу прямо к нужному разделу, а те же якоря иногда становятся переходами к разделам прямо в поисковой выдаче:

Чем это полезно

• Удобство. Читатель быстро находит нужное и не уходит, не доскроллив, — это в плюс поведенческим факторам.
• Возможные «быстрые переходы» в выдаче. Иногда поиск показывает под результатом ссылки прямо к разделам страницы — оглавление с якорями повышает шанс на такие быстрые ссылки.
• Структура. Оглавление дисциплинирует: оно строится из заголовков, а значит, подталкивает делать чёткую иерархию H2–H3.
• Шеринг разделов. Можно дать ссылку сразу на нужный раздел — удобно делиться.

Когда добавлять и как сделать правильно

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

• Стройте из заголовков. Пункты оглавления = заголовки H2 (при необходимости H3). Так оно отражает реальную структуру.
• Понятные идентификаторы. Лучше осмысленные (#kak-dobavit), чем абстрактные (#section1).
• Автогенерация. На CMS оглавление обычно делает плагин — собирает его из заголовков сам и обновляет при правках.
• Плавная прокрутка. Приятный, но необязательный штрих — мягкий скролл к разделу.

Ссылка сразу на раздел — и индексация

Приятный бонус якорей — можно дать ссылку не на статью целиком, а на конкретный раздел: site.ru/statya#kak-dobavit. Кликнув, человек попадёт сразу к нужному месту — удобно делиться и ссылаться. Но важно понимать про SEO: всё, что после #, поисковик при индексации отбрасывает — для него /statya и /statya#kak-dobavit это одна и та же страница. Поэтому якоря не плодят дублей (это хорошо) и не создают отдельных индексируемых страниц под каждый раздел. Если раздел настолько важен, что должен ранжироваться сам по себе по своему запросу, ему нужна не якорная ссылка, а отдельная страница с собственным URL.

Плавная прокрутка и липкая шапка

Две технические мелочи, которые сильно влияют на впечатление от оглавления:

• Плавная прокрутка. По умолчанию переход к якорю — это резкий «телепорт». Одна строка CSS scroll-behavior: smooth превращает его в мягкую прокрутку, и пользователь не теряет ориентацию.
• Поправка на липкую шапку. Частая беда: если у сайта «прилипшее» меню сверху, прыжок к разделу прячет его заголовок под этой шапкой. Лечится свойством scroll-margin-top у заголовков — оно оставляет сверху запас ровно на высоту шапки, и раздел встаёт аккуратно под ней.

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

Оглавление на мобильных

На телефоне оглавление ценнее всего — пролистывать длинный текст пальцем утомительно. Но и места мало, поэтому подход чуть другой: оглавление часто делают сворачиваемым («Содержание» с раскрытием по тапу), чтобы оно не занимало целый экран перед статьёй. Иногда добавляют компактную липкую кнопку «к разделам» или прогресс-навигацию сбоку. Главное — чтобы переходы были крупными и удобными для пальца, а сама статья не «прыгала» при раскрытии оглавления. И не забудьте про ту же поправку на липкую шапку — на мобильных она встречается ещё чаще.

Частые ошибки с якорями

• Одинаковые id у разных заголовков. Идентификатор должен быть уникальным на странице, иначе переход ведёт не туда. Автоплагины это обычно решают сами.
• Пробелы и кириллица в id. Лучше латиница и дефисы (#kak-dobavit) — так надёжнее и для браузеров, и для ссылок.
• Оглавление не из заголовков. Если пункты не совпадают с реальными H2–H3, оно вводит в заблуждение и рассинхронизируется при правках.
• Якорь на JavaScript вместо обычной ссылки. Простой <a href="#id"> надёжнее и работает без скриптов — не усложняйте.

Коротко

Оглавление в начале длинной статьи с переходами к разделам помогает читателю быстро найти нужное, а не скроллить весь текст. Делается на якорных ссылках: заголовку дают идентификатор (id), а в оглавлении ставят ссылку на него (#id). Это улучшает удобство и поведенческие факторы, повышает шанс на быстрые переходы в выдаче и дисциплинирует структуру заголовков. Добавляйте оглавление длинным материалам, стройте его из заголовков с понятными id, на CMS — плагином.