Представьте, что вы зашли в огромный гипермаркет за хлебом, но там нет ни одной вывески. Вам придется обойти все отделы, потратить час времени и, скорее всего, вы уйдете раздраженным, ничего не купив.
В вебе структура публикации работает точно так же. Современный интернет-серфинг — это не вдумчивое чтение, а сканирование. Если пользователь не находит ответ на свой вопрос за 3-5 секунд, он закрывает вкладку.
В этой статье мы разберем, как содержание статьи (TOC) превращает хаос в порядок, улучшает поведенческие факторы (ПФ) и помогает вашему сайту занять больше места в поисковой выдаче.
- SEO и UX: Оглавление снижает показатель отказов и формирует расширенные сниппеты (Jump links) в выдаче Google.
- Методы: Для лендингов подходит ручная HTML-разметка, для блогов — автоматическая JS-генерация.
- Плавный скролл: CSS-свойство
scroll-behavior: smoothзаменяет тяжелые скрипты анимации. - Mobile-Friendly: Используйте тег
<details>для компактного сворачивания меню на смартфонах.
Зачем сайту нужно оглавление: SEO и UX аргументы
Многие новички считают блок навигации лишним элементом дизайна. «У меня статья всего на 5000 знаков, зачем там меню?». Это ошибка.
Внедрение навигационного меню внутри поста решает две глобальные задачи.
1. Удержание пользователя (UX)
Люди ленивы. Они хотят "кликнуть и получить ответ".
Сценарий: Пользователь ищет "Как почистить кеш в браузере".
- Без TOC: Ему нужно листать введение про историю интернета, чтобы найти инструкцию. Вероятность ухода (bounce rate) — высокая.
- С TOC: Он кликает на анкор в содержании, страница совершает скролл (прокрутку) к нужному месту. Пользователь доволен, время на сайте растет.
2. Любовь Google и Яндекс (SEO)
Поисковые роботы обожают структурированные данные. Когда вы размечаете статью заголовками и даете на них ссылки:
- Робот лучше понимает иерархию контента (DOM-дерево).
- Вы получаете шанс на расширенный сниппет выдачи. Google может вывести ваши пункты меню прямо в результатах поиска (так называемые Jump links).
Это визуально увеличивает ваш сайт в поиске и повышает CTR.
Анатомия якоря: Как это работает под капотом
Прежде чем переходить к скриптам, нужно понять базу HTML. Якорная ссылка (anchor link) — это телепорт. Она состоит из двух частей: "Станция отправления" и "Станция прибытия".
- Станция прибытия (Target): Элемент, к которому мы хотим прокрутить страницу. Ему присваивается уникальный ID элемента.
- Станция отправления (Link): Сама ссылка, в которой вместо адреса сайта (
http://...) используется символ решетки#и имя ID.
Важно: Имя ID должно быть уникальным на странице и написано строго на латинице, без пробелов (используйте дефис - или нижнее подчеркивание _).
Ручная расстановка (HTML + CSS)
Этот метод идеально подходит для лендингов или небольших блогов на HTML, где нет возможности использовать сложные скрипты. Мы создадим карту поста своими руками.
Разметка заголовков (Цели)
Допустим, у вас есть заголовок <h2>. Добавляем ему атрибут id.
<h2 id="history">История создания биткоина</h2>Создание меню (Ссылки)
Теперь создаем список ссылок в начале статьи. В атрибут href (hypertext reference) пишем нашу хеш-ссылку.
<nav class="toc-container">
<p class="toc-title">Содержание:</p>
<ul>
<li><a href="#history">1. История создания</a></li>
<li><a href="#mining">2. Как работает майнинг</a></li>
<li><a href="#wallet">3. Выбор кошелька</a></li>
</ul>
</nav>Базовая стилизация
Без стилей это будет просто скучный список. Добавим немного CSS, чтобы блок выглядел как профессиональное оглавление.
/* Контейнер оглавления */
.toc-container {
background: #f8f9fa; /* Светло-серый фон */
border-left: 4px solid #3498db; /* Синий акцент слева */
padding: 20px;
margin-bottom: 30px;
border-radius: 4px;
}
/* Заголовок блока */
.toc-title {
font-weight: bold;
margin-bottom: 10px;
font-size: 1.2em;
}
/* Убираем стандартные точки списка */
.toc-container ul {
list-style-type: none;
padding-left: 0;
}
/* Ссылки */
.toc-container a {
text-decoration: none;
color: #333;
transition: color 0.3s;
}
.toc-container a:hover {
color: #3498db; /* Синий при наведении */
}Результат: Теперь при клике на "История создания" браузер мгновенно "прыгнет" к соответствующему заголовку. Это самый надежный, "железобетонный" способ, который работает во всех браузерах, даже если отключен JavaScript.
Автоматическое оглавление и плавный скролл: Делаем красиво
Выше мы делали всё руками. Но если вы ведете блог активно, ручная расстановка ID и ссылок превратится в каторгу. Настоящий вебмастер ленив, поэтому он делегирует рутину коду.
Сейчас мы напишем скрипт, который сам просканирует вашу статью, найдет все заголовки и соберет из них красивое меню.
Автоматическое оглавление (JavaScript)
Наша задача — пройтись по DOM-дереву, вытащить текст из тегов <h2> и <h3>, придумать им уникальные ID (если их нет) и сгенерировать HTML-список.
Алгоритм действий скрипта:
- Найти контейнер статьи (чтобы не парсить сайдбар или футер).
- Найти внутри него все заголовки.
- Для каждого заголовка сгенерировать ID и создать пункт списка.
- Вставить готовый список в начало статьи.
Готовый код (Vanilla JS)
Этот код не требует jQuery и весит всего пару килобайт. Вставьте его перед закрывающим тегом </body>.
document.addEventListener("DOMContentLoaded", function() {
// 1. Настройки
const contentSelector = '.post-content'; // Класс вашего блока со статьей
const tocSelector = '#toc'; // ID пустого дива, куда вставим меню
const content = document.querySelector(contentSelector);
const tocContainer = document.querySelector(tocSelector);
// Если нет контента или места для меню, выходим
if (!content || !tocContainer) return;
// 2. Ищем заголовки H2 и H3
const headers = content.querySelectorAll('h2, h3');
if (headers.length === 0) return;
const tocList = document.createElement('ul');
// 3. Проходим циклом по заголовкам
headers.forEach((header, index) => {
// Генерируем ID, если его нет
if (!header.id) {
header.id = `header-${index}`;
}
// Создаем элементы списка
const li = document.createElement('li');
const a = document.createElement('a');
a.href = `#${header.id}`;
a.textContent = header.textContent;
// Добавляем класс для иерархии (отступ для H3)
li.className = `toc-item-${header.tagName.toLowerCase()}`;
li.appendChild(a);
tocList.appendChild(li);
});
// 4. Вставляем заголовок и список
tocContainer.innerHTML = '<p class="toc-title">Содержание:</p>';
tocContainer.appendChild(tocList);
});Важно: В HTML вашей статьи нужно просто создать пустой блок <div id="toc"></div> в том месте, где вы хотите видеть меню. Скрипт заполнит его сам.
Магия CSS: Делаем плавный скролл (Smooth Scroll)
По умолчанию, при клике на якорную ссылку, браузер совершает резкий скачок. Это дезориентирует пользователя — он теряет контекст.
1. Свойство scroll-behavior
В 2025 году нам не нужны сложные JS-библиотеки для плавности. Достаточно одной строки в CSS для тега html.
html {
scroll-behavior: smooth;
}Теперь любой переход по якорю на странице будет анимирован браузером автоматически.
2. Проблема фиксированного хедера (Sticky Header)
Это классическая боль вебмастера. Если у вас есть липкое меню (шапка сайта, которая ездит за вами при прокрутке), то при клике на якорь заголовок спрячется под эту шапку.
- Решение: Используем современное свойство
scroll-margin-top. Оно создает невидимую "подушку" над элементом только в момент прокрутки к нему.
/* Применяем ко всем заголовкам в статье */
h2, h3 {
/* Высота вашей шапки + 20px воздуха */
scroll-margin-top: 100px;
}Оптимизация и безопасность: Финальные штрихи
Мы уже научились создавать структуру и автоматизировать её. Но есть несколько подводных камней, о которые разбиваются даже опытные вебмастера. Разберем их, чтобы ваша навигация приносила только пользу.
Типичные ошибки при создании навигации
Создавая TOC (Table of Contents), помните: вы делаете это для людей, а не только для роботов.
- "Синдром бесконечного меню". Если у вас в статье 50 подзаголовков (H2, H3, H4), ваше содержание займет три экрана прокрутки.
Решение: Ограничьтесь только H2 и H3. Мелкие подпункты в меню только создают визуальный шум. - Изменение ID после публикации. Если вы измените ID у заголовка спустя месяц, все внешние ссылки с якорями, которыми делились люди, перестанут работать.
Совет: Если статья старая, старайтесь не менятьidу заголовков без крайней нужды. - Забытая мобильная версия. На смартфоне развернутое содержание может перекрыть весь первый экран. Это убивает вовлеченность.
Бонус: Сворачивание меню без скриптов (HTML5)
Чтобы решить проблему с мобильными, не обязательно писать сложный JS-код. В современном HTML5 есть нативный тег <details>, который делает магию сам.
<details class="toc-accordion" open>
<summary class="toc-header">Показать содержание статьи</summary>
<div id="toc"></div>
</details><details>: Создает скрывающийся блок. Атрибутopenозначает, что по умолчанию меню открыто.<summary>: Текст заголовка, на который можно кликнуть для открытия/закрытия.
Заключение
Внедрение якорных ссылок и грамотного оглавления — это одно из самых эффективных действий по соотношению "затраты/результат". Вы тратите 15 минут на настройку скрипта, а получаете рост глубины просмотра, снижение отказов и SEO-бонусы в виде "прыжковых ссылок".
Не заставляйте пользователей блуждать по вашему сайту вслепую. Дайте им карту, и они останутся с вами надолго.
html { scroll-behavior: smooth; }. Браузер сам обеспечит плавную анимацию прокрутки.scroll-margin-top заголовкам, равного высоте шапки.💬 Ваш опыт важен!
А вы уже пробовали внедрять автоматическое оглавление на своих проектах или предпочитаете ручную верстку? Поделитесь своим опытом или возникшими сложностями в комментариях!
Напишите, была ли статья полезна — ваша обратная связь помогает мне делать контент лучше!