Привет, я Максим, веб-разработчик. Казалось бы — заголовки на странице, что тут сложного? Но за последний год я провёл больше сорока аудитов сайтов, и ошибки в иерархии заголовков были практически на каждом. Причём ошибки не просто «некрасивые» — они реально мешают ранжированию и ухудшают пользовательский опыт. Разбираю подробно: как поисковики воспринимают заголовки, какой должна быть правильная иерархия, и какие ошибки я встречаю чаще всего.

Зачем поисковику нужны заголовки

Заголовки H1–H6 — это не просто крупный текст на странице. Это семантическая разметка, которая говорит поисковому роботу: «Вот главная тема страницы (H1), вот основные подтемы (H2), вот детали каждой подтемы (H3)». По сути, заголовки — это оглавление вашей страницы, по которому робот ориентируется в структуре контента.

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

Но дело не только в роботах. Правильная иерархия заголовков критически важна для доступности сайта. Люди, использующие скринридеры (программы чтения экрана), навигируют по странице именно по заголовкам — перескакивая от одного к другому. Если иерархия нарушена — для них страница превращается в хаотичный набор текста. В контексте ГОСТ Р 52872 о доступности веб-контента это особенно актуально.

Кроме того, правильная структура заголовков помогает обычным пользователям быстро сканировать страницу и находить нужный раздел. Исследования показывают, что около 80% пользователей сначала сканируют страницу по заголовкам и только потом читают текст. Если заголовки информативны и выстроены логично — человек быстро находит то, что искал.

Главное правило: один H1 на страницу

Технически стандарт HTML5 позволяет использовать несколько тегов H1 в разных секциях (article, section). Но для SEO я однозначно рекомендую придерживаться классического подхода: один H1 на страницу, и он должен отражать основную тему — главный поисковый запрос, под который оптимизирована эта страница.

H1 — это не дубль тега title. Они могут быть похожи по смыслу, но выполняют разные функции. Title оптимизирован под поисковую выдачу: учитывает длину сниппета, содержит коммерческие добавки (город, цена), может включать название бренда. H1 — оптимизирован под восприятие человеком на странице: короче, понятнее, без SEO-«хвостов».

Пример: title — «Ремонт квартир в Москве под ключ — цены от 5000 ₽/м² | КомпанияX». H1 — «Ремонт квартир под ключ в Москве». Title длиннее и содержит цену и бренд — это работает на кликабельность в выдаче. H1 — лаконичный заголовок, который человек видит на странице.

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

Логическая вложенность: строгая иерархия без пропусков

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

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

Для страницы ремонтной компании правильная структура выглядит примерно так: H1 «Ремонт квартир в Москве», далее H2 «Виды ремонта» с вложенными H3 «Косметический ремонт» и «Капитальный ремонт», затем H2 «Наши цены» с H3 «Цены на ремонт однокомнатных квартир» и «Цены на ремонт двухкомнатных квартир», затем H2 «Этапы работы». Каждый уровень логически вложен в предыдущий.

Ошибки, которые я нахожу на каждом втором аудите

H1 в логотипе — самая распространённая ошибка. Верстальщик оборачивает логотип в шапке сайта в тег H1, потому что «это главный элемент». В результате на каждой странице сайта H1 — это название компании, а не тема страницы. На странице «Ремонт кухонь» H1 — «КомпанияX», а не «Ремонт кухонь». Поисковик получает неправильный сигнал о теме страницы. Логотип должен быть обычной ссылкой внутри тега a, без заголовочных тегов.

Заголовки ради визуальной стилизации. Дизайнеру нужен крупный текст — он ставит H2. Нужен текст поменьше — H4. Семантика разрушена. Для визуальной стилизации существуют CSS-классы: .title-large, .title-medium. Заголовочные теги — строго для семантической структуры контента. Я часто объясняю это дизайнерам и верстальщикам: H2 — это не «большой текст», это «подраздел основной темы».

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

Пустые или бессмысленные заголовки. «Подробнее», «Информация», «Блок 1», «Текст» — это не заголовки, это ничего не говорящие слова. В заголовке должна быть суть раздела. Вместо «Подробнее» — «Условия доставки и возврата». Вместо «Информация» — «Характеристики ноутбука ASUS VivoBook». Каждый заголовок должен быть информативным сам по себе.

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

Скрытые заголовки. Заголовки, которые присутствуют в HTML, но скрыты через CSS (display: none, visibility: hidden) — это потенциальная проблема. Поисковик может воспринять это как попытку манипуляции. Если заголовок не нужен визуально — лучше удалить его из разметки, а не скрывать.

Как проверить иерархию заголовков на своём сайте

Самый быстрый способ — расширение HeadingsMap для Chrome. Устанавливаете, открываете страницу, кликаете на иконку — и видите все заголовки в виде дерева. Сразу заметно, где нарушена вложенность, где пропущены уровни, где H1 дублируется.

Для массового аудита всех страниц сайта использую Screaming Frog SEO Spider — он сканирует весь сайт и показывает H1 и H2 для каждой страницы в одной таблице. Удобно экспортировать в Excel и проверить: у всех ли страниц есть H1, нет ли дублей, соответствуют ли H1 тематике страниц.

Яндекс Вебмастер также сигнализирует о проблемах с заголовками в разделе «Диагностика» — если робот обнаруживает несколько H1 или пустые заголовки, вы увидите предупреждение.

Практический совет, который экономит часы

Прежде чем писать текст для страницы, составьте план в виде иерархии заголовков. Это занимает пять минут, но экономит часы на последующую переделку. Откройте текстовый редактор и набросайте скелет: H1, затем три-пять H2, в каждом — два-три H3. Этот скелет станет основой для копирайтера (ему проще писать по структуре), для SEO-специалиста (он видит, что ключевые запросы распределены правильно), и для поисковика (он получает чёткую логику страницы).

Заголовки — это фундамент SEO-оптимизации страницы. Пять минут на планирование структуры — и страница ранжируется лучше, читается удобнее, и аудит не выявит критичных ошибок.