Иерархия заголовков H1–H6 в Elementor: как правильно структурировать страницу

Что означает иерархия H1–H6

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

Такая структура похожа на оглавление документа. Если страница рассказывает о создании сайта, её H1 может быть «Как создать сайт на WordPress», H2 — «Выбор домена», «Установка WordPress» и «Настройка дизайна», а H3 — отдельные шаги внутри этих разделов.

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

• H1 — основная тема или название материала.
• H2 — крупные логические разделы страницы.
• H3 — подразделы, относящиеся к конкретному H2.
• H4–H6 — дополнительные уровни для сложной многоуровневой структуры.

Как настроить уровень заголовка в Elementor

В Elementor уровень заголовка задаётся не размером шрифта, а через параметр HTML Tag в виджете Heading. Откройте нужный виджет заголовка, перейдите к его настройкам содержимого и выберите подходящий тег: H1, H2, H3 или другой доступный вариант.

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

Например, заголовок карточки услуги может иметь уровень H3 согласно структуре страницы и размер 20 px, тогда как заголовок секции H2 в определённой версии дизайна может иметь размер 18 px. Это не ошибка: HTML-структура и визуальная иерархия могут различаться.

• Если элемент является настоящим заголовком, выбирайте виджет Heading, а не обычный текстовый блок.
• Назначьте нужный уровень с помощью параметра HTML Tag.
• Настройте размер и внешний вид в разделе Typography.
• Если дизайн адаптивный, отдельно проверьте значения для планшетов и мобильных устройств.

Оптимальная структура заголовков на странице

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

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

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

• На странице обычно должен быть один основной H1.
• Каждый H2 должен обозначать отдельную крупную тему.
• Используйте H3 только как подчинённый уровень конкретного H2.
• Не создавайте заголовок, если после него нет соответствующего содержательного блока.

Пример структуры страницы услуги

H1: Разработка сайтов на WordPress. H2: Что входит в услугу. H3: Проектирование структуры. H3: Дизайн страниц. H3: Техническая настройка. H2: Этапы работы. H3: Анализ задачи. H3: Разработка и тестирование. H2: Часто задаваемые вопросы.

В этом примере каждый H3 относится к ближайшему H2, а все разделы вместе раскрывают тему страницы, заданную заголовком H1.

H1 в Elementor и типичные особенности WordPress

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

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

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

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

Распространённые ошибки в иерархии заголовков

Самая частая ошибка — выбор H4, H5 или H6 только потому, что у этого тега меньше стандартный размер. В Elementor это не требуется: нужного внешнего вида можно добиться с помощью Typography, не меняя логику документа.

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

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

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

• Не используйте H4–H6 как способ уменьшить текст.
• Не добавляйте H1 к каждой карточке или блоку.
• Не заменяйте заголовками обычные абзацы и декоративные надписи.
• Не оценивайте структуру только по размеру шрифта на экране.
• Не назначайте один и тот же HTML Tag всем виджетам без проверки их роли.

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

Проверку следует выполнять не только в редакторе Elementor, но и на опубликованной или предварительно просмотренной странице. Убедитесь, что видимые заголовки действительно соответствуют назначенным HTML-тегам, а заголовок не был добавлен автоматически темой или плагином.

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

Для дополнительной проверки можно использовать инструменты аудита доступности или расширения браузера, которые показывают список заголовков страницы. Такие инструменты помогают найти отсутствующий H1, дубликаты, неправильные уровни и скрытые заголовки.

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

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

Почему правильные заголовки важны для SEO и доступности

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

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

Правильная иерархия также упрощает поддержку сайта. Другой редактор быстрее поймёт структуру страницы, а изменение дизайна не потребует замены HTML-тегов только из-за новых размеров шрифта.

• Семантические заголовки улучшают навигацию для пользователей скринридеров.
• Структурированный контент легче анализировать и редактировать.
• Уровень заголовка должен соответствовать его смысловой роли, а не стилю.
• SEO зависит от всего контента и технического состояния сайта, а не только от H1–H6.