Заголовки H1–H6: как выстроить структуру страницы

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

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

Что означают заголовки H1–H6

В HTML элементы h1, h2, h3, h4, h5 и h6 обозначают заголовки шести уровней. Число показывает уровень в структуре: H2 обычно вводит раздел, а H3 — вложенный в него подраздел. Уровни H4–H6 полезны при действительно глубокой структуре, но использовать все шесть на каждой странице не требуется.

Заголовок должен обозначать содержание следующего раздела. Это помогает быстро просмотреть страницу и понять, где искать ответ. Пользователи программ экранного доступа могут получать список заголовков и переходить между ними; ясные формулировки и последовательные уровни делают такую навигацию понятнее.

Как выстроить иерархию H1, H2 и H3

Представьте статью как план: заголовок страницы, основные разделы, затем подразделы каждого раздела. Например:

<h1>Как выбрать велосипедный шлем</h1>
<h2>Как подобрать размер</h2>
<h3>Измерьте окружность головы</h3>
<h3>Проверьте посадку</h3>
<h2>На что смотреть при покупке</h2>
<h3>Вентиляция и вес</h3>
<h3>Крепления и регулировка</h3>

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

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

Нужен ли только один H1

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

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

Чем H1 отличается от title и description

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

Meta description — отдельное описание страницы в метаданных. Поисковая система может использовать его для сниппета или выбрать другой фрагмент страницы. Подробнее о работе с описанием — в статье о meta description. Не помещайте H1 в поле description и не заменяйте заголовок страницы только большим текстом в дизайне.

Заголовки и SEO: что они действительно делают

Содержательные заголовки помогают читателю и поисковым системам понять организацию материала. Используйте привычные аудитории слова, если они точно описывают раздел, но не повторяйте один поисковый запрос в каждом H2 ради плотности. Хорошая структура поддерживает ответ на запрос; позиция в выдаче зависит от множества факторов и не гарантируется разметкой заголовков.

Сначала определите поисковое намерение: нужен обзор, инструкция или сравнение. Затем выделите вопросы, на которые страница действительно отвечает. Об этом подробнее — в материале о поисковом интенте. Учитывайте, что Google может формировать заголовок результата из разных источников; рекомендации описаны в справке Google о ссылках-заголовках.

Примеры для разных типов страниц

Статья или руководство

H1 называет тему и обещаемый результат: «Как выбрать велосипедный шлем». H2 выделяют этапы или вопросы: «Как измерить размер», «Как проверить посадку». H3 добавляют подробности там, где у раздела есть несколько самостоятельных частей. Если текст после подзаголовка состоит из одного короткого предложения, проверьте, нужен ли отдельный раздел.

Страница услуги

H1 может называть конкретную услугу, H2 — объяснять состав работ, порядок обращения и ответы на частые вопросы. Например: «Ремонт велосипедов», затем «Что входит в диагностику» и «Как записаться». Указывайте географию и условия только тогда, когда они действительно соответствуют услуге.

Категория и карточка товара

У категории основной заголовок обозначает группу товаров; самостоятельные текстовые разделы могут объяснять критерии выбора и уход. У карточки H1 обычно называет конкретный товар, а H2 могут вводить характеристики и описание. Не превращайте каждый элемент фильтра, цену или декоративный значок в заголовок только из-за стиля шаблона.

Главная страница

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

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

• Будьте конкретны. «Как проверить размер» полезнее универсального «Особенности», если раздел отвечает именно на этот вопрос.
• Соблюдайте соответствие. Не обещайте инструкцию, сравнение или цифры, которых нет в следующем тексте.
• Избегайте повторов. Два соседних раздела с одинаковыми названиями трудно отличить в списке заголовков.
• Не перегружайте ключами. Название должно звучать естественно и помогать ориентироваться.
• Учитывайте контекст. В списке заголовков «Сроки доставки» обычно понятнее, чем «Сроки».

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

Частые ошибки в разметке

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

Выбор H4 только потому, что он выглядит меньше H2, нарушает логику документа. Разделите семантику и оформление: подходящий уровень задаёт HTML, а размер, отступы и цвет — CSS. Проверьте оформление на мобильных устройствах и при увеличении масштаба.

Вместо заголовка используют жирный абзац

Визуально крупный p с жирным шрифтом может выглядеть как название раздела, но не будет обычным HTML-заголовком для навигации по странице. Если текст действительно вводит раздел, используйте подходящий элемент H1–H6. Напротив, не нужно размечать заголовком каждый выделенный фрагмент или подпись.

Пропускают уровни без причины

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

Дублируют технические блоки

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

Как проверить заголовки перед публикацией

1. Откройте готовую страницу и убедитесь, что основной заголовок видим, понятен и соответствует содержимому.
2. Посмотрите HTML через инструменты разработчика браузера и найдите элементы H1–H6. Учитывайте итоговую разметку после работы шаблона и клиентских скриптов.
3. Выпишите заголовки по порядку вместе с уровнями. Проверьте, не сбиваются ли разделы из-за виджетов, меню или шаблонных блоков.
4. Проверьте названия без окружающего текста: они должны различаться и объяснять назначение раздела.
5. Проверьте страницу на мобильном экране, при увеличении масштаба и, по возможности, с программой экранного доступа.
6. Исправьте шаблон в тестовой среде и повторите проверку на нескольких типах страниц: статье, услуге и категории.

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

Чек-лист для редактора и разработчика

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

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