Структура заголовков HTML 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 крупным жирным шрифтом, но размер — побочный эффект. Через CSS можно сделать H6 визуально крупнее H1, но семантика от этого не изменится: для поисковика и программ для чтения с экрана H1 остаётся главным заголовком.

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

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

zoom_in

<!-- Correct hierarchy -->
<h1>Guide to Welders' Protective Clothing</h1>

  <h2>Types of protective clothing</h2>
    <h3>Fire-resistant suits</h3>
    <h3>Protective masks</h3>

  <h2>Regulatory standards</h2>
    <h3>EN ISO 11612</h3>
    <h3>ANSI/ISEA standards</h3>

  <h2>How to choose</h2>

<!-- Wrong hierarchy (skipped levels) -->
<h1>Guide to protective clothing</h1>
  <h3>Fire-resistant suits</h3>  <!-- H2 skipped! -->
    <h5>Standards</h5>           <!-- H4 skipped! -->

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

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

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

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

Google использует заголовки для формирования избранных сниппетов. Когда пользователь задаёт вопрос, алгоритм ищет страницы, где H2 или H3 близко совпадает с запросом, а следующий блок даёт прямой ответ. Удачно составленные H2 — бесплатные кандидаты на нулевую позицию.

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

Доступность и программы для чтения с экрана

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

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

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

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

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

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

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

<!-- BAD: typical template with errors -->
<div class="title">Workwear catalogue</div>    <!-- not H1! -->
<h1>Acme Workwear Ltd</h1>                     <!-- H1 = company name -->
<h1>Winter workwear</h1>                       <!-- second H1 -->
<h3>Fire-resistant suits</h3>                  <!-- H2 skipped -->

<!-- GOOD: correct structure -->
<h1>Winter welders' workwear catalogue</h1>
  <h2>Fire-resistant suits</h2>
    <h3>Suits to EN ISO 11612</h3>
    <h3>Suits to ANSI Z49.1</h3>
  <h2>Protective masks and shields</h2>

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

// Quick heading hierarchy check in the browser console
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);

// How many H1s are on the page?
const h1Count = $$('h1').length;
console.log(`H1 count: ${h1Count}`, h1Count === 1 ? '✓' : '✗ ERROR');

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

H1

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

H2

• H2 идёт сразу за H1, без пропуска уровня
• Каждый H2 описывает отдельный крупный раздел страницы
• H2 содержат вторичные запросы и LSI-термины (естественно, без переспама)
• Формулировка H2 может стать якорем для избранного сниппета
• Нет H2, которые существуют ради внешнего вида: только там, где начинается новый тематический раздел

H3–H6

• H3 вложен в H2, H4 — в H3 (без пропуска уровней вниз)
• H4–H6 используются только тогда, когда глубокая вложенность действительно нужна
• Тег H3–H6 не используется вместо H2 ради визуального размера
• При беглом просмотре общая структура читается как логичное оглавление

Доступность

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

FAQ

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