Заголовки (H1–H6) и иерархия

Что такое теги заголовков?

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

Эта иерархия — не просто структура, воспринимаемая человеческим глазом, но и древовидная структура, которую браузеры и вспомогательные технологии (такие как экранные считыватели) «понимают» программно. Пользователь экранного считывателя обычно перемещается по странице, переходя от заголовка к заголовку; поэтому, если иерархия нарушена, нарушается и навигация.

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

Почему это важно?

Правильная иерархия заголовков не только облегчает поисковым системам понимание тематической целостности страницы и её подразделов, но и обеспечивает возможность навигации по странице для пользователей, использующих экранные считывающие устройства. Google определяет, какой раздел на длинной странице охватывает какую подтему, исходя из структуры заголовков; это может помочь в выборе правильного фрагмента текста, особенно в расширенных результатах, таких как «выделенный фрагмент» (featured snippet).

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

В крайнем случае, в одностраничных приложениях (single page application) или в системах шаблонов с множеством компонентов различные компоненты могут независимо отображать свои собственные H1; это может привести к появлению на странице нескольких H1, о чем разработчики могут и не подозревать. В таких технических архитектурах важно управлять уровнями заголовков из одного централизованного места.

Как это исправить?

• На странице должен быть только один H1; как правило, это главный заголовок страницы, который должен чётко отражать её тему.
• Используйте заголовки по порядку: H1 → H2 → H3, не пропуская уровней.
• Используйте заголовки не для визуального оформления, а для определения структуры контента; если вам нужен крупный/жирный текст, используйте CSS, а не выбирайте неправильный уровень заголовка.
• Каждый H2/H3 должен быть заголовком реального раздела, а не декоративным текстом или слоганом.
• Используйте ключевые слова в заголовках естественным образом; не наполняйте каждый заголовок ключевым словом насильно.
• На длинных страницах составляйте заголовки последовательно и предсказуемо, чтобы сформировать оглавление (table of contents); это поможет как пользователю, так и поисковой системе.
• Если вы используете библиотеку тем или компонентов, задокументируйте в централизованном руководстве по стилю, какой уровень заголовка используют различные компоненты (header, hero, card, footer).
• При изменении макета (layout) страницы периодически проверяйте с помощью инструментов разработчика браузера (DOM-дерево), не нарушена ли иерархия заголовков.
• На блогах или новостных сайтах настройте рабочий процесс управления контентом, в котором заголовок статьи (H1) хранится отдельно от редакционного заголовка, а SEO-заголовок — в отдельном поле; не связывайте их между собой.
• На сайтах с несколькими авторами у разных редакторов могут быть разные привычки; поэтому фиксация правил иерархии заголовков в руководстве по стилю повышает согласованность.

Пример

<h1>Руководство по SEO</h1>
<h2>Техническое SEO</h2>
<h3>Скорость сайта</h3>
<h2>Контентное SEO</h2>
<h3>Исследование ключевых слов</h3>

Плохой пример: <h1>Добро пожаловать</h1>, после чего сразу идёт <h4>Наши товары</h4> — уровни H2 и H3 пропущены, иерархия нарушена.

Распространённые ошибки

• Использование более одного H1 на странице (например, как в области логотипа, так и в тексте).
• Полное отсутствие тегов H1.
• Использование тегов заголовков только для того, чтобы получить крупный/жирный шрифт, игнорируя иерархию.
• Переход с H2 непосредственно на H4 с пропуском уровней.
• Если в отчете Seoraporu.co появляется предупреждение «несколько тегов H1» или «отсутствие тега H1», это необходимо исправить на уровне шаблона/темы, так как, как правило, эта проблема повторяется на всех страницах.