H1-H6: что это такое и зачем нужны заголовки на странице

H1-H6 — это HTML-теги заголовков, которые задают смысловую структуру страницы. Они помогают разбить контент на уровни: от главного заголовка страницы <h1> до самых глубоких подзаголовков <h6>.

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

В SEO-аудите заголовки H1-H6 проверяют обязательно. Ошибки в заголовках не всегда критичны сами по себе, но они часто указывают на проблемы со структурой, релевантностью, доступностью, UX и качеством контента.

Автор экспертного мнения

Владислав Жерко

SEO-специалист, контент-стратег в Digital-агентстве Saygona

Опыт: 7+ лет в SEO и поисковом продвижении

Что такое H1-H6 простыми словами

H1-H6 — это теги HTML, которые обозначают заголовки разного уровня. Они не просто делают текст крупнее или жирнее, а показывают, какую роль этот текст играет в структуре страницы.

Например, на странице услуги H1 может называться «SEO-аудит сайта», H2 — «Что входит в SEO-аудит», «Как проходит работа», «Стоимость и сроки», а H3 — конкретные пункты внутри каждого раздела: «Проверка индексации», «Анализ robots.txt», «Проверка canonical», «Аудит Core Web Vitals».

Расшифровка H1-H6

Как работает иерархия заголовков

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

• Правильная логика:

  HTML

  <h1>Ремонт швейцарских часов</h1> <h2>Какие часы ремонтируем</h2> <h3>Механические часы</h3> <h3>Кварцевые часы</h3> <h2>Какие работы выполняем</h2> <h3>Диагностика механизма</h3> <h3>Замена стекла</h3> <h3>Полировка корпуса</h3>

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

Что означает H1

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

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

Примеры хороших H1:

• Технический аудит сайта;
• Ремонт часов Raymond Weil;
• Коробки с логотипом на заказ;
• Что такое canonical;
• Продвижение интернет-магазинов;
• Google Search Console: что это такое и как работает.

Сколько H1 должно быть на странице

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

Технически HTML допускает несколько H1 в документе, но для SEO, доступности и контент-аудита лучше использовать один основной H1. Это делает структуру страницы понятнее: один URL — одна главная тема. Остальные крупные разделы лучше оформлять через H2.

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

H1 и <title> часто похожи по смыслу, но выполняют разные задачи.

Title и H1 не обязаны полностью совпадать. Обычно они должны быть близки по смыслу, но title можно сделать более кликабельным для выдачи, а H1 — более естественным для страницы.

<title>Технический аудит сайта в Москве — проверка SEO, индексации и ошибок</title> <h1>Технический аудит сайта</h1>

Что означает H2

H2 — это заголовок основного раздела страницы. Если H1 — тема всей страницы, то H2 — крупные смысловые блоки, которые раскрывают эту тему.

На информационной статье H2 могут быть главами материала. На коммерческой странице H2 часто обозначают блоки: описание услуги, преимущества, этапы, цены, кейсы, FAQ, гарантии, условия работы.

Примеры H2:

• Что входит в технический аудит сайта;
• Как проходит ремонт часов;
• Преимущества коробок с логотипом;
• Как работает Google Search;
• Ошибки при настройке canonical;
• Вопросы и ответы.

Что означает H3

H3 — это подзаголовок внутри раздела H2. Он нужен, когда крупный раздел требует детализации. H3 помогает не превращать страницу в сплошной длинный блок и делает структуру глубже.

Например, если H2 называется «Что входит в SEO-аудит», то H3 могут быть такими:

• Проверка индексации;
• Анализ структуры сайта;
• Проверка метатегов;
• Аудит Core Web Vitals;
• Проверка дублей страниц.

Что означают H4, H5 и H6

H4, H5 и H6 используют для глубокой вложенности. На обычных коммерческих страницах и статьях чаще всего хватает H1, H2 и H3. H4-H6 нужны в длинных руководствах, документации, научных материалах, сложных FAQ, юридических документах, каталогах и технических инструкциях.

Если на странице появляется H5 или H6, стоит проверить, не слишком ли усложнена структура. Иногда глубину лучше уменьшить: разделить материал на несколько страниц, добавить содержание, таблицу или переработать блоки.

Пример правильной структуры H1-H6

<h1>SEO-аудит сайта</h1> <h2>Что такое SEO-аудит</h2> <p>Краткое описание услуги.</p> <h2>Что входит в SEO-аудит</h2> <h3>Техническая проверка</h3> <p>Проверка индексации, кодов ответа, редиректов и ошибок сервера.</p> <h4>Проверка robots.txt</h4> <p>Анализ директив для поисковых роботов.</p> <h4>Проверка sitemap.xml</h4> <p>Анализ карты сайта и передаваемых URL.</p> <h3>Контентный аудит</h3> <p>Проверка текстов, заголовков, метатегов и структуры страниц.</p> <h2>Сроки и результат</h2> <p>Что получает клиент после аудита.</p>

В этом примере H4 находится внутри H3, H3 находится внутри H2, а все H2 раскрывают основной H1.

Пример неправильной структуры H1-H6

<h1>SEO-аудит сайта</h1> <h3>Что входит в аудит</h3> <p>Раздел начинается сразу с H3, хотя H2 пропущен.</p> <h1>Преимущества</h1> <p>На странице появился второй главный заголовок.</p> <h5>Стоимость</h5> <p>Заголовок выбран ради размера шрифта, а не по смыслу.</p>

Такая структура затрудняет понимание страницы. Пользователь видит визуальные блоки, но HTML-иерархия не соответствует смыслу документа.

Почему нельзя использовать H1-H6 только ради размера шрифта

Теги H1-H6 нужны для смысла, а не для дизайна. Если нужен крупный текст, лучше использовать CSS: font-size, font-weight, line-height, margin и другие свойства.

• Неправильно:

  HTML

  <h2>Телефон: +7 (495) 000-00-00</h2>

• Если это просто крупный номер телефона, лучше использовать обычный элемент:

  HTML

  <p class="contacts-phone">+7 (495) 000-00-00</p>

• Внешний вид настраивается через CSS:

  CSS

  .contacts-phone { font-size: 28px; font-weight: 700; }

H1-H6 и SEO

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

При этом заголовки не являются «магической кнопкой» для роста позиций. Нельзя просто добавить ключевые слова в H1-H2 и ожидать высоких позиций. Заголовки работают вместе с содержанием страницы, ссылками, техническим состоянием, интентом, качеством контента, скоростью, мобильной версией и доверием.

Как писать H1 для SEO

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

Примеры:

Как писать H2 и H3 для SEO

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

Хорошие H2 и H3 отвечают на вопросы:

• что это такое;
• как работает;
• зачем нужно;
• что входит;
• какие бывают виды;
• какие ошибки встречаются;
• как выбрать;
• как проверить;
• сколько стоит;
• какой результат получает пользователь.

H1-H6 и доступность

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

Проблемы возникают, когда:

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

H1-H6 и UX

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

Для UX заголовки должны быть:

• короткими;
• понятными;
• конкретными;
• связанными с текстом ниже;
• визуально заметными;
• расположенными в логичном порядке;
• без лишней рекламной перегрузки.

H1-H6 и ИИ-поиск

Для ИИ-поиска и нейросетевых ответов заголовки особенно важны, потому что они помогают алгоритмам быстрее понять структуру материала. Чёткие H2-H3 превращают страницу в набор смысловых блоков: определение, примеры, ошибки, чек-лист, FAQ, сравнение, экспертный комментарий.

Чтобы страница была понятнее для ИИ-ответов, полезно:

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

H1-H6 и E-E-A-T

Заголовки не создают E-E-A-T сами по себе, но помогают показать экспертность и качество структуры. Если статья разбита на логичные разделы, содержит определения, примеры, ограничения, ошибки, источники, комментарий эксперта и FAQ, она выглядит более полезной и понятной.

Для YMYL-тематик заголовки помогают явно отделить факты от рекомендаций, условия от ограничений, инструкции от предупреждений. Это повышает читаемость и снижает риск неверного понимания материала.

H1-H6 на коммерческих страницах

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

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

  HTML

  <h1>Ремонт часов Raymond Weil</h1> <h2>Какие неисправности устраняем</h2> <h3>Замена стекла</h3> <h3>Ремонт автоподзавода</h3> <h3>Полировка корпуса</h3> <h2>Как проходит ремонт</h2> <h3>Диагностика</h3> <h3>Согласование стоимости</h3> <h3>Гарантия на работы</h3> <h2>Стоимость ремонта Raymond Weil</h2> <h2>Вопросы и ответы</h2>

H1-H6 в карточках товаров

В карточке товара H1 обычно содержит название товара или модели. H2 могут использоваться для характеристик, описания, доставки, оплаты, отзывов, инструкции, комплектации и FAQ.

<h1>Картонная коробка с логотипом на магнитах</h1> <h2>Описание</h2> <h2>Характеристики</h2> <h2>Варианты печати</h2> <h2>Доставка и оплата</h2> <h2>Вопросы и ответы</h2>

H1-H6 в блоге и статьях

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

• Для словаря терминов структура может быть такой:

  HTML

  <h1>Canonical: что это такое и зачем нужен</h1> <h2>Что такое canonical простыми словами</h2> <h2>Как работает rel="canonical"</h2> <h2>Когда нужен canonical</h2> <h2>Ошибки при настройке canonical</h2> <h2>Комментарий эксперта</h2> <h2>Вопросы и ответы</h2>

H1-H6 в интернет-магазине

В интернет-магазине заголовки должны помогать не только SEO, но и навигации. На страницах категорий H1 обычно совпадает с названием категории, H2 раскрывают подборки, характеристики, преимущества, условия покупки и FAQ.

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

Сквозные заголовки в шапке, сайдбаре и футере

Одна из частых ошибок — использовать H2-H3 для сквозных элементов интерфейса: «Меню», «Контакты», «Мы в соцсетях», «Популярные статьи», «Корзина», «Подписка», «Фильтр». Если такие заголовки повторяются на всех страницах, они могут засорять структуру документа.

Для интерфейсных блоков лучше использовать обычные элементы с CSS-оформлением или доступные подписи через ARIA, если это нужно для навигации. Заголовки H1-H6 стоит оставлять для смысловой структуры основного контента.

Пустые и скрытые заголовки

Пустые заголовки создают проблемы для доступности и аудита. Например, если в шаблоне остался пустой <h2></h2>, скринридер может определить заголовок без названия, а SEO-инструменты покажут ошибку структуры.

Скрытые заголовки тоже нужно использовать аккуратно. Если заголовок скрыт только визуально, но нужен для доступности, следует применять корректные CSS-техники. Если заголовок скрыт ради манипуляции SEO, это плохая практика.

Ключевые слова в H1-H6

Ключевые слова в заголовках могут помогать релевантности, но только если используются естественно. H1-H6 должны быть написаны для человека, а не выглядеть как набор поисковых запросов.

• Нормально:

  HTML

  <h1>Продвижение интернет-магазинов</h1> <h2>Как структура каталога влияет на SEO</h2> <h2>Работа с фильтрами и посадочными страницами</h2>

• Плохо:

  HTML

  <h1>Продвижение интернет-магазина купить SEO продвижение магазина недорого</h1> <h2>SEO интернет магазин продвижение интернет-магазина заказать SEO магазин</h2>

Длина заголовков H1-H6

Жёсткого универсального ограничения по длине H1-H6 нет. Но хорошие заголовки обычно короткие и понятные. Слишком длинный заголовок хуже читается, ломает дизайн и теряет функцию навигации.

Практический ориентир:

• H1 — обычно 3-10 слов;
• H2 — короткая формулировка раздела;
• H3 — конкретное уточнение внутри раздела;
• H4-H6 — только если структура действительно требует глубины.

Дубли H1 на сайте

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

• Например, если все страницы брендов называются просто «Ремонт часов», пользователь и поисковая система хуже понимают различия между ними. Лучше:

  HTML

  <h1>Ремонт часов Raymond Weil</h1> <h1>Ремонт часов Tissot</h1> <h1>Ремонт часов Longines</h1>

Можно ли пропускать уровни заголовков

Пропуск уровня не всегда ломает страницу технически, но часто делает структуру менее понятной для пользователей, скринридеров и SEO-аудита. Поэтому в основной области контента лучше соблюдать последовательность: H1, затем H2, затем H3 и так далее.

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

<h2>Технический аудит</h2> <h3>Проверка индексации</h3> <h4>Ошибки canonical</h4> <h2>Контентный аудит</h2>

Такая структура нормальна: H2 открывает новый раздел и закрывает предыдущую вложенность.

Как проверить H1-H6 на сайте

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

При проверке смотрят:

• есть ли H1;
• сколько H1 на странице;
• соответствует ли H1 теме страницы;
• не дублируется ли H1 на других URL;
• идут ли H2-H6 в логичном порядке;
• нет ли пустых заголовков;
• нет ли сквозных заголовков в меню, футере и сайдбаре;
• не используются ли heading-теги ради размера шрифта;
• нет ли переспама ключевыми словами;
• понятна ли структура страницы по одним заголовкам.

H1-H6 при SEO-аудите

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

Обычно фиксируют:

• отсутствующий H1;
• несколько H1 на одной странице;
• одинаковые H1 на разных URL;
• H1, не соответствующий title и содержанию страницы;
• пропуск уровней;
• пустые H2-H6;
• сквозные заголовки в шаблоне;
• заголовки без текста после них;
• переспам ключами;
• заголовки, созданные только ради дизайна;
• несоответствие визуальной и HTML-структуры;
• ошибки в шаблонах категорий, товаров, статей и услуг.

H1-H6 и CSS

Внешний вид заголовков нужно настраивать через CSS. Нельзя выбирать H3 вместо H2 только потому, что H3 визуально меньше. Это ломает смысловую структуру.

• Правильный подход:

  HTML

  <h2 class="section-title section-title--large">Преимущества услуги</h2>

• CSS:

  CSS

  .section-title--large { font-size: 42px; line-height: 1.2; margin-bottom: 24px; }

Так HTML остаётся смысловым, а дизайн управляется отдельно.

H1-H6 и JavaScript

На современных сайтах заголовки могут появляться после рендера JavaScript. Это особенно важно для SPA, React, Vue, Nuxt, Next.js и других фреймворков.

При аудите нужно проверить, видит ли заголовки не только пользователь в браузере, но и поисковый робот после рендеринга. Если H1 появляется слишком поздно, не попадает в серверный HTML или зависит от ошибки JavaScript, это может ухудшать понимание страницы.

Частые ошибки при использовании H1-H6

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

Как улучшить структуру H1-H6

1. Определите главный интент страницы. H1 должен отражать основную тему и цель URL.
2. Разбейте страницу на основные блоки. Каждый крупный блок оформите через H2.
3. Добавьте H3 для детализации. Используйте H3 только внутри H2, когда раздел нужно раскрыть подробнее.
4. Не выбирайте уровень по дизайну. Внешний вид настраивайте через CSS.
5. Проверьте уникальность H1. У однотипных страниц должны быть различающиеся заголовки.
6. Уберите сквозные heading-теги. Меню, футер, виджеты и телефоны не должны засорять структуру.
7. Проверьте доступность. Страница должна быть понятна по списку заголовков.
8. Уберите переспам. Заголовки должны звучать естественно.
9. Проверьте JavaScript-рендеринг. Убедитесь, что H1-H6 доступны после загрузки страницы.
10. Сравните с интентом. Заголовки должны отвечать на реальные вопросы пользователя.

Чек-лист H1-H6 для сайта

• На странице есть H1.
• H1 отражает основную тему страницы.
• На странице используется один основной H1.
• H1 уникален для конкретного URL.
• Title и H1 близки по смыслу, но не обязательно полностью совпадают.
• H2 используются для основных разделов.
• H3 используются только для подразделов внутри H2.
• H4-H6 применяются только при реальной глубокой вложенности.
• Нет пропуска уровней без логической причины.
• Заголовки не используются ради размера шрифта.
• Внешний вид заголовков настроен через CSS.
• Нет пустых H1-H6.
• Нет скрытых SEO-заголовков.
• Нет переспама ключевыми словами.
• Сквозные элементы меню, сайдбара и футера не засоряют структуру.
• Заголовки помогают понять страницу без чтения всего текста.
• FAQ, этапы, преимущества и условия оформлены логичными подзаголовками.
• Заголовки доступны после JavaScript-рендеринга.
• Структура удобна для пользователя, поисковых систем и скринридеров.

Автор экспертного мнения

Марина Харчистова

SEO-специалист в Digital-агентстве Saygona

Опыт: 5+ лет в SEO и поисковом продвижении

Комментарий эксперта

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

Связанные термины

• H1;
• H2;
• H3;
• H4;
• H5;
• H6;
• HTML-заголовки;
• heading tags;
• HTML;
• CSS;
• title;
• meta description;
• структура страницы;
• семантическая разметка;
• доступность;
• скринридер;
• UX;
• SEO;
• SEO-аудит;
• технический аудит сайта;
• контент-аудит;
• внутренняя оптимизация;
• релевантность;
• поисковый интент;
• E-E-A-T;
• ИИ-поиск;
• Google;
• Яндекс;
• Schema.org;
• FAQ;
• JavaScript-рендеринг.