Заголовки H1–H6: что это такое и как выстроить иерархию страницы

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

Уровень выбирают не по размеру шрифта и не ради ключевого запроса. Он показывает место раздела в структуре документа. Внешний вид задаётся CSS и может отличаться от стандартного оформления браузера.

Для большинства страниц достаточно одного понятного H1 и последовательных H2–H3. Однако это практическая модель, а не основание пугать санкциями за любое отклонение. Несколько H1, пропуск уровня или ссылка внутри заголовка оцениваются по контексту, доступности и тому, остаётся ли структура понятной.

H1–H6 задают смысловую структуру страницы, а не размер шрифта

Элементы <h1>–<h6> обозначают заголовки шести уровней. Чем меньше номер, тем выше уровень раздела: H1 находится наверху иерархии, а H6 — глубже остальных.

Браузер обычно оформляет H1 крупнее H2, но это лишь встроенные стили. После подключения CSS любой уровень можно сделать крупнее, меньше, жирнее или визуально незаметнее другого. Семантический уровень при этом не меняется.

H1 обозначает главную тему документа, H2–H6 раскрывают вложенные разделы

H1 сообщает, чему посвящена основная часть страницы. В статье это может быть название материала, в категории — название группы товаров, в карточке — название конкретного товара или услуги.

H2 обозначают крупные разделы внутри этой темы. Если раздел H2 нужно разделить на самостоятельные части, используют H3. H4 раскрывает конкретный H3, H5 — конкретный H4, H6 — конкретный H5.

Использовать все уровни не требуется. Если структура заканчивается на H2, добавлять H3–H6 ради формальной полноты не нужно. Глубина зависит от содержания, а не от количества текста или типа сайта.

CSS меняет внешний вид заголовка, но не его место в структуре

CSS отвечает за оформление, а HTML-тег — за назначение элемента. Поэтому крупный <div> не становится заголовком только из-за размера шрифта, а визуально небольшой H2 остаётся заголовком второго уровня.

Выбор уровня по внешнему виду создаёт две типовые ошибки. Разработчик ставит H2 там, где нужен H3, потому что H2 подходит по размеру, либо использует H-тег для декоративной подписи, которая не открывает новый раздел.

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

Короткий HTML-пример показывает дерево разделов лучше списка правил

В этом фрагменте H1 задаёт тему страницы, оба H2 открывают разделы одного уровня, а H3 относятся только к первому H2:

<h1>Настройка контекстной рекламы</h1>

<h2>Подготовка рекламной кампании</h2>
<h3>Сбор поисковых запросов</h3>
<h3>Группировка запросов</h3>

<h2>Запуск и контроль кампании</h2>

После двух H3 структура возвращается к H2. Это не нарушение: подразделы первого раздела закончились, и начинается следующий крупный раздел.

Если добавить H4, у него должен быть конкретный родитель H3. Искусственная лестница H1 → H2 → H3 → H4 без реальной вложенности усложняет документ и не даёт читателю дополнительного смысла.

Уровень заголовка выбирают по месту раздела в иерархии

Уровень определяют по отношению раздела к другим частям страницы. Рабочая последовательность выглядит так:

1. Сформулируйте главную тему страницы.
2. Разделите её на крупные самостоятельные вопросы.
3. Добавьте подразделы только там, где крупному разделу нужна детализация.
4. Проверьте, есть ли у каждого подзаголовка понятный родитель.
5. Прочитайте только заголовки и оцените, складываются ли они в последовательный план.

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

Сначала определите главную тему и крупные смысловые разделы

Первым шагом задайте одну тему, которую пользователь ожидает увидеть на странице. Эта формулировка становится основой H1.

Затем выпишите крупные вопросы, без которых тема не раскрывается. Каждый такой вопрос может стать H2, если у него есть собственный блок содержания и он не является уточнением другого раздела.

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

Добавляйте H3–H6 только там, где разделу нужна реальная детализация

H3 нужен, когда внутри H2 есть несколько самостоятельных подтем. Его задача — раскрыть родительский раздел, а не просто разбить длинный текст на визуальные куски.

H4–H6 применяются по той же логике. H4 должен раскрывать конкретный H3, H5 — конкретный H4. Если связь приходится объяснять отдельным абзацем, вероятно, уровень выбран неверно или раздел стоит не на своём месте.

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

Проверьте структуру без основного текста: заголовки должны складываться в понятный план

Скопируйте H1–H6 в отдельный список и временно уберите абзацы. По этому списку должно быть понятно, о чём страница, какие вопросы она раскрывает и какие подразделы относятся к каждому разделу.

Проблема видна, если заголовки повторяют друг друга, меняют тему без перехода или используют общие формулировки вроде «Особенности», «Преимущества» и «Дополнительная информация» без контекста.

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

Заголовки помогают читателям и скринридерам перемещаться по странице

Заголовочная структура служит навигацией. Читатель просматривает страницу по диагонали, а пользователь скринридера может переходить между заголовками или открыть их список, не прослушивая весь текст подряд.

Эта функция существует независимо от SEO. Даже если изменение H-тегов не повлияет на позиции, понятная иерархия сокращает путь до нужного раздела и показывает отношения между частями документа.

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

Хороший список H1–H6 передаёт основную логику страницы без абзацев. Пользователь понимает, где начинается нужная тема, какие вопросы находятся внутри неё и когда документ возвращается на более высокий уровень.

Для скринридера уровень заголовка сообщает не только название, но и место раздела в иерархии. Последовательность H2 → H3 показывает связь родительского и дочернего блока. Переход H2 → H4 без H3 может лишить пользователя понятного промежуточного уровня.

Заголовки не заменяют содержание. Формулировка «Подробнее» бесполезна и зрячему читателю, и пользователю скринридера, потому что вне визуального контекста не объясняет, о чём раздел.

DOM-порядок должен сохранять смысл, даже если дизайн переставляет блоки

Скринридер и клавиатурная навигация ориентируются прежде всего на порядок элементов в DOM. CSS Grid и Flexbox могут визуально переместить блок выше или ниже, не меняя его положения в исходной структуре.

Если визуально раздел «Стоимость» расположен перед «Условиями», а в DOM идёт после него, пользователи разных способов навигации получат разную последовательность. На простой странице это создаёт путаницу, а в сложном интерфейсе может разорвать связь заголовка с относящимся к нему контентом.

Проверяйте не только макет, но и исходный порядок: заголовок должен предшествовать своему содержимому, а дочерний раздел — находиться внутри логического контекста родителя.

H1 и Title решают разные задачи и не обязаны различаться любой ценой

H1 и Title описывают одну страницу, но работают в разных местах. H1 виден в основном содержимом, а Title находится в <head> и используется браузером, закладками и поисковыми системами.

Сравните H1 и Title по месту в коде, отображению и пользовательской задаче

H1 должен точно соответствовать содержимому страницы. Title тоже должен описывать эту страницу, но может включать бренд или уточнение, которое полезно вне контента.

Поисковая система может сформировать заголовок результата не только из <title>, поэтому заданная формулировка не гарантирует её дословное отображение. Это отдельный механизм, который нельзя свести к совпадению или различию двух элементов.

Смысловое совпадение допустимо, а искусственное расхождение ухудшает ясность

H1 и Title могут совпадать полностью, если одна формулировка подходит обоим контекстам. Само совпадение не доказывает ошибку и не является основанием ожидать санкции.

Различие оправдано, когда оно решает конкретную задачу. Например:

H1: Аудит рекламной кампании в Яндекс Директе
Title: Аудит кампании в Яндекс Директе: что проверить перед перезапуском

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

Искусственное расхождение возникает, когда Title обещает одно, а H1 называет другое. Это создаёт несоответствие ожиданий. Не нужно менять слова только ради уникальности между тегами: важнее согласованность темы.

Структура H1–H6 зависит от типа страницы, а не от фиксированного шаблона

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

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

Статья и документация допускают более глубокую вложенность, когда тема её требует

В статье H2 обычно соответствуют крупным вопросам читателя, а H3 раскрывают аспекты этих вопросов. Глубина появляется из логики материала, а не из числа знаков.

Документация может содержать H4–H5, если описывает модуль, его настройки, отдельные параметры и исключения. Такая вложенность оправдана, пока пользователь понимает родительскую цепочку и может вернуться к нужному уровню.

Если документ регулярно доходит до H6, стоит проверить архитектуру материала. Иногда проблема не в допустимости уровня, а в том, что одну страницу перегрузили несколькими самостоятельными темами.

Лендинг, категория и карточка товара обычно требуют более плоской структуры

Коммерческие страницы чаще состоят из последовательных блоков одного уровня. H1 называет предложение, категорию или объект, а H2 отделяют самостоятельные части страницы.

H3 нужен, если внутри H2 действительно есть подразделы. Например, в разделе «Условия доставки» можно выделить способы доставки и сроки как H3, если каждому посвящён отдельный блок.

Название каждой карточки, преимущества или шага не обязано быть H-тегом. Компонент может выглядеть как отдельный блок, но семантически оставаться элементом списка внутри одного раздела.

H-теги помогают понять структуру контента, но не гарантируют рост позиций

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

Реальная польза проверяется иначе: поисковым системам проще сопоставлять фрагменты страницы с темами, пользователям проще находить нужный блок, а скринридерам — навигировать по документу. Из этого не следует гарантированный рост трафика или позиций.

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

Формальная лестница H1–H6 не компенсирует слабый или нерелевантный контент

Страница не становится полезнее от механической замены <div> на H2 и H3. Заголовки описывают содержание, но не создают его.

Если раздел обещает ответ на вопрос, а внутри размещён общий текст, корректный H2 только точнее показывает несоответствие. То же относится к странице, которая не закрывает запрос, содержит устаревшие данные или дублирует другие URL.

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

Ключевые слова должны описывать раздел, а не повторяться в каждом заголовке

Ключевая формулировка уместна, если она естественно называет тему. H1 обычно отражает основной запрос или его понятный эквивалент, а H2–H3 обозначают содержание конкретных разделов.

Повтор одной фразы во всех заголовках не усиливает структуру. Он делает список однообразным и мешает различать разделы:

Плохо:
H2: H1–H6 для SEO
H2: Ошибки H1–H6 для SEO
H2: Проверка H1–H6 для SEO

Лучше:
H2: Как выбрать уровень заголовка
H2: Какие ошибки ломают иерархию
H2: Как проверить структуру страницы

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

Длина и количество заголовков зависят от смысла, а не от универсальных чисел

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

Количество H2 определяется числом крупных разделов. Правило «ставить H2 через определённое количество слов» смешивает оформление и структуру: два текста одинакового объёма могут раскрывать разное число вопросов.

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

Несколько H1, пропуск уровней и ссылки в заголовках требуют контекстной проверки

Отклонение от привычной схемы не следует автоматически считать SEO-ошибкой. Сначала определяют риск, затем проверяют последствия для структуры, доступности и шаблонов сайта.

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

Несколько H1 оценивают по структуре документа, а не только по счётчику тегов

Риск: несколько H1 могут создать несколько конкурирующих главных тем, особенно если один тег выводит шаблон, а второй добавлен редактором.

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

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

Несколько H1 сами по себе не доказывают наличие поисковой санкции. Однако для большинства страниц один явный H1 остаётся более прозрачной моделью для редакторов, разработчиков и аудита.

Разработчик нужен, если H1 создаётся внутри переиспользуемого компонента, шаблона темы или клиентского JavaScript и простая правка контента не устраняет дубли.

Пропуск уровня опасен потерей логики, а не автоматической SEO-санкцией

Риск: переход H2 → H4 может создать дочерний раздел без понятного H3-родителя.

Последствие: список заголовков перестаёт отражать отношения между блоками. Пользователь скринридера видит скачок уровня, но не получает объяснения, к какому промежуточному разделу относится H4.

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

Нельзя добавлять пустой H3 только ради закрытия формального пропуска. Уровень меняют по реальной иерархии, а не вставляют фиктивный элемент.

Ссылка или изображение внутри заголовка допустимы только при ясной функции и корректной разметке

Риск: интерактивный заголовок может стать неудобным для навигации, а изображение без текстовой альтернативы — не передать название раздела.

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

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

Изображение внутри heading element должно передавать текстовый смысл доступным способом. Декоративная картинка не должна подменять название раздела. При сложной интерактивности проверяют DOM, доступное имя элемента и работу с клавиатуры.

Страница выглядит нормально, но её заголовочная структура может быть сломана

Дизайн не показывает семантическую ошибку напрямую. Текст может выглядеть как последовательная статья, хотя в DOM отсутствует H1, уровни выбраны по размеру или шаблон генерирует одинаковые заголовки на сотнях URL.

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

Крупный текст без H-тега и H-тег ради размера дают одинаковый визуальный результат, но разную семантику

Симптом: разделы визуально выделены, но расширение или инспектор не показывает соответствующие H-теги.

Возможная причина: заголовки свёрстаны через <div> или <p>, а размер задан CSS. Обратная ситуация — H2 используется для крупной декоративной подписи, которая не открывает раздел.

Что проверить: откройте DOM и сопоставьте каждый визуальный заголовок с его HTML-элементом. Если текст открывает самостоятельный блок, ему нужен подходящий heading element. Если это подпись, цена, метка или слоган внутри существующего раздела, H-тег может быть лишним.

Результат проверки оценивается по функции элемента, а не по внешнему виду. Массово менять все крупные надписи на H2 нельзя: так можно создать десятки ложных разделов.

Дубли, пустые и шаблонные H1 указывают на проблему CMS или шаблона

Симптом: на одной странице два одинаковых H1, тег пустой либо один текст повторяется на разных URL.

Возможная причина: CMS автоматически выводит название страницы, редактор добавляет второй H1 вручную, скрытый блок остаётся в DOM или шаблон подставляет общее название без данных страницы.

Что проверить: сравните исходный HTML нескольких URL одного типа. Если дефект повторяется по шаблону, исправлять каждую страницу вручную бессмысленно — нужно менять генерацию в CMS или шаблоне.

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

Заголовки не складываются в план: вероятна смысловая, а не техническая ошибка

Симптом: инструмент не показывает пропусков и дублей, но список H1–H6 не объясняет содержание страницы.

Возможная причина: заголовки слишком общие, повторяют друг друга, перегружены ключевыми словами или находятся не под тем родителем.

Что проверить: прочитайте только список заголовков. Для каждого H3 назовите H2, который он раскрывает. Для каждого H2 сформулируйте отдельный вопрос пользователя, на который отвечает раздел.

Если техническая структура формально чистая, но смысл не восстанавливается, краулер не решит проблему. Нужна ручная редактура формулировок и перестановка разделов.

Проверка H1–H6 должна сочетать автоматический отчёт и ручную оценку смысла

Автоматический инструмент находит теги, дубли и пропуски, но не понимает, соответствует ли заголовок содержимому. Поэтому аудит проводят в пять шагов:

1. Посмотреть H1–H6 в DOM на одной странице.
2. Составить список заголовков и проверить вложенность вручную.
3. Запустить краулер для поиска массовых ошибок.
4. Проверить страницу инструментом доступности и вручную пройти навигацию.
5. Расставить приоритеты по влиянию и масштабу.

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

На одной странице начните с DOM и списка заголовков

1. Откройте DevTools и найдите элементы h1, h2, h3, h4, h5, h6.
2. Зафиксируйте их текст и порядок появления в DOM.
3. Сопоставьте список с визуальной структурой страницы.
4. Проверьте, предшествует ли каждый заголовок своему содержимому.
5. Убедитесь, что H3–H6 имеют понятных смысловых родителей.

Просмотр исходного кода полезен, но на страницах с динамическим рендерингом он может отличаться от итогового DOM. Для проверки того, что реально сформировал браузер, ориентируйтесь на вкладку Elements.

Браузерное расширение ускоряет сбор списка, но не заменяет DOM. Если отчёт расходится с тем, что видно на странице, проверьте скрытые элементы, мобильные версии блоков и контент, добавляемый JavaScript.

Краулер нужен для дублей и масштаба, но не оценивает качество формулировки

1. Просканируйте URL сайта краулером.
2. Выгрузите страницы без H1, с несколькими H1, пустыми тегами и повторяющимися формулировками.
3. Сгруппируйте ошибки по типам страниц и шаблонам.
4. Проверьте несколько URL из каждой группы вручную.
5. Определите, исправляется проблема в контенте или на уровне шаблона.

Screaming Frog и другие краулеры подходят для массового поиска, но названия фильтров и состав отчётов могут меняться между версиями. Принцип остаётся тем же: инструмент показывает наличие и повторяемость элементов, а решение принимают после просмотра страниц.

Дубликат H1 в отчёте может быть следствием дубля URL, общего шаблона или допустимого совпадения на технических страницах. Без проверки контекста массовая замена создаст новые ошибки.

Исправления приоритизируют по смыслу, доступности и масштабу

1. Сначала исправьте H1, который не соответствует теме страницы или массово генерируется неверно.
2. Затем устраните нарушения, из-за которых теряется связь между разделами или ломается навигация.
3. После этого разберите пустые, дублированные и неинформативные заголовки.
4. В последнюю очередь оцените формальные предупреждения, которые не влияют на понимание документа.
5. Повторно проверьте шаблонные страницы после внедрения правок.

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

Разработчик нужен, если ошибка связана с шаблоном, динамическими компонентами или различием DOM между устройствами. Редактор нужен, если теги стоят на своих местах, но формулировки не передают структуру материала.