Структура заголовков H1–H6: полное руководство для SEO

HTML предоставляет шесть уровней заголовков — от <h1> до <h6>. Большинство авторов знают, что H1 важен для SEO. Но мало кто понимает, какую роль играют H2, H3 и более глубокие уровни, как они взаимодействуют с поисковыми роботами и почему неправильная иерархия наносит ущерб и SEO, и пользователям.

Для краулера Google теги заголовков — это оглавление документа. Именно по ним робот определяет тему страницы, выделяет подтемы и решает, насколько документ релевантен конкретному запросу. Пропущенный уровень, лишний H1 или заголовок, используемый «для красоты», разрушают эту карту.

zoom_in

Что такое теги заголовков H1–H6

H1–H6 — это семантические HTML-элементы, обозначающие заголовки шести уровней важности. H1 — главный заголовок страницы, H6 — самый вложенный подзаголовок. Каждый уровень передаёт краулеру сигнал: «контент внутри этой секции посвящён вот этой теме».

В отличие от визуального форматирования (<b>, <big>, CSS-классы), теги заголовков несут смысл. Браузер по умолчанию отображает H1 крупным жирным шрифтом, но размер — лишь побочный эффект. Можно сделать H6 визуально крупнее H1 через CSS, но это не изменит семантику: для поисковика и screen reader H1 по-прежнему главный.

Иерархия: H1, H2, H3 и глубже

Правильная иерархия заголовков работает как оглавление книги: одна книга — одно название (H1), несколько глав (H2), параграфы внутри глав (H3), детали параграфов (H4+). Нарушение этой структуры — всё равно что выдрать из книги главы и перемешать листы.

zoom_in

<!-- Правильная иерархия -->
<h1>Руководство по спецодежде для сварщиков</h1>

  <h2>Виды спецодежды</h2>
    <h3>Огнестойкие костюмы</h3>
    <h3>Защитные маски</h3>

  <h2>Требования ГОСТ</h2>
    <h3>ГОСТ Р 12.4.218</h3>
    <h3>Европейские стандарты EN</h3>

  <h2>Как выбрать</h2>

<!-- Неправильная иерархия (пропуск уровней) -->
<h1>Руководство по спецодежде</h1>
  <h3>Огнестойкие костюмы</h3>  <!-- H2 пропущен! -->
    <h5>ГОСТ</h5>              <!-- H4 пропущен! -->

Когда нужны H4–H6

H4, H5 и H6 применяются редко — только в объёмных технических документах, где необходима четвёртая и более глубокая вложенность. Например: юридические договоры, API-документация, медицинские протоколы. В блоговых статьях и лендингах три уровня (H1–H3) полностью перекрывают все задачи.

Как заголовки влияют на SEO

Каждый тег заголовка — это сигнал релевантности. Чем выше уровень, тем весомее сигнал: H1 весит больше H2, H2 — больше H3. Но все они участвуют в оценке тематической близости документа к поисковому запросу.

Google использует заголовки для генерации расширенных сниппетов (featured snippets). Когда пользователь задаёт вопрос, алгоритм ищет страницы, где H2 или H3 содержат формулировку, близкую к запросу, а следующий блок контента даёт прямой ответ. Правильно написанные H2 — это бесплатные кандидаты на нулевую позицию.

Заголовки также влияют на внутреннюю перелинковку: анкоры ссылок, совпадающие с текстом H2 целевой страницы, усиливают релевантность. И на sitemaps: некоторые CMS автоматически добавляют id к заголовкам, создавая якорные URL — их можно прямо указывать в XML-sitemap для глубоких разделов.

Доступность и screen readers

Screen readers — программы экранного доступа для пользователей с нарушениями зрения — используют теги заголовков как основной инструмент навигации по странице. Пользователь нажимает клавишу H и перепрыгивает между заголовками, получая «оглавление» страницы на слух.

По стандарту WCAG 2.1 (критерий 1.3.1 «Информация и взаимосвязи») заголовки должны быть реализованы через семантические HTML-теги, а не через стили. Кнопка с font-size: 24px; font-weight: bold — не заголовок для screen reader. <h2> — заголовок. Разница огромная.

Правила использования заголовков

Пять правил, которые охватывают 95% ситуаций в реальных проектах.

Типичные ошибки в структуре заголовков

Эти ошибки встречаются при аудите большинства сайтов — от небольших блогов до корпоративных платформ.

• Несколько H1 на странице. Чаще всего — визуальные конструкторы, которые оборачивают любой крупный блок в H1. Найти: Screaming Frog → H1 → Multiple. Исправить: оставить один H1, остальные заменить на H2 или styled <div>.
• Заголовки для стиля, не для семантики. Дизайнер выбрал H4 потому, что он «подходит по размеру», а H2 и H3 отсутствуют. Краулер видит H1 → H4 → H1 → H4 — хаос вместо структуры.
• Отсутствующий H1. После редизайна или переноса CMS H1 исчезает из шаблона. Страница без H1 теряет главный on-page сигнал релевантности.
• H1 = название сайта на каждой странице. CMS-шаблон подставляет имя компании в H1 глобально. Все страницы получают одинаковый H1 — дубли, нулевая релевантность.
• Пропуск уровней при вложении. H1 → H3 (пропущен H2), H2 → H4 (пропущен H3). Screen reader сообщает об ошибке; краулер теряет контекст подраздела.
• Использование <p> или <div> вместо заголовков. Текст выглядит как заголовок визуально, но не является им для поисковика и screen reader. Часто встречается в legacy-шаблонах.
• Слишком длинные заголовки. H2 из трёх предложений — не заголовок, это абзац. Заголовок должен читаться за одно движение глаза: 4–12 слов оптимально.

<!-- ПЛОХО: типичный шаблон с ошибками -->
<div class="title">Каталог спецодежды</div>  <!-- не H1! -->
<h1>ООО РабочаяОдежда</h1>                    <!-- H1 = название компании -->
<h1>Зимняя спецодежда</h1>                    <!-- второй H1 -->
<h3>Огнестойкие костюмы</h3>                  <!-- H2 пропущен -->

<!-- ХОРОШО: правильная структура -->
<h1>Каталог зимней спецодежды для сварщиков</h1>
  <h2>Огнестойкие костюмы</h2>
    <h3>Костюмы ГОСТ Р 12.4.218</h3>
    <h3>Костюмы по EN ISO 11612</h3>
  <h2>Защитные маски и щитки</h2>

Инструменты для проверки структуры заголовков

// Быстрая проверка иерархии заголовков в консоли браузера
const headings = $$('h1,h2,h3,h4,h5,h6');
const report = headings.map(h => ({
  tag: h.tagName,
  text: h.textContent.trim().slice(0, 60)
}));
console.table(report);

// Проверка: сколько H1 на странице?
const h1Count = $$('h1').length;
console.log(`H1 на странице: ${h1Count}`, h1Count === 1 ? '✓' : '✗ ОШИБКА');

Чеклист структуры заголовков

H1

• Ровно один H1 на каждой странице сайта
• H1 содержит главный целевой запрос страницы
• H1 совпадает по смыслу с тегом title (формулировки могут отличаться)
• H1 уникален на всём сайте — не дублируется по шаблону
• H1 не является пустым, не содержит только изображение и не скрыт через CSS

H2

• H2 следует сразу за H1 без пропуска уровня
• Каждый H2 описывает отдельный крупный раздел страницы
• H2 содержат вторичные запросы и LSI-слова (органично, без переспама)
• Формулировка H2 позволяет выступить основой для featured snippet
• Нет H2 «для красоты» — только там, где начинается новый смысловой раздел

H3–H6

• H3 вложен внутрь H2, H4 — внутрь H3 (не пропускать уровни вниз)
• H4–H6 используются только при реальной необходимости в глубокой вложенности
• Ни один тег H3–H6 не стоит «вместо» H2 из-за размера шрифта
• Общая структура читается как логичное оглавление при беглом просмотре

Доступность

• Проверен порядок заголовков расширением HeadingsMap или WAVE
• Все заголовки реализованы семантическими HTML-тегами, а не styled div
• Нет скрытых заголовков (display: none, visibility: hidden)
• Каждый заголовок несёт смысловую нагрузку — нет пустых или бессодержательных

FAQ

Ответы на самые частые вопросы о структуре заголовков, которые возникают при аудитах и в работе с контентными командами.