Заголовок H1
H1 — заголовок первого уровня в HTML, главное название страницы, которое видит посетитель. Яндекс рекомендует один H1 на страницу, а в самом HTML заголовков шесть уровней — от h1 до h6.
Содержание
H1 как главное название страницы и откуда взялся тег
H1 — заголовок первого уровня: HTML-тег h1, внутри которого записано главное название страницы. Посетитель видит его крупным шрифтом в начале материала, а поисковый робот читает как короткий ответ на вопрос «о чём эта страница». У статьи это её название, у карточки — наименование товара, у раздела каталога — имя категории.
Шесть уровней заголовков, от h1 до h6, заложены в HTML с первых версий стандарта: язык придумали для научных документов, где без названий глав не обойтись. Поэтому заголовки в разметке — это структура, а не оформление. Браузер может показать h1 мелким шрифтом, но для программы, читающей код, главным останется именно он.
H1 и title: два заголовка для двух читателей
Новички путают H1 с тегом title: оба называют страницу. Но живут они в разных местах. Title лежит в служебной части кода и становится кликабельной строкой в выдаче, H1 лежит в теле страницы, его читают уже после перехода. Подробнее про служебные теги — в разделе о мета-тегах.
| Признак | Title | H1 |
|---|---|---|
| Где в коде | Служебный блок страницы | Тело страницы, начало материала |
| Где виден | Вкладка браузера, выдача, закладки | Только на самой странице |
| Количество | Один обязателен | Один рекомендован |
| Задача | Убедить перейти из результатов поиска | Подтвердить, что человек попал по адресу |
Яндекс в материалах для рекламодателей пишет прямо: значения H1 и title могут совпадать, но не обязаны. Google называет H1 одним из источников названия в выдаче и оставляет за собой право переписать title, если тот не отражает содержимое страницы. Поэтому разводить два заголовка по смыслу полезно: title работает на клик, H1 — на ясность. На сниппет влияют обе строки.
Иерархия H1–H6: как заголовки собирают скелет страницы
Заголовки образуют дерево, как оглавление книги. H1 — корень, под ним H2 для крупных смысловых блоков, под H2 — H3 для подразделов и так далее вниз.
| Уровень | Роль | Сколько на странице | Пример для страницы про ремонт |
|---|---|---|---|
| H1 | Тема всей страницы | Один | Ремонт ванной комнаты под ключ |
| H2 | Крупный раздел | По числу разделов | Сколько стоит ремонт |
| H3 | Подраздел внутри H2 | По необходимости | Ремонт в новостройке |
| H4–H6 | Более глубокая вложенность | На обычных страницах почти не нужны | Черновая отделка |
Три правила дерева. Не пропускать уровни: после H2 идёт H3, а не H5. MDN объясняет причину: пользователи экранных читалок прыгают по заголовкам, чтобы понять устройство страницы, и пропуск оставляет их гадать, куда делся промежуточный. Не использовать заголовок ради размера шрифта — для этого есть CSS. И не плодить H1: стандарт HTML формально допускает несколько, но MDN называет лучшей практикой один h1 на страницу, а Яндекс рекомендует ровно один.
Как написать H1: разбор на странице категории интернет-магазина
Возьмём раздел каталога, в котором продаются беговые дорожки. Порядок работы такой.
- Откройте семантическое ядро и выберите главный запрос страницы: допустим, «беговые дорожки для дома».
- Определите, чего хочет человек: купить или прочитать обзор. Это поисковый интент, и страница должна ему соответствовать.
- Запишите H1 как название темы: «Беговые дорожки для дома». Без «купить недорого» и без приветствий.
- Отдельно составьте title, куда можно добавить уточнения: «Беговые дорожки для дома — каталог, цены, доставка».
- Убедитесь, что у соседних страниц другие H1: у фильтров «Беговые дорожки складные» и «Беговые дорожки до 30 000 ₽» заголовки должны различаться.
Плохие варианты узнаются сразу: «Добро пожаловать в наш магазин» ничего не говорит о странице, а «Беговые дорожки купить недорого дёшево Москва» похоже на список запросов. Яндекс разрешает включать в H1 ключевую фразу, если она соответствует смыслу страницы, но не советует вставлять запросы дословно и перегружать заголовок.
Где H1 ломается: логотип, пустота и дубли из шаблона
Проблемы с H1 редко возникают в тексте — их приносит верстка шаблона. Вот что находят при проверке:
- H1 нет совсем. Заголовок оформлен как обычный блок с крупным шрифтом, а тега нет. Исправление: заменить обёртку на
h1. - H1 два и больше. Один в шапке, второй в контенте, третий в баннере. Остаётся один — тот, что называет страницу.
- Логотип завёрнут в H1 на всех страницах. Яндекс прямо называет это ошибкой: заголовок становится одинаковым у всего сайта.
- H1 скрыт от пользователя. Он есть в коде, но спрятан стилями. Заголовок, которого нет на экране, читателю не помогает, а Яндекс относит такое к ошибкам.
- H1 одинаков у десятков страниц. Шаблон подставляет название раздела на страницы фильтров, вариантов и постраничных списков.
- H1 не соответствует содержимому. Заголовок обещает одно, на странице другое.
Проверка занимает минуту: откройте страницу, нажмите Ctrl+U и найдите в коде <h1. Для всего сайта нужен краулер: он выгружает H1 каждой страницы и показывает пустые и повторяющиеся. Такой обход входит в технический SEO-аудит, а правки закладывают в работу по SEO-продвижению. Чтобы ошибка не вернулась, при разработке сайта в техзадании фиксируют: на каждом шаблоне один видимый H1 из отдельного поля, а не из названия пункта меню.
Частые вопросы
Сколько H1 должно быть на странице?
Яндекс рекомендует один тег H1 на страницу. Стандарт HTML формально допускает несколько, но MDN не считает это хорошей практикой. Google прямо не запрещает, однако при нескольких одинаково заметных заголовках может взять для названия в выдаче первый из них.
H1 и title должны совпадать?
Не обязаны. Яндекс пишет, что значения могут совпадать, но это не требование. Обычно title делают информативнее, добавляя уточнения для выдачи, а H1 оставляют простым названием темы, которое подтверждает человеку, что он попал на нужную страницу.
Влияет ли H1 на позиции в поиске?
Поисковые системы используют заголовок, чтобы понять тему страницы, и как один из источников названия в выдаче. Веса H1 в ранжировании Яндекс и Google не публикуют, поэтому обещать рост из-за одного тега нельзя. Зато пустой или дублирующийся H1 ухудшает понимание темы.
Можно ли сделать H1 картинкой или логотипом?
Лучше оформить H1 текстом, а вид задать стилями. Если вместо текста вставить картинку, робот и экранная читалка получат пустой заголовок. Отдельная ошибка — оборачивать в H1 логотип на всех страницах: тогда заголовок одинаков у всего сайта.
Какой длины должен быть H1?
Жёстких требований нет, Яндекс это подтверждает. На практике H1 умещается в одну-две строки: короткое точное название темы без повторов и перечисления запросов. Если заголовок приходится сокращать под вёрстку, лишнее лучше перенести в title или подзаголовок.