Иерархия заголовков H1–H6 и семантическая HTML5-вёрстка

Заголовки H1–H6 — это не про размер шрифта и не про красоту вёрстки. Это скелет документа, по которому поисковый робот, программа экранного доступа и сам пользователь понимают, как устроена страница, что на ней главное и как связаны блоки. Когда дизайнер ставит H3 «потому что так красивее», а разработчик заворачивает весь контент в безликие div, страница теряет смысловую структуру — и поисковики, и незрячие пользователи перестают её понимать. В этой статье разберём правило одного H1, правильную вложенность H2–H6 и document outline, семантические теги HTML5 (header, nav, main, article, section, aside, footer), влияние всего этого на SEO и доступность, типичные ошибки вёрстки и дадим практический чеклист.

Зачем поисковикам и людям иерархия заголовков

Заголовки выполняют три задачи одновременно. Для поискового робота они задают тематическую структуру: H1 объявляет главную тему страницы, H2 — основные разделы, H3–H6 — подразделы. Робот строит из этой иерархии карту смыслов и лучше понимает, о чём страница и какие запросы ей релевантны. Для пользователя заголовки — это навигация по тексту: глаз сканирует страницу по заголовкам, выхватывая нужный раздел, не читая всё подряд. Для незрячего пользователя со скринридером заголовки — единственный способ быстро перемещаться по странице: программа зачитывает список заголовков и позволяет прыгать между разделами.

Ключевой принцип: заголовок должен выбираться по смысловому уровню вложенности, а не по желаемому размеру шрифта. Если нужен заголовок поменьше, его делают CSS-стилями, а не понижением уровня с H2 на H4. Когда разработчик ставит уровень ради внешнего вида, он ломает логическую структуру, и страница превращается в набор разрозненных кусков без иерархии. Эта дисциплина — фундамент качественного SEO-текста для людей и поисковиков.

Важно понимать: современные поисковики не дают за идеальную иерархию прямого бонуса в ранжировании по жёсткой формуле. Но правильная структура опосредованно усиливает почти все факторы — улучшает понимание контента роботом, повышает шансы попасть в featured snippets, улучшает поведенческие метрики за счёт удобства чтения. А нарушение структуры наоборот мешает роботу разобрать страницу и ухудшает доступность, за которую поисковики уже начисляют сигналы качества.

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

Правило одного H1

На странице должен быть один H1 — главный заголовок, объявляющий её основную тему. Это самое известное и самое нарушаемое правило вёрстки. H1 отвечает на вопрос «о чём вообще эта страница», и логически такой ответ может быть только один. Несколько H1 размывают главную тему: робот не понимает, что важнее, а структура теряет вершину. Хотя спецификация HTML5 формально допускает несколько H1 в разных секциях, на практике браузеры и скринридеры так и не реализовали обещанный алгоритм пересчёта уровней, поэтому правило одного H1 остаётся золотым стандартом.

H1 должен содержать главный ключевой запрос страницы в естественной формулировке и совпадать по смыслу с title, но не дублировать его дословно. Title — это заголовок для выдачи и вкладки браузера, H1 — заголовок внутри страницы; они решают разные задачи и могут отличаться формулировкой. Частая ошибка — либо вообще отсутствие H1 (особенно на сборных лендингах и в конструкторах сайтов), либо его дублирование, когда шаблон выводит H1 для логотипа в шапке и ещё один H1 для заголовка статьи. О связке заголовков и сниппета подробно — в гайде про оптимизацию title и description и типичные ошибки.

Распространённый антипаттерн — оборачивать в H1 логотип сайта в шапке. Логотип — это не главный заголовок контента страницы, его место — обычная ссылка с alt или aria-label. H1 должен быть смысловым заголовком конкретной страницы: для статьи это её название, для карточки товара — название товара, для категории — название раздела. Это особенно важно при оптимизации карточек товаров, где H1 должен нести точное наименование с ключевыми характеристиками.

Правильная вложенность H2–H6 и document outline

После единственного H1 идёт иерархия H2–H6, и главное правило здесь — не пропускать уровни вниз. Нельзя после H2 сразу ставить H4: между ними обязан стоять H3. Пропуск уровня создаёт «дыру» в структуре — скринридер сообщит пользователю, что раздел пропущен, а робот получит разорванную иерархию. Вверх перепрыгивать можно: после H4 спокойно идёт следующий H2, открывающий новый крупный раздел. Запрещён именно спуск через уровень.

Document outline — это дерево, которое строится из заголовков и отражает логическую структуру страницы. Правильный outline выглядит как оглавление книги: H1 — название, H2 — главы, H3 — параграфы внутри глав, H4 — пункты внутри параграфов. Если выписать все заголовки страницы по порядку с отступами по уровням, должно получиться осмысленное, логичное оглавление. Если получается каша с провалами и скачками уровней — структура сломана. Это простейший тест, который мы делаем на каждом аудите вёрстки.

Уровень	Роль	Сколько на странице	Пример
H1	Главная тема страницы	Ровно один	Иерархия заголовков H1-H6
H2	Основные разделы	Несколько	Правило одного H1
H3	Подразделы внутри H2	По необходимости	Логотип не должен быть H1
H4-H6	Глубокая детализация	Редко, по нужде	Частный случай или нюанс

На практике глубина H4–H6 нужна редко: большинству страниц хватает H1, H2 и H3. Если вам понадобились H5 и H6, это часто сигнал, что страница перегружена и её стоит разбить на несколько или упростить структуру. Чрезмерная вложенность так же вредна для понимания, как и её отсутствие. Логичная неглубокая иерархия удобнее и для робота, и для человека, и хорошо сочетается с правильной структурой сайта и архитектурой для SEO.

Семантические теги HTML5: header, nav, main, article, section, aside, footer

Заголовки задают иерархию контента, а семантические теги HTML5 задают структуру всей страницы — что является шапкой, что навигацией, что основным содержимым, а что боковой колонкой. До HTML5 всё это верстали безликими div с классами, и машина не понимала, где что. Семантические теги дают этим зонам явный смысл, понятный роботам и вспомогательным технологиям без догадок по названиям классов.

• header — вводная часть страницы или секции: шапка с логотипом, заголовком, поиском. На странице может быть несколько header внутри разных article.
• nav — блок основной навигации: главное меню, хлебные крошки. Не каждый набор ссылок — nav, а только значимая навигация.
• main — основное уникальное содержимое страницы. Ровно один на страницу, не включает повторяющиеся шапку, меню и подвал.
• article — самостоятельный, самодостаточный блок контента: статья, карточка товара, комментарий. Имеет смысл в отрыве от страницы.
• section — тематический раздел контента, обычно со своим заголовком. Группирует связанный по смыслу материал.
• aside — побочное содержимое: сайдбар, блок «читайте также», реклама. Косвенно связано с основным контентом.
• footer — заключительная часть страницы или секции: контакты, копирайт, ссылки. Как и header, может быть несколько.

Каркас типичной страницы выглядит так: header с nav вверху, затем main, внутри которого article с собственными header, section и footer, рядом aside с дополнительными блоками, и общий footer внизу. Такая разметка даёт роботу чёткую карту: вот навигация, вот основной контент, вот второстепенное. Это помогает поисковику отделять главное от обвязки и не разбавлять тематику страницы повторяющимися меню и подвалами.

Семантическая разметка тесно связана с микроразметкой данных. Семантические теги структурируют страницу для понимания зон, а Schema.org через JSON-LD добавляет машиночитаемые данные о сущностях. Вместе они дают максимальный эффект — об этом в материале про микроразметку Schema.org и как выделиться в выдаче.

Влияние на доступность (a11y)

Для незрячих пользователей и людей с нарушениями зрения правильная структура заголовков и семантика — не удобство, а единственный способ пользоваться сайтом. Скринридеры строят навигацию по странице на основе заголовков: пользователь вызывает список всех заголовков и прыгает между разделами, не слушая весь текст подряд. Если заголовки расставлены логично, навигация быстрая и понятная. Если структура сломана или заголовки сверстаны жирным текстом в div вместо тегов H — скринридер их просто не увидит, и человек теряет карту страницы.

Семантические зоны (landmarks) работают аналогично: скринридер позволяет мгновенно перейти к навигации (nav), к основному контенту (main), к подвалу (footer). Это ускоряет работу в разы по сравнению с прослушиванием всей страницы. Поэтому main должен быть один и охватывать именно основной контент, nav — обрамлять реальную навигацию, а не каждый список ссылок. Доступность и SEO идут рука об руку: и поисковый робот, и скринридер — это программы, читающие разметку, и обе выигрывают от чистой семантики. Глубже эта связь раскрыта в статье про доступность (a11y) и SEO.

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

Типичные ошибки вёрстки

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

• Несколько H1 на странице. Логотип в H1, заголовок статьи в H1, баннер в H1 — главная тема размывается.
• Отсутствие H1. Особенно на лендингах из конструкторов, где заголовок свёрстан крупным div.
• Выбор уровня по размеру шрифта. H4 поставлен вместо H2, потому что «так меньше и красивее».
• Пропуск уровней. После H2 сразу H4 — дыра в иерархии, скринридер сообщает о пропуске.
• Заголовки в div. Визуально жирный текст вместо тега H — робот и скринридер его не распознают как заголовок.
• Декоративный текст в заголовке. Тег H использован для оформления цитаты или слогана, не несущего структурной роли.
• Несколько main. Должен быть ровно один блок основного контента.
• nav на любом списке ссылок. Тег nav обесценивается, когда им оборачивают каждый перечень.
• Пустые заголовки. Тег H без текста или с одной иконкой — ломает outline.

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

Как проверить структуру: чеклист и инструменты

Проверить иерархию заголовков и семантику можно быстро и без специальных навыков. Используйте этот чеклист при вёрстке новых страниц и при аудите существующих.

1. Проверьте число H1. Через расширение для просмотра структуры заголовков или поиском по коду — должен быть ровно один.
2. Постройте outline. Выпишите все заголовки по порядку с отступами по уровням — должно получиться логичное оглавление без провалов.
3. Проверьте отсутствие пропусков уровней. Нигде после H2 не должен сразу идти H4.
4. Убедитесь, что заголовки — это теги H. Никаких жирных div, играющих роль заголовков.
5. Проверьте семантические зоны. Один main, header и footer на месте, nav на реальной навигации, article для самостоятельных блоков.
6. Прогоните страницу скринридером или валидатором доступности. Убедитесь, что навигация по заголовкам и landmarks работает.
7. Сверьте H1 с title и ключевым запросом. H1 несёт главную тему, перекликается с title, но не дублирует его буквально.

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

Выводы

Иерархия заголовков H1–H6 и семантическая HTML5-вёрстка — это базовая гигиена, которая стоит почти ничего, но влияет на всё: понимание страницы роботом, доступность для незрячих, удобство чтения и поведенческие факторы. Правила просты и не меняются годами: один H1 с главной темой, последовательная вложенность H2–H6 без пропусков уровней, выбор уровня по смыслу, а не по размеру шрифта, и семантические теги вместо безликих div для разметки зон страницы. Соблюдение этих правил не требует бюджета — только дисциплины верстальщика и регламента для контент-менеджеров.

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

Услуги LSI Продвижение

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

• Бесплатный SEO аудит сайта — автоматическая проверка на 50+ параметров за 2 минуты
• Комплексный SEO аудит — глубокий ручной анализ с рекомендациями от эксперта
• Продвижение сайтов — вывод в ТОП Яндекса и Google по целевым запросам
• SEO консультация — разбор вашего сайта с конкретными рекомендациями
• LSI тексты — экспертный контент, оптимизированный для поисковых систем
• Доработка сайта — техническая оптимизация и исправление ошибок
• Создание сайта под ключ — разработка с нуля с SEO-оптимизацией
• Стоимость продвижения — прозрачные тарифы и условия
• Портфолио и кейсы — реальные результаты наших клиентов