Зачем нужно оглавление
Читатель длинной статьи часто ищет конкретный ответ. Оглавление позволяет перейти к нужному разделу без прокрутки и сразу показывает, о чём материал. Для поисковых систем структура с якорями — дополнительная подсказка о содержании, а в некоторых случаях в выдаче под результатом появляются ссылки на отдельные разделы страницы.
Как сделать оглавление
Нужно два элемента: идентификаторы у заголовков и ссылки на них. Идентификатор задают в атрибуте id, а ссылка ведёт на него через решётку:
<nav aria-label='Содержание'>
<ol>
<li><a href='#chto-takoe'>Что это такое</a></li>
<li><a href='#kak-vybrat'>Как выбрать</a></li>
</ol>
</nav>
<h2 id='chto-takoe'>Что это такое</h2>
<h2 id='kak-vybrat'>Как выбрать</h2>Правила
| Правило | Пояснение |
|---|---|
| Идентификаторы стабильны | При правке статьи не меняйте id: на них могут ссылаться другие страницы и закладки |
| Идентификаторы читаемы | Латиницей и дефисами, отражают заголовок |
| Один идентификатор — одна страница | Не дублируйте id внутри страницы |
| Только основные разделы | Обычно уровни H2 и, при необходимости, H3 |
| Оглавление в начале | До основного текста, но после короткого вступления |
Для кого оно полезно
- Для читателя: быстрый доступ к нужной части и обзор содержания.
- Для доступности: пользователи программ экранного доступа тоже могут переходить по заголовкам и ссылкам.
- Для поисковых систем: дополнительный сигнал о структуре, возможные ссылки на разделы в выдаче.
Типичные ошибки
- Оглавление есть, а у заголовков нет идентификаторов: ссылки никуда не ведут.
- Идентификаторы меняются при каждой правке: старые ссылки перестают работать.
- Слишком подробное оглавление: тридцать пунктов в короткой статье.
- Идентификаторы на кириллице или с пробелами: они плохо читаются и неудобны.
Связанные материалы. Как ведут себя якоря в адресах и в результатах поиска — в статье про якоря в адресе. Про иерархию заголовков в статье — заголовки H1–H3.
Автоматическое оглавление
В большинстве систем управления оглавление строится автоматически по заголовкам. Если делать его скриптом, это выглядит примерно так:
const list = document.querySelector('#toc');
document.querySelectorAll('article h2[id]').forEach(function (h) {
const li = document.createElement('li');
li.innerHTML = "<a href='#" + h.id + "'>" + h.textContent + "</a>";
list.appendChild(li);
});Учтите, что оглавление, построенное скриптом, робот может не увидеть. Надёжнее выводить его при формировании страницы на сервере, а скрипт использовать только для подсветки текущего раздела.
Частые вопросы
Нужно ли оглавление в каждой статье?
Нет: оно полезно в длинных материалах с несколькими разделами; в короткой статье оно только загромождает страницу.
Почему нельзя часто менять идентификаторы заголовков?
На них могут ссылаться другие страницы и закладки читателей; после смены такие ссылки перестанут вести к нужному разделу.
Влияет ли оглавление на поиск?
Косвенно: оно показывает структуру страницы, а в некоторых случаях поисковая система выводит ссылки на разделы в результатах.
Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.