Новый формат
HTML-тег H1: оформление, иерархия и SEO
H1 — главный видимый заголовок страницы: он задаёт тему для человека и помогает поисковику понять, о чём документ. Это не «волшебный тег ТОП-1», а часть ясной структуры вместе с Title, подзаголовками и текстом.
Ниже — как оформить H1, чем он отличается от Title, как строить иерархию H2–H6, типичные ошибки CMS и быстрая проверка. Общая on-page под запрос — в статье про оптимизацию страницы; здесь фокус на заголовках.
Зачем нужен H1
H1 отвечает на вопрос «что это за страница?» в первом экране. Пользователь сразу видит тему; робот получает сильный структурный сигнал рядом с Title, лидом и основным текстом.
Сам по себе идеальный H1 не спасёт тонкий или чужой контент. Он работает в связке: один интент → понятный заголовок → текст, который обещание закрывает.
Хороший H1:
- один на страницу основного контента;
- читается как заголовок, не как простыня ключей;
- согласован с Title и URL по смыслу;
- виден без «охоты» по блокам шаблона.
H1 и Title: в чём разница
Title живёт в `<head>` и чаще всего становится заголовком сниппета. H1 — в `<body>`, его видят на самой странице. Дублировать формулировку один в один не обязательно и часто вредно для CTR: в выдаче и на сайте нужны разные акценты.
Пример: Title — «Доставка воды в Казани — заказ от 1 бутыли»; H1 на странице — «Доставка питьевой воды по Казани». Смысл общий, слова не клоны.
Практика:
- Title короче и «для клика»;
- H1 естественнее «для чтения»;
- не пихайте в оба пять коммерческих хвостов подряд;
- бренд в Title — по месту, в H1 — если это часть оффера.
Как добавить и оформить H1
В HTML это элемент `<h1>…</h1>`. В CMS поле «заголовок записи» часто уже выводится как H1 — проверьте тему: иногда заголовок поста в H2, а H1 занимает логотип или скрытый служебный текст.
Стилизуйте через CSS, не через размер шрифта у случайного `<div>` и не через `<b>` вместо иерархии. Для доступности важен порядок заголовков, не только «крупный текст».
Оформление:
- коротко и по делу (часто до ~70–90 символов, без жёсткого лимита);
- без ALL CAPS и «!!!!!»;
- без вложенных ссылок «на всякий» внутри H1;
- не прячьте H1 через `display:none` ради SEO — бессмысленно и рискованно.
Ключи в H1 без переспама
Впишите основную тему так, как её формулирует человек: услуга, товарная категория, вопрос статьи. Вторичные формулировки уводите в H2–H3 и текст.
Переспам («купить дешево цена опт недорого москва») бьёт по доверию и часто по сниппету. Лучше один ясный H1, чем три ключа через запятую.
Чеклист формулировки:
- отражает интент страницы;
- не копирует Title дословно;
- без города×услуга׫недорого»×«24/7» в одной строке без нужды;
- согласован с первым абзацем.
Иерархия H1–H6
Думайте оглавлением: H1 — тема документа, H2 — крупные блоки, H3 — подразделы внутри H2. Пропуск уровней «потому что красивый кегль» ухудшает сканирование и доступность.
H4–H6 на маркетинговых сайтах нужны реже; если используете — сохраняйте логику вложенности. В карточке товара часто: H1 = название, H2 = описание / характеристики / отзывы.
Антипаттерны:
- пять H1 в шаблоне;
- H2 выше по смыслу, чем «потерянный» H1;
- все подзаголовки одним стилем без тегов заголовков;
- одинаковый H1 на пагинации «страница 2» без уточнения.
Как проверить H1 на сайте
Точечно: «Просмотр кода» или инспектор — поиск `h1`. Массово: краулер (Screaming Frog и аналоги) — колонка H1, дубли, пустые значения. В панелях вебмастеров смотрите выборочно проблемные URL после правок шаблона.
После смены темы CMS перепроверьте главную, карточку, категорию и статью блога — шаблоны часто разные.
Что зафиксировать в аудите:
- страниц без H1;
- страниц с 2+ H1;
- дубли H1 на разных URL;
- H1 = Title слово в слово на всём сайте (сигнал шаблонного спама).
Частые вопросы
Сколько H1 должно быть на странице?
Ориентир — один смысловой H1 на основной контент. Несколько H1 в шаблоне (логотип, виджеты) лучше убрать: путают и людей, и разметку.
Title и H1 должны совпадать слово в слово?
Нет. Смысл общий, формулировки лучше разные: Title — для сниппета, H1 — для экрана страницы.
Обязателен ли ключ в H1?
Полезен ясный смысл запроса/услуги, не exact-match любой ценой. Читаемость важнее плотности.
Можно ли стилизовать div под заголовок без H1?
Визуально — да, для SEO и доступности хуже. Заголовок должен быть настоящим HTML-заголовком по смыслу.
Нужны ли H2–H6 всегда?
На коротком лендинге может хватить H1 + абзацев. На длинных текстах и каталогах иерархия H2–H3 заметно улучшает сканирование.
H1 влияет на ранжирование сильнее Title?
Оба участвуют в понимании темы. На клик из выдачи сильнее Title/сниппет; на понимание страницы на сайте — H1 и структура.
Как проверить H1?
Просмотр кода / расширение / краулер: ищите `<h1>`. В DevTools удобно проверить, не спрятан ли заголовок и не дублируется ли.
Можно ли H1 картинкой?
Плохая идея: текст в изображении хуже для поиска и доступности. Если логотип в шапке — не заменяйте им H1 контента.
H1 на страницах в хаосе?
Наведём иерархию заголовков и формулировки — без переспама и пяти H1 в шаблоне.
Обсудить задачу
