Заголовок H1 и иерархия H1–H6: как собрать дерево страницы

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

Какую работу делает H1 и дерево H2–H6

H1 называет основную тему HTML-документа. H2–H6 обозначают разделы и подразделы. По ним посетитель может быстро просмотреть структуру. Логотип, слоган или крупный текст баннера сами по себе эту роль не выполняют.

Семантический тег задаёт уровень заголовка, а CSS — его вид. Выбирайте H2 или H3 по месту раздела в структуре, а размер шрифта настраивайте отдельно.

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

H1 ради крупного шрифта не помогает читателю понять тему страницы.

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

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

У H1 нет заданной HTML-спецификацией длины. Заголовок должен ясно называть содержание; если он не помещается на экран, проверьте его перенос и оформление.

Google сообщает, что при недостаточно информативном Title учитывает другие элементы страницы при формировании заголовка сниппета. Поэтому H1 и Title должны соответствовать содержанию, но копировать их дословно не требуется. В рекомендациях Центра издателей Google для свойства headline указано ограничение в 110 символов. Оно относится к этой рекомендации, а не к видимому H1.

Сколько H1 допустимо на странице

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

На услуге или карточке товара читателю нужна понятная иерархия всей страницы.

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

Для справки с глубокой структурой достаточно одного главного H1 и последовательных уровней ниже.

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

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

Не выбирайте H4 ради меньшего шрифта и не повышайте уровень, чтобы заголовок выглядел заметнее. За внешний вид отвечает CSS, за структуру — уровень тега.

На странице услуги H1 может назвать услугу, H2 — состав, этапы и сроки, а H3 — подразделы этапов. Если раздел не содержит отдельных подтем, ему не нужен заголовок нижнего уровня.

Как сформулировать H1: тема и содержание страницы

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

Ключевую фразу можно включить в начало заголовка, если она звучит естественно. Перечень из ключа, города и слов «купить» или «цена» утяжеляет H1 и затрудняет чтение.

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

Матрица H1–H3 для главной, услуги, каталога, карточки, статьи и лендинга

Формулировка H1 зависит от типа страницы: главная описывает компанию, услуга называет работу, карточка — конкретный товар. Для нового сайта сначала продумайте шаблоны страниц и поля для заголовков, затем заполняйте их.

Когда нужны H2–H6

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

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

H4–H6 пригодятся в документации и справке, если материалу нужна глубокая структура. Для короткой страницы услуги или лендинга такие уровни обычно не требуются.

Если сайт содержит справку с несколькими вложенными уровнями, H4–H6 уместны. На короткой странице остановитесь на H2 или H3.

Как дерево заголовков помогает скринридеру и поисковику

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

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

Где править H1 в 1С-Битрикс, Tilda, WordPress и OpenCart

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

В 1С-Битрикс проверьте шаблон компонента, свойства элемента и SEO-настройки. Если H1 повторяется, выясните, какой компонент или блок добавил дубликат. Для настройки SEO-полей в 1С-Битрикс отдельно сверьте H1 и Title.

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

В WordPress тема обычно отвечает за видимый заголовок записи, а SEO-плагин — за метаданные. Проверьте разметку страницы после смены темы или шаблона.

В OpenCart проверьте шаблоны товара и категории, а также поля метаданных. Один общий шаблон может добавить одинаковый текст на страницы с разным содержанием.

Как проверить иерархию заголовков на сайте

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

Просмотрите исходный код страницы или список заголовков в инструменте проверки доступности. Сверьте смысл H1 с Title, og:title и JSON-LD headline, если они есть. Эти поля не обязаны совпадать дословно, но должны описывать одну страницу.

Пришлите адрес шаблона или каталога в Cimes — разберём заголовки, дубли и различия между H1 и Title.

Источники

• Ещё несколько слов о заголовках веб-страниц — Google Search Central
• Рекомендации по управлению страницами, на которых размещаются статьи — Центр издателей Google