Заголовки H1–H6 на сайте: как выстроить правильную иерархию

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

Простейшая схема выглядит так:

H1 — основная тема

    H2 — крупный смысловой блок

        H3 — подраздел

            H4 — уточнение

                H5 — дополнительный уровень

                    H6 — наиболее глубокий уровень

Цифра показывает не визуальный размер текста, а его место в общей логике.

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

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

• Title находится в служебной части HTML-документа. Он может использоваться поисковой системой при формировании заголовка результата выдачи и отображается во вкладке браузера.
• H1 пользователь видит непосредственно в содержании. Его задача — быстро объяснить, куда человек попал и о чём будет материал.

Например:

Title:
SEO-аудит сайта в Казани — стоимость комплексной проверки

H1:
SEO-аудит сайта

Формулировки связаны по смыслу, но дословное совпадение не требуется.

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

Для коммерческого раздела это обычно название услуги, категории или направления:

• «Разработка интернет-магазинов»;
• «SEO-аудит сайта»;
• «Корпоративные сайты»;
• «Продвижение интернет-магазина».

Для информационного материала формулировка может быть длиннее:

• «Почему сайт медленно загружается и как это исправить»;

• «Как выбрать систему управления сайтом»;

• «Как проверить индексацию страниц».

Сколько H1 должно быть на странице

Для большинства типовых коммерческих и информационных документов удобнее использовать один основной H1.

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

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

Поэтому схема «один материал — один основной H1» остаётся наиболее практичной.

Если представить статью как книгу, H1 будет названием, а H2 — названиями глав.

На странице услуги это могут быть блоки:

• «Что входит в работу»;

• «Этапы»;

• «Стоимость»;

• «Примеры проектов»;

• «Частые вопросы».

В информационном материале:

• «Причины проблемы»;

• «Как выполнить проверку»;

• «Способы исправления»;

• «Типичные ошибки».

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

Обратная ситуация — несколько экранов текста под одним названием. Если внутри явно раскрываются разные вопросы, материал лучше дополнительно разделить.

Например:

H2: Как проверить техническое состояние сайта

Внутри можно разместить:

• H3: Проверка индексации

• H3: Анализ кодов ответа

• H3: Поиск дублей

• H3: Проверка скорости

Все четыре темы относятся к одному крупному блоку. Поэтому такая иерархия лучше отражает смысл, чем четыре независимых H2.

Именно поэтому заголовки H1 H2 H3 стоит назначать не по размеру шрифта, а по взаимосвязи частей текста.

Например:

• H2: Техническая оптимизация

• H3: Индексация

• H4: Robots.txt

• H4: Sitemap.xml

• H4: Canonical

В таком примере четвёртый уровень действительно показывает подраздел внутри более широкой темы.

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

Использовать все возможные уровни ради полноты не требуется.

Сначала располагается главная тема, затем крупные блоки, а внутри них — уточнения.

Понятная схема:

H1

    H2

        H3

        H3

    H2

        H3

Если сразу после H1 появляется H4, стоит проверить, почему пропущены промежуточные уровни.

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

Поэтому структура H1–H6 должна отражать отношения между разделами, а не особенности дизайна шаблона.

В макете есть текст размером 36, 28 и 20 пикселей. Разработчик автоматически присваивает им H1, H2 и H3.

Такой подход неверен.

Внешний вид регулируется стилями. Семантический уровень показывает роль элемента в содержании.

Например, название небольшой карточки может быть визуально крупным, но это не означает, что ему нужен H2.

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

Это особенно важно для карточек преимуществ, элементов тарифов, блоков с цифрами и подписей в интерфейсе.

Если весь материал посвящён продвижению сайта, нет необходимости повторять полное название услуги в каждом H2.

Неудачный вариант:

H1: SEO-продвижение сайта
H2: Стоимость SEO-продвижения сайта
H2: Этапы SEO-продвижения сайта
H2: Преимущества SEO-продвижения сайта
H2: Заказать SEO-продвижение сайта

Более естественно:

H1: SEO-продвижение сайта
H2: Что входит в работу
H2: Этапы продвижения
H2: От чего зависит стоимость
H2: Как оценивается результат

Главная тема остаётся понятной, но текст не выглядит искусственно.

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

Например:

• H1: Разработка интернет-магазинов

• H2: Для каких задач подходит решение

• H2: Что входит в разработку

• H3: Проектирование

• H3: Дизайн

• H3: Программирование и интеграции

• H2: Этапы работы

• H2: От чего зависит стоимость

• H2: Примеры проектов

• H2: Частые вопросы

Здесь каждый уровень выполняет отдельную функцию. Дополнительный H2 появляется не из-за наличия ещё одной ключевой фразы, а потому, что начинается новая смысловая часть.

Пример:

• H1: Почему сайт медленно загружается и как это исправить

• H2: Как понять, что загрузка действительно медленная

• H2: Основные причины

• H3: Тяжёлые изображения

• H3: Лишний код

• H3: Медленный сервер

• H2: Как провести проверку

• H2: Что исправлять в первую очередь

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

Для большой статьи это особенно полезно, поскольку читатель часто приходит не за общей теорией, а за ответом на конкретный вопрос.

Например:

• «15 лет опыта»;

• «Работаем по договору»;

• «Поддержка после запуска».

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

То же относится к кнопкам, цифрам, подписям к изображениям, элементам меню и небольшим информационным меткам.

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

При этом внешний вид блока не определяет его место в HTML.Если весь раздел имеет название «Частые вопросы», ему логично назначить H2. Отдельные вопросы внутри могут использовать H3, если они действительно являются подразделами основного текста.

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

На практике критериев больше.

Основной элемент должен:

• однозначно описывать тему;

• соответствовать содержанию;

• быть заметным пользователю;

• не превращаться в перечень фраз;

• не дублировать соседние элементы без необходимости.

Если человек открывает материал и сразу понимает, о чём он, первая задача решена.

Оптимизация начинается уже после этого, а не наоборот.

Несколько основных H1 выводятся автоматически

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

Внешне страница выглядит нормально, поэтому проблема долго остаётся незаметной.

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

Редактору нравится внешний вид H3, поэтому он использует его вместо H2.

В итоге вложенность определяется дизайном, а не смыслом.

Пропускаются ступени

После H1 сразу появляется H4, хотя между ними нет промежуточных разделов.

Обычно причина находится в шаблоне или готовых стилях.

Один ключ повторяется почти в каждом блоке

Такой текст быстро начинает выглядеть механически собранным.

Материал вообще не разделён

Несколько тысяч символов идут одним полотном, и посетителю трудно найти нужную часть.

Служебные элементы размечаются H-тегами

В иерархию попадают названия кнопок, пункты меню, телефоны или технические подписи.

Цель исправления — не получить «идеальный» код ради отчёта, а сделать документ понятнее.

Сначала найдите основной видимый элемент и убедитесь, что он действительно описывает содержание.

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

Для большого проекта удобнее использовать краулер. Он помогает массово обнаружить:

• отсутствующие H1;

• несколько основных элементов;

• одинаковые формулировки;

• страницы с подозрительной разметкой.

Однако автоматический отчёт не показывает смысл. Поэтому найденные случаи всё равно приходится проверять вручную.

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

Их польза проявляется вместе с качеством всего материала.

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

Если сама страница не отвечает на запрос пользователя, перестановка H2 и H3 ситуацию не исправит.

То же относится к продвижению сайта в Яндексе и продвижению в Google: иерархия — лишь одна часть общей работы.

Типовая ситуация 1. Разметку определял дизайн

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

После H1 встречался H4, а названия небольших карточек были размечены как H2.

Сначала составили смысловую схему, затем пересобрали HTML. Внешний вид сохранили через CSS.

В результате дизайн практически не изменился, зато код стал отражать реальную логику содержимого.

Вывод: оформление и смысловая разметка должны настраиваться независимо.

Типовая ситуация 2. Ключ повторяется в каждом разделе

На странице услуги основной запрос использовался почти во всех H2.

Содержание выглядело однообразно и перегруженно.

Основную тему оставили в H1, а названия остальных частей заменили на естественные: «Что входит в работу», «Этапы», «Стоимость», «Сроки», «Результат».

Смысл сохранился, но читать материал стало легче.

Вывод: повтор одной конструкции не делает документ релевантнее автоматически.

Типовая ситуация 3. В статье слишком много H2

Большое руководство было разбито на десятки одинаковых по уровню частей.

Из-за этого было непонятно, какие вопросы относятся к одной крупной теме.

Материал перегруппировали: основные направления оставили на втором уровне, а уточнения перевели на третий.

Иерархия стала понятнее без сокращения содержания.

Вывод: важно не количество элементов, а связь между ними.

Главный уровень обозначает тему. Второй разбивает содержание на крупные части. Третий помогает показать вложенные вопросы. Более глубокая структура используется только там, где без неё действительно трудно организовать большой объём информации.

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