Заголовок H1 и подзаголовки H2–H6

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

На глаз заголовок выглядит как крупный жирный текст. Для кода всё иначе. Дизайнер может сделать огромную надпись обычным <div>, и для робота она ничем не отличается от абзаца. А надпись «Подпишитесь на рассылку» в подвале, размеченная как H2, станет для поисковика одним из разделов страницы. Поэтому заголовки проверяют в коде, а не на макете.

Иерархия от H1 до H6 и сколько H1 нужно странице

H1 называет тему всей страницы. H2 делят её на разделы, H3 живут внутри H2. Уровни H4, H5 и H6 нужны редко: в длинных инструкциях и документации. Для страницы услуги структура может выглядеть так:

<h1>Монтаж пластиковых окон</h1>
  <h2>Что входит в монтаж</h2>
    <h3>Демонтаж старых окон</h3>
    <h3>Отделка откосов</h3>
  <h2>Цены на монтаж</h2>
  <h2>Как проходит заказ</h2>

Лучший тест структуры: по одним заголовкам понятно, о чём страница и что в ней есть.

Стандарт HTML не запрещает несколько H1, и Google прямо пишет, что идеального числа заголовков нет. На практике мы оставляем один H1 на страницу: так тема однозначна, а шаблон проще контролировать. Второй H1 обычно появляется случайно: логотип в шапке обёрнут в H1 на всех страницах или конструктор по умолчанию даёт этот тег заголовкам блоков.

Как писать H1 и H2 и чем H1 отличается от title

Хороший H1 называет то, что человек искал. «Монтаж пластиковых окон» лучше, чем «Добро пожаловать» или «Наши услуги»: из второго варианта ни человек, ни поисковик не поймут, куда попали.

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

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

Что заголовки дают в поиске и как их собирают в каталогах

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

На больших каталогах заголовки генерируют по шаблонам. H1 категории собирают из её названия и выбранных фильтров: «Смесители для кухни Grohe». Карточка товара получает H1 с названием и моделью. На страницах пагинации к title и H1 часто добавляют номер страницы, чтобы они не были копиями первой. Ошибка в шаблоне умножается на тысячи страниц, поэтому после правки шаблона выборку адресов проверяют краулером.

В проекте Aitech мы полностью переработали алгоритм генерации мета-тегов и заголовков под подобранный список ключевых фраз. Это шло вместе с технической оптимизацией и микроразметкой, и за 3 месяца заказов из органической выдачи стало на 125% больше.

Где ломается разметка заголовков и как это найти

• Телефон или адрес в шапке размечен как H1 на всех страницах.
• Одинаковый H1 на страницах фильтров с разными товарами.
• H1 спрятан через стили или сделан картинкой без текста.
• Теги H2, H3 и H4 стоят ради размера шрифта: «Популярное», «Мы в соцсетях», «Подписка».
• Настоящие разделы текста сделаны жирным абзацем без тега.
• Каждый H2 начинается с одной и той же фразы из запроса. Читать неприятно, а поиску это ничего не даёт.

Найти такие места можно за четыре шага:

1. Откройте код страницы и найдите <h1: он должен быть один и совпадать по смыслу с темой.
2. Посмотрите структуру через расширение браузера, которое показывает дерево заголовков.
3. Прогоните сайт краулером вроде Screaming Frog: он найдёт страницы без H1, с несколькими H1 и с одинаковыми H1.
4. Запустите Lighthouse: в проверке доступности он отмечает нарушенный порядок заголовков.

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

H1 на главной, пропуск уровней и крупный текст без тега

Структуру заголовков проверяем при техническом аудите сайта, шаблоны H1 для каталогов настраиваем при SEO-продвижении.

Источники

• Google Search Central: руководство по поисковой оптимизации для начинающих
• Стандарт HTML (WHATWG): элементы заголовков h1, h2, h3, h4, h5, h6
• Кейс E.BAEV: Aitech

См. также: Мета-тег title, SEO-тексты, Семантическая вёрстка, Мета-теги.