Как использовать H1–H6

Заголовок — это карта, не место для ключа

H1–H6 существуют, чтобы страница имела оглавление. Человек сканирует заголовки, как содержание книги. Поиск использует их как структуру документа: что здесь главное, что — раздел, что — уточнение. Если заголовки — россыпь ключей разного размера, карты нет. Есть шум типографики.

Правило, которое ломают чаще всего: один H1 на документ. H1 — название этой страницы, не раздела сайта и не слоган шапки. Два H1 «потому что в макете два героя» — два претендента на тему. Визуально большой текст в баннере не обязан быть H1. Часто это div со стилем. И наоборот: прятать единственный H1 в CSS ради картинки — оставлять документ без имени.

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

Иерархия без дыр

Логика уровней:

• H1 — тема URL.
• H2 — крупные блоки, на которые можно сослаться с оглавления.
• H3 — части внутри блока.
• H4–H6 — редкость. Нужны в длинных регламентах и справке, не на карточке услуги из трёх экранов.

Нельзя прыгать с H1 сразу на H3 «потому что H3 меньше и можно напихать ключей». Размер шрифта настраивается стилями. Уровень в HTML — смысл. Пропуск уровня путает и доступность (скринридеры), и любое автооглавление.

Плохо:

1. H1 «Продвижение сайтов»
2. H4 «Продвижение сайтов Москва недорого»
3. H2 «О компании»
4. H3 «Продвижение сайтов цена»

Это не иерархия. Это облако тегов в тегах заголовков.

Хорошо на услуге:

1. H1 «Поисковое продвижение сайта»
2. H2 «Какие задачи закрывает SEO»
3. H3 «Кому это подходит» / «Какие исходные данные нужны»
4. H2 «Этапы»
5. H2 «Ограничения»

Ключ, если он естественен, живёт в H1 и в паре H2, где это названия реальных блоков. Остальное — человеческие названия разделов.

H1: частые поломки

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

H1 в подвале или в скрытом блоке. Поиск может его проигнорировать как прятки, человек — не увидеть.

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

H1, который не совпадает с интентом URL. Статья «что такое каноникал», H1 «SEO продвижение под ключ» — ложь документа. Тело уже не спасти ключами в H2.

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

H2–H3 как скелет текста

Каждый H2 должен открывать блок, который можно пропустить, если он не нужен, не потеряв тему страницы целиком. Если все H2 — перефразы одного ключа, скелета нет: вы написали одно и то же четыре раза.

Проверка: выпишите только заголовки. Получилось оглавление, по которому понятна статья? Если нет — править заголовки, не «добавить вхождений».

H3 не обязаны содержать запрос. «Антипаттерны сниппета» лучше, чем «Title Title Title». Для SEO-текста заголовки — способ закрыть подвопросы интента, не способ набрать плотность.

Не используйте заголовок вместо пункта списка. «Преимущество 1», «Преимущество 2» как H2 — макет презентации, не документ.

Визуал против семантики

Дизайнер увеличивает шрифт цитаты — разработчик ставит H2. Получается ложный раздел. Цитата — цитата. Подпись к таблице — не H3. Название виджета «наши услуги» в сайдбаре — не H2 страницы: иначе тема документа размазывается по шаблону.

Сквозные блоки (форма, меню, карточки услуг) не должны красть уровни контента. Контентная колонка держит иерархию URL. Шаблон — свои классы.

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

Доступность и оглавление

Заголовки — навигация с клавиатуры и для скринридеров. Прыжки уровней и H1 в каждом попапе ломают чтение. Длинная статья выигрывает от настоящего оглавления по H2, не от «якорей» на случайные слова.

Не делайте заголовок ссылкой на другую страницу вместо текста раздела. Заголовок описывает *этот* блок. Ссылка — в абзаце.

Аккордеоны, FAQ и CMS

Частый слом в конструкторах: каждый пункт FAQ получает H2 с ключом, плюс H2 у формы, плюс H2 у «вам также подойдёт». Страница услуги из пяти смысловых разделов в HTML выглядит как документ из двадцати тем. Для аккордеона достаточно кнопки или H3 внутри одного H2 «Вопросы». Не каждый кликабельный ярлык — заголовок документа.

В карточках каталога заголовок товара — H2 или H3 внутри листинга с одним H1 раздела. На самой карточке — один H1 с именем товара. Если вынести H1 в превью списка, в индексе окажется пачка документов с одинаковой «главной темой».

CMS вроде «заголовок модуля = H2» нужно ограничить ролями. Редактору — поле H1 и свободные H2 в тексте. Разработчику — не отдавать виджету право назначать уровень.

Мини-регламент для вёрстки

• В шаблоне ровно один слот H1 — контентный.
• H2–H3 задаёт редактор, не «каждый аккордеон = H2».
• Ключевые фразы не назначаются уровнем «поважнее».
• Проверка в HTML, не глазами по макету: в макете всё «крупное».
• После редизайна — сверка, не разъехались ли уровни.

Чего не делать ради SEO

Не размножать H2 с перестановкой слов запроса. Не прятать H1 через display:none. Не ставить H1 на каждую карточку товара в листинге, если это список, а не документ карточки — у листинга свой H1 («Насосы»), у карточки — свой. Не использовать H1 на 404 и на технических заглушках как «купить X».

Заголовки не заменяют текст. Пустой H2 с ключом и простыня ниже «про всё» — та же дыра, что страница без оглавления. Сначала смысл блока, потом тег.

Если страница собрана так, что заголовки читаются как содержание, вы уже сделали большую часть «оптимизации H1–H6». Остальное — не прыгать через уровень и не отдавать ключу роль архитектуры.