Заголовки H1, H2, H3

Иерархия и смысл

Заголовки образуют дерево: от общего к частному. Пользователь по одному H2 понимает, о чём следующий абзац; поисковая система использует ту же логику как слабый сигнал к тематическим кластерам на странице. Прыжок с H2 сразу на H4 без промежуточного H3 не «ломает» индексацию автоматически, но ухудшает предсказуемость для вспомогательных технологий и редактуры.

Заголовки и поиск

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

• Согласуйте H1 с title страницы по смыслу (не обязательно дословное копирование).
• Не дублируйте один и тот же длинный ключ во всех H2 — это выглядит как переспам.
• Для YMYL-тем ясные заголовки снижают недоверие и помогают быстрой проверке фактов.

Доступность

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

• Не используйте div/span с классом «как заголовок» вместо h1–h6 без aria-ролей — по возможности замените на настоящий тег.
• После H1 логично идти H2, а не сразу H5 «потому что макет».
• Карточки и аккордеоны: заголовок секции должен оставаться заголовком в разметке, а не только жирным текстом.

Пример в HTML

Ниже — упрощённый каркас статьи: один H1, два раздела H2, внутри одного из них вложен H3.

<h1>Заголовки H1–H3: иерархия для сайта</h1>
<p>Введение без нового уровня заголовка...</p>

<h2>Зачем нужна структура</h2>
<p>Текст раздела...</p>

<h3>Для пользователей и роботов</h3>
<p>Подраздел...</p>

<h2>Типичные ошибки</h2>
<ul>
  <li>Подмена уровня ради размера шрифта</li>
  <li>Несколько H1 без редакционной причины</li>
</ul>

Типичные ошибки

• Заголовок пустой или совпадает с меню/футером на каждой странице.
• Одинаковые H2 на разных URL (дубли шаблона без уточнения темы).
• Блок «Связанные статьи» оформлен как H2 того же уровня, что и основной контент — лучше понизить уровень или вынести в регион без ложной конкуренции с телом статьи.
• Вложенность ради визуала: 10 уровней H3 подряд без H2.

Чеклист

• Один явный H1; остальное — ступенчато H2 → H3.
• Каждый заголовок читается вне контекста и обещает содержание абзаца.
• Внешний вид через CSS; уровень тега отражает смысл, не макет.
• Прогон через axe / Lighthouse или клавиатурная навигация по заголовкам.