H1, H2, H3 и дальше: иерархия заголовков, которая решает SEO и доступность

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

Заголовки — это не про размер шрифта

Самое частое заблуждение про H1–H6 — что это просто «крупный жирный текст». На самом деле эти теги говорят поисковикам и скринридерам, какая у документа структура: где главная тема, где разделы, где подразделы. Размер шрифта здесь ни при чём — его задаёт CSS, и <h2> можно стилизовать как мелкую подпись, а обычный <p> — как огромный hero-заголовок. В браузере оба будут выглядеть как угодно, но для индекса и для скринридеров это разные сигналы.

Большинство SEO-проблем с заголовками сводится к путанице этих двух ролей: H1 ставят на логотип в шапке (значит, на всех страницах сайта он одинаковый), пишут несколько H1 ради визуального ритма лендинга, пропускают уровни иерархии (H2 → H4). В браузере всё выглядит нормально — и именно из-за этого ошибки долго остаются незамеченными, пока не начинает падать органический трафик. Найти такие проблемы помогает регулярный SEO-аудит структуры страницы.

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

Что такое H1–H6

H1–H6 — это шесть HTML-тегов для обозначения заголовков разных уровней важности. Они существуют с самой первой версии HTML, написанной Тимом Бернерсом-Ли в 1991 году. Шесть уровней он позаимствовал из академических документов, где обычно ровно столько подразделов: глава → параграф → раздел → подраздел → пункт → подпункт.

Ключевая мысль, которую теряют чаще всего: заголовки — это не размер шрифта. Это семантика: «это главное название документа», «это название раздела», «это название подраздела». Размер шрифта — внешнее проявление, его можно настроить через CSS как угодно. Семантика заголовка — то, что считывают поисковики и скринридеры.

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

Что внутри каждого уровня

Если на странице понадобились H5 и H6 — это сигнал, что структура слишком сложная и её стоит пересмотреть: разбить на несколько отдельных страниц или объединить мелкие подразделы.

Два главных правила иерархии

Правило 1. H1 на странице ровно один

На каждой странице должен быть один <h1>, и он должен быть первым заголовком на странице. Это главное название документа, аналог темы письма или обложки книги.

Что считается одной страницей с точки зрения H1:

• Главная страница сайта — один H1 (название сайта или ключевое предложение)
• Страница категории — один H1 (название категории)
• Карточка товара — один H1 (название товара)
• Статья блога — один H1 (заголовок статьи)

Логотип в шапке, который дублируется на каждой странице, — не должен быть H1. Если уж очень хочется обернуть его в семантический тег, используйте <div> или <p class="logo">. Один и тот же H1 на сотнях страниц приводит ровно к той ситуации, что описана в начале статьи.

Google в 2020 году публично сказал, что «несколько H1 на странице — не катастрофа, наш алгоритм это переживёт». Но это про крайний случай типа двух H1 в большом article-блоке. В реальности один H1 на странице — правильно и предсказуемо. Зачем рисковать?

Правило 2. Без прыжков через уровень

После H1 идёт H2. После H2 — H2 (другой раздел) или H3 (подраздел). Нельзя сразу после H2 поставить H4, перепрыгнув H3.

Правильно:

Неправильно — прыжок с H2 на H4:

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

Доступность: почему иерархия важна не только Google

У слепых и слабовидящих пользователей основной способ навигации по веб-странице — не скроллинг и не клик, а прыжки по заголовкам. Скринридер (NVDA на Windows, JAWS, VoiceOver на macOS) умеет читать структуру H1–H6 и переходить с заголовка на заголовок по кнопке.

Когда вы открываете страницу со скринридером, типичный сценарий такой:

• Нажать H — скринридер озвучивает первый заголовок (это должен быть H1, иначе пользователь сразу теряется)
• Нажать 2 — перейти к следующему H2 (быстро пробежаться по разделам, как по оглавлению)
• Нажать H — идти по всем заголовкам подряд

Если на странице нет H1 или их несколько — пользователь дезориентируется. Если иерархия сломана (H2 → H4 → H2) — навигация становится прыгающей и нелогичной.

Заголовки — это скелет страницы для тех, кто не видит её визуально. По нему ориентируются 2-3% всех пользователей и почти 100% поисковых ботов.

SEO: какой вес у каждого уровня

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

• Title в шапке HTML — самый сильный сигнал темы страницы (но это не H-тег, это <title> в head)
• H1 — чуть слабее title, но всё ещё очень сильный
• H2 — средний вес, помогает поисковику понять подтемы
• H3 — небольшой вес, в основном помогает Featured snippets (быстрые ответы Google) подцепить подразделы
• H4–H6 — почти не влияют на ранжирование

Дополнительные нюансы:

• Ключевые слова в заголовках работают. H1 со словом «купить стиральную машину» помогает странице по этому запросу. Но насильно пихать ключи в каждый H2/H3 — обратный эффект и риск переоптимизации.
• Длина H1. 50–70 символов — норма. Короткие H1 (5 слов) или очень длинные (15+ слов) воспринимаются хуже.
• Featured snippets Google часто берёт из H2-H3 в виде «быстрого ответа». Если у вас правильная иерархия с осмысленными подзаголовками — шансы попасть в featured растут.
• Яндекс даёт H1 более выраженный вес, чем Google. Для рунет-проектов это особенно критично.

HTML5 sectioning: <article>, <section> и заголовки

Когда в 2008 году вышел HTML5, в спецификации появилась идея «outline algorithm»: внутри каждого <article> или <section> можно начинать заголовки заново с H1, и браузер должен понять иерархию по вложенности тегов. То есть теоретически:

На практике outline algorithm так и не был реализован ни одним браузером и ни одним скринридером. Сегодня W3C официально отозвал это поведение из спецификации — HTML5 sectioning теперь не влияет на интерпретацию заголовков.

Что это значит для вас: пишите классическую плоскую иерархию H1→H2→H3, не полагайтесь на вложенность <article>/<section>. Сами теги <article>, <section>, <main> по-прежнему полезны для семантики и доступности, но они не меняют «уровень» заголовков внутри себя.

Восемь распространённых ошибок

1. H1 в логотипе на каждой странице

Тот самый кейс из начала статьи. Решается переносом H1 на заголовок конкретной страницы, а логотипа — в обычный <div>.

2. Несколько H1 на одной странице

Часто возникает в одностраничных лендингах SaaS, где каждая «секция» имеет большой визуальный заголовок и верстальщик ставит H1 для красоты. Правильно — один H1 в самом начале (главное обещание лендинга), остальные крупные заголовки — H2.

3. Пустой H1

Тег есть, текста внутри нет. Возникает после рефакторинга или ошибки CMS-шаблона. Поисковик считает страницу «безымянной». Проверяется автоматическим мониторингом.

4. Скрытый H1 (display: none)

Хитрая попытка засунуть в H1 много ключевых слов и спрятать от пользователя. Google и Яндекс детектируют такое и понижают сайт. Если контент должен быть скрыт от глаз, но доступен скринридерам — используйте position: absolute; left: -9999px или ARIA-атрибуты, но не для манипуляции SEO.

5. H2 для красивых подзаголовков рядом с H1

Часто на главной: H1 «Лучший CRM для бизнеса» и сразу под ним H2 «Который любят 10 000 компаний». Эта подпись — не подраздел, а часть hero-блока. Правильно: завернуть подпись в <p class="hero-subtitle">, а H2 ставить там, где начинается реальный раздел.

6. Прыжки через уровень

H1 → H3, минуя H2. Часто получается естественно из-за наследования CSS-классов: дизайнер хочет «средний по размеру шрифт», верстальщик берёт H3 (он визуально подходит), забывая про семантику. Лечится переходом на собственные CSS-классы для размеров, оставив H-теги для иерархии.

7. Заголовок-картинка без alt

Дизайнер сделал красивый заголовок в Photoshop, верстальщик вставил <h1><img src="title.png"></h1>. Если у картинки нет атрибута alt — для поисковика и скринридера H1 пустой. Минимум: <img src="title.png" alt="Текст заголовка">.

8. H1 в слайдере / каруселе

Главная страница с автопрокручиваемой каруселью, где каждый слайд имеет свой H1. При перелистывании H1 меняется. Скринридер сходит с ума, Google индексирует только первый. Правильно: один H1 на странице, а заголовки слайдов — обычные <div> или H2.

Как проверить иерархию заголовков

DevTools браузера

В Chrome: F12 → вкладка Elements → Ctrl+F и ищите «h1». Сразу видно сколько H1 на странице. Можно проверить любую страницу за 10 секунд.

Или Lighthouse в Chrome DevTools: F12 → Lighthouse → Accessibility audit — среди прочего ловит нарушения иерархии заголовков. Заголовки вместе с title и meta-тегами покажет и онлайн-проверка SEO страницы.

Расширения для Chrome

HeadingsMap — рисует дерево заголовков прямо в боковой панели, сразу видны и пропущенные уровни, и дубли. Бесплатное, для одной страницы.

SEOmeta in 1 click — показывает все H1–H6 списком с количеством и текстом.

Массовая проверка

Screaming Frog SEO Spider или Sitebulb — обходят весь сайт и собирают отчёт по заголовкам каждой страницы. В отчёте сразу видно: где H1 пустой, где их несколько, где иерархия сломана.

Для быстрой ручной проверки одного URL подойдёт и curl:

Покажет все заголовки страницы в порядке их появления в HTML.

Как мониторить заголовки автоматически

Разовая проверка хороша после деплоя. Но заголовки — та часть инфраструктуры, которая регулярно ломается тихо: при обновлении шаблона CMS, замене плагина, A/B-тесте или редизайне.

В Пруфене — сервисе мониторинга сайтов — проверка Наличие контента через CSS-селекторы помогает поймать самые типичные регрессии:

• H1 существует и не пустой. Селектор h1, условие содержит пробел — ловит ситуацию «H1 пропал после деплоя».
• H1 содержит ключевое слово. Для критичных SEO-страниц — проверка, что в H1 присутствует целевой ключевик (например, «стиральные машины» на странице категории).
• На странице есть хотя бы N штук H2. Если на странице каталога обычно 6–8 разделов, а после деплоя осталось 0 — что-то поломалось.
• H1 не содержит «404» или «Error». Защита от случая, когда вместо нормального заголовка выводится ошибка.

Эти проверки имеет смысл настроить на ключевые SEO-страницы — главную, основные категории каталога, флагманские лендинги. Не для каждой страницы — для тех, потеря трафика с которых ощутима.

Чек-лист для каждой страницы

• ☑ На странице ровно один <h1>
• ☑ H1 — первый заголовок в порядке появления в HTML
• ☑ H1 не пустой и не картинка без alt
• ☑ H1 не дублируется на разных страницах сайта (логотип не должен быть H1)
• ☑ H1 содержит ключевое слово страницы — естественно, без spam
• ☑ Длина H1: 50–70 символов
• ☑ H2 идут после H1, H3 — после H2, прыжков через уровень нет
• ☑ H4–H6 используются только если действительно нужна глубокая иерархия
• ☑ Заголовки не сделаны через CSS-классы вроде <div class="big-text"> — это потеря SEO-веса
• ☑ Заголовки видны пользователю (не скрыты через display: none)
• ☑ Настроен мониторинг H1 на ключевых страницах

Итого

Заголовки H1–H6 — это не «большой шрифт», а семантический скелет страницы. По нему ориентируются поисковики, скринридеры и featured snippets Google.

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

Если на сайте сотни страниц, проверять иерархию руками неэффективно. Один деплой может тихо сломать H1 на 30% страниц, и заметить это вы сможете только через два-три месяца — по падению трафика. Автоматический мониторинг H1 и ключевых H2 на критичных страницах ловит это в течение суток.