H1, H2 и H3: структура документа для читателей

H1, H2 и H3 — HTML-заголовки, которые задают тему страницы и иерархию разделов. Они помогают быстро просмотреть документ и понять, как устроены его разделы.

Заголовки — это структура документа

H1, H2 и H3 — HTML-элементы заголовков, которые организуют видимое содержимое страницы. H1 обычно задаёт главную тему страницы; H2 делят её на крупные вопросы; H3 разбивают отдельный H2, когда следующий уровень добавляет смысл. Заголовки помогают читателю быстро просматривать текст, работают с ассистивными технологиями и показывают, как связаны разделы. Это не квота, не настройка размера шрифта и не обещание места в выдаче.

На странице может быть рабочий H1, даже если он не повторяет целевой запрос слово в слово. Надёжнее проверить, точно ли заголовок описывает содержимое под ним. Google может использовать видимые заголовки при формировании поисковой выдачи, но заголовки ссылок и сниппеты строятся по множеству сигналов страницы. Разметка заголовков не компенсирует расплывчатую страницу или вводящего в заблуждение раздела.

На схеме показаны основные входные данные, проверки и путь принятия решения для H1, H2 и H3: структура документа для читателей.

Выберите структуру страницы

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

Уровень заголовкаКогда использоватьДля чего не использовать
H1Главная тема страницыДекоративный слоган, не связанный с содержимым
H2Крупный вопрос или этап страницыОдно предложение, которое должно быть абзацем
H3Настоящее подразделение темы H2Визуальный отступ без иерархии
Оформленный текстПодпись или второстепенное выделениеВыдача подписи за новый раздел документа

Пример: страница о серверном рендеринге может использовать H2 «Что возвращает SSR», «Когда SSR меняет путь доставки» и «Как проверить ответ». Под H2 про проверку H3 могут различать исходный HTML, HTTP-статус и гидратацию. Отдельный H3 «SSR» под нерелевантным H2 сломает структуру.

Проверьте иерархию в отрисованной странице

  1. Прочитайте страницу по порядку структуры и назовите вопрос, который вводит каждый заголовок.
  2. Проверьте отрисованный DOM, а не только редактор CMS, на наличие реальных элементов h1, h2 и h3.
  3. Убедитесь, что навигация шаблона, карточки и подписи в подвале не создают вводящих в заблуждение последовательностей заголовков.
  4. Проверьте аккордеоны и динамически подгружаемое содержимое в том состоянии, которое получают краулер и пользователь.
  5. Используйте список заголовков в программе чтения с экрана или дерево доступности браузера, чтобы найти пропущенные или повторяющиеся подписи.

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

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

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

Используйте CSS для внешнего вида, а элементы заголовков — для смысла документа. Самый полезный заголовок — тот, который показывает читателю, на какой вопрос на самом деле отвечает следующий раздел.

FAQ

Должна ли у страницы быть ровно одна H1?
Обычно полезен понятный главный заголовок, но важнее другая проверка: отрисованный документ должен иметь связную и осмысленную структуру.
Заголовки должны содержать точные ключевые слова?
Нет. Пишите так, чтобы заголовок точно передавал вопрос и ответ раздела. Принудительные повторы мешают ясности.
Как проверить иерархию заголовков?
Изучите отрисованный DOM и структуру, которую видят ассистивные технологии. Затем убедитесь, что каждый заголовок вводит следующее за ним содержимое, а уровни отражают реальную вложенность.