Заголовок H1: что это за тег и как его прописать

September 11, 202617 min read · 3,330 words

Заголовок H1: что это за тег и как его прописать

TL;DR

Разбираю тег H1: что он делает в HTML, чем отличается от мета-тегов, сколько его ставить, какой длины и как выстроить иерархию H1-H6 без пропусков.

Коротко: H1 — парный HTML-тег, которым размечают главный заголовок страницы. Он единственный, видим читателю и отвечает на вопрос «куда я попал». Его постоянно путают с title, хотя элементы разные: мета-тег живёт в служебной части кода и показывается в выдаче, а H1 — в самом материале.

Меня зовут Богдан, я веду блог сервиса AI SEO Writer и разбираю чужие сайты в том числе на подобные мелочи. За два года я не помню технического аудита, где с этим тегом было бы всё в порядке: либо его нет вовсе, либо их четыре, либо в него завёрнут логотип в шапке. Дальше — что за элемент перед нами, чем он отличается от title, сколько его можно ставить (спойлер: стандарт и Google отвечают иначе, чем большинство SEO-гайдов), какой длины делать и чем проверить.

Что такое тег H1 и как он выглядит в коде

Перед нами парный тег: открывающий <h1>, закрывающий </h1>, между ними — текст. Никаких атрибутов для работы ему не нужно.

<body>
  <h1>Как выбрать беговые кроссовки для асфальта</h1>
  <p>Первый абзац текста.</p>
</body>

Браузер по умолчанию рисует заголовок первого уровня крупным жирным шрифтом. Отсюда и растёт частая ошибка разметки: тег берут не по смыслу, а ради размера шрифта. Делать так нельзя — за размер отвечает CSS-свойство font-size, а H1 несёт смысл: он сообщает браузеру, поисковому роботу и программе чтения с экрана, что перед ними главный заголовок страницы.

Стоит он всегда внутри <body> — в той части кода, которая отображается на экране. Обычно идёт сразу после шапки, до основного текста. Технически движок разрешает поставить тег где угодно в теле, но осмысленно — сверху.

Слово «header» сбивает с толку отдельно. В англоязычной документации теги от <h1> до <h6> называют headings, а <header> — другой элемент, контейнер шапки блока. В верстке они соседствуют, но задачи разные: <header> группирует, <h1> называет. Встречается и вариант headers — так теги подписаны в интерфейсах части краулеров.

Шесть уровней заголовков: H1-H6

В языке разметки их ровно шесть — от H1 до H6. Работает система как оглавление книги: H1 — имя книги, H2 — главы, H3 — параграфы внутри глав, дальше H4-H6 для мелкой детализации. Это заголовок каждого следующего порядка, вложенный в предыдущий.

Уровень	Роль в материале	Сколько ставить
H1	заголовок всей статьи	один
H2	крупные смысловые блоки	обычно 4-8
H3	подзаголовки внутри H2	по 0-3 на каждый H2
H4-H6	глубокая детализация	редко, по необходимости

H4, H5 и H6 нужны нечасто. По данным WebAIM Million (отчёт 2026 года, выборка в миллион домашних страниц), доля H2 среди размеченных строк — 29%, H3 — 37,5%, а вот на H1 приходится всего 5,1%. При этом 94,9% страниц, где встречается хотя бы один H6, имеют пропуски уровней. Прямое доказательство того, что глубокие уровни ставят не по смыслу, а наугад.

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

H1 и title: чем они отличаются и почему их путают

Перед нами два разных элемента кода, которые почти всегда содержат похожий текст — отсюда и путаница.

<title> находится в секции <head>, в служебной части кода, которую посетитель не видит. Его выводят вкладка браузера и сниппет в поисковой выдаче. H1 живёт в <body> и виден в самом материале.

<head>
  <title>Беговые кроссовки для асфальта: как выбрать — Название магазина</title>
</head>
<body>
  <article>
    <h1>Как выбрать беговые кроссовки для асфальта</h1>
  </article>
</body>

Признак	title	H1
Где в коде	`<head>`	`<body>`
Где видит человек	вкладка браузера, сниппет в выдаче	в самом материале
Кто адресат	тот, кто ещё не зашёл	тот, кто уже зашёл
Рабочая длина	около 50-60 символов до обрезки	50-70 символов
Задача	заставить кликнуть	подтвердить, что человек попал куда хотел
Сколько ставить	ровно один	один

Разница в адресате объясняет всё остальное. Мета-тег из служебной секции работает как рекламная строка среди десяти конкурентов: туда идут бренд, цена, год, слова-крючки. Заголовок в теле работает как табличка на двери: человек уже кликнул, ему нужно подтверждение, что содержание соответствует ожиданию.

Подробный разбор мета-тегов у меня вынесен в отдельный материал — правила заполнения title и description расписаны там по пунктам, здесь останавливаюсь на разнице между двумя элементами.

Почему их лучше делать разными

Технически ничто не мешает продублировать текст один в один. Но тогда вы теряете половину площади для ключевых слов.

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

Второй довод практический. Яндекс и Google переписывают сниппеты: если исходный вариант им не подошёл, они возьмут текст из содержимого материала, и часто именно из H1. Две разные формулировки дают поиску выбор, одинаковые — не дают ничего.

Сколько H1 может быть на странице

Правило «один на страницу» вы встретите в любом чек-листе. Оно рабочее, но обоснование у него не то, которое обычно приводят. Разберу по источникам: стандарт языка разметки и позиция поисковых систем расходятся.

Что говорит стандарт HTML и куда исчез document outline

Документация MDN формулирует дословно: «While using multiple <h1> elements on one page is allowed by the HTML standard (as long as they are not nested), this is not considered a best practice. A page should generally have a single <h1> element that describes the content of the page».

Итого: несколько H1 стандарт разрешает — при условии, что они не вложены друг в друга. Но best practice — один заголовок первого уровня.

Отдельная история с вложенностью. Раньше в спецификации был document outline algorithm: предполагалось, что внутри <section> или <article> можно снова ставить H1, и браузер сам пересчитает структуру заголовков по глубине вложенности. MDN отмечает, что приём «was never considered a best practice and is now non-conforming» — то есть спецификации он больше не соответствует. Сам алгоритм из стандарта WHATWG убрали в 2022 году по простой причине: его не реализовал ни один браузер и ни одна программа чтения с экрана. Подробный разбор этой истории есть у Адриана Роселли в статье «There Is No Document Outline Algorithm».

Вывод для практики: если вы верстаете макет на секциях и ставите в каждую по H1 в расчёте на автоматический пересчёт уровней — пересчёта не будет ни у кого. Внутри секций нужны H2 и H3.

Что отвечает Google

Позиция поисковика противоположна привычному чек-листу. Джон Мюллер ещё в 2019 году сказал: «You can use H1 tags as often as you want on a page. There's no limit, neither upper or lower bound». И там же: «Your site is going to rank perfectly fine with no H1 tags or with five H1 tags».

Позже он повторял мысль в другой формулировке: несколько H1 — распространённый на вебе шаблон, и системы Google с ним проблем не имеют. В 2024 году Гэри Иллиес добавил уточнение про уровни: семантический порядок заголовков полезен для доступности, но на алгоритмы ранжирования существенно не влияет.

По Яндексу дословной нормы «один H1 на страницу» в справке для вебмастеров я не нашёл — есть только обучающий материал Яндекс Рекламы с такой рекомендацией и десятки пересказов в блогах, которые ссылаются друг на друга. Приписывать поисковой системе требование, которого нет в её документации, я не буду.

Почему я всё равно ставлю один

Доводов у меня три, и ни один не про ранжирование.

Первый: это главный заголовок материала, а главное не бывает во множественном числе. Если в материале два равнозначных заголовка верхнего уровня, значит, в нём две темы, и его стоит разделить надвое.

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

Третий: автоматические аудиты. Screaming Frog, Netpeak Spider, встроенные проверки CMS — все они помечают несколько H1 как ошибку. Формально ошибки нет, но каждый флаг в отчёте придётся объяснять, и дешевле его не создавать.

Паниковать при этом не из-за чего. По WebAIM Million несколько H1 на странице стоят у 18,1% домашних страниц в мире, и доля растёт: в 2025 было 16,3%. Явление массовое, катастрофой оно не стало.

Какой длины делать H1

Рабочий диапазон — 50-70 символов. Норма нигде не закреплена: длина заголовка упирается в два ограничения, вёрстку и восприятие.

Строка длиннее 70 символов на мобильном экране разъезжается на три-четыре строки и перестаёт читаться с одного взгляда. Короче 30 символов — обычно пустая: «Наши услуги», «О компании», «Каталог». По этим словам невозможно понять, чем материал отличается от соседнего.

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

Отдельный случай — интернет-магазины и каталоги, где текст в этой строке собирается по шаблону из свойств товара. Там длина заголовка не контролируется вручную: «Кроссовки Nike Air Zoom Pegasus 41 мужские для бега по асфальту чёрные 44 размер» набегает само. Шаблон стоит собирать из двух-трёх свойств, а не из всех подряд, иначе в вёрстке карточки заголовок занимает пол-экрана.

Простой тест: закройте всё, кроме первой строки, и спросите, понятно ли, о чём материал. Если суть не читается — переписывайте.

Как вписать ключ и не сделать спам

Ключевой запрос в заголовке H1 нужен, но одного вхождения достаточно. Правила, которых держусь при написании:

Прямой порядок слов. «Ремонт стиральных машин в Казани» читается, «Стиральных машин ремонт Казань» — нет. Поиск давно понимает морфологию, ломать язык ради точного вхождения смысла нет.
Ключ добавляем один раз. Второе и третье повторение в пределах одной строки ничего не усиливают, а спамность поднимают.
Одна тема — одна формулировка. Заголовок должен отражать основную тему страницы, а не перечислять всё, что внутри есть.
Понятность важнее красоты. Заголовок должен читаться человеком, который видит сайт впервые.
Никаких списков городов и синонимов. «Ремонт стиральных машин Казань, Зеленодольск, Верхний Услон, недорого, срочно, на дому» — классика переспама, которая режет и восприятие, и оценку материала.
Без служебных приписок. Имя компании, слоган и телефон в заголовке не нужны — для них есть шапка и мета-теги.

Ориентир простой: если убрать из формулировки слово и смысл не изменится — убирайте. Как распределять запросы по остальному материалу, разбираю отдельно — в разборе того, как писать SEO-текст без переспама.

Иерархия H1-H2-H3: как выстроить уровни

Иерархия заголовков — последовательность от общего к частному, где каждый следующий уровень раскрывает предыдущий. Так же устроена и структура печатного документа: том, часть, глава. Уровень заголовка означает глубину вложенности, а не размер шрифта и не важность фразы для продвижения.

Корректная разметка выглядит так:

<h1>Как выбрать беговые кроссовки для асфальта</h1>

  <h2>Амортизация</h2>
    <h3>Пена EVA</h3>
    <h3>Гелевые вставки</h3>

  <h2>Подбор размера</h2>
    <h3>Замер стопы дома</h3>

  <h2>Уход и срок службы</h2>

Типичная поломка — уровень пропущен, и структура рассыпается:

<h1>Как выбрать беговые кроссовки для асфальта</h1>

  <h3>Амортизация</h3>     <!-- пропущен H2 -->
  <h4>Пена EVA</h4>
  <h2>Подбор размера</h2>  <!-- уровень выше предыдущего -->

Что соблюдать при разметке:

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

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

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

С помощью заголовков читатель сканирует материал по диагонали, поисковый робот понимает, какой текст к какому блоку относится, а плагин собирает содержание. Заголовки создают карту документа — поэтому уровни важнее размера шрифта.

Пропуск уровней — самая массовая ошибка веба

Цифры из отчёта WebAIM Million за 2026 год (данные февраля 2026, миллион домашних страниц):

пропущенные уровни встретились 1 206 444 раза — каждый 25-й заголовок;
они есть на 41,8% страниц, годом раньше было 39%;
7,5% страниц не имеют разметки вообще;
в среднем на домашнюю страницу приходится 29,9 заголовков — за год их количество выросло на 20,4%.

Почти половина сайтов в мире ломает вложенность. Вывод практический: конкуренты правят такое редко, и аккуратная структура достаётся дёшево.

Девять ошибок в теге H1

Собрал те, что встречаю в аудитах чаще всего.

Тега нет вовсе. Верстальщик собрал название обычным <div> со стилями. Визуально всё на месте, семантически — материал без имени.
H1 обёрнут вокруг логотипа в шапке. Тогда во всём каталоге одна и та же формулировка — имя компании. Логотип — ссылка с картинкой, отдельный тег для заголовка ему не нужен.
Текст сделан картинкой. Красивый заголовок в макете превращается в <img> без alt. Ни поиск, ни программа чтения с экрана его не увидят.
Дубли по всему сайту. Одинаковые формулировки в десятках карточек каталога — верный способ смешать их в глазах поиска.
Выбор уровня по размеру шрифта. Ставят H1 там, где нужен крупный текст, и H3 там, где нужен мелкий. Лечится одной строкой CSS.
H1 стоит ниже второстепенных. В коде сначала идут H2 из бокового меню, потом H1 основного текста. Читателю всё равно, а структура перевёрнута.
Ссылку заворачивают в заголовок. В карточках товара и анонсах блога приём допустим и распространён, но внутри самого материала уводить читателя из главного заголовка некуда и незачем.
Простыня вместо строки. Иногда в тег заворачивают целый абзац или перечисление — чтобы «усилить» его для поиска. Использовать заголовки как обёртку для больших кусков текста нельзя: разметка называет блок, а не содержит его.

Формулировка не соответствует содержимому. Заголовок обещает «Каталог банкетных залов», а внутри форма заявки и два абзаца о компании. Несоответствие поиск видит по поведению: человек заходит и сразу возвращается в выдачу.

Отдельно про количество заголовков: несколько заголовков верхнего уровня — не смертельно, Google подтверждает. А вот пропущенные уровни и отсутствие H1 вредят реально: первое ломает навигацию, второе оставляет материал без имени.

H1 и доступность: кому ещё нужен этот тег

Аргумент, которого почти нет в SEO-статьях, а он сильнее прочих. Он же объясняет, что такое заголовок с точки зрения машины: не украшение, а элемент навигации. Также он объясняет, почему уровни нельзя пропускать.

Программы чтения с экрана (NVDA, JAWS, VoiceOver) умеют строить список всех заголовков материала и переходить между ними по клавише. Для незрячего пользователя перед нами базовый способ навигации — примерно то же, что для зрячего пробежать материал глазами.

Опрос WebAIM Screen Reader User Survey #10 (2024 год, 1 539 респондентов) даёт масштаб. На вопрос «что вы сделаете первым делом, чтобы найти информацию на длинной странице» ответы распределились так:

Способ	Доля
Навигация по заголовкам	71,6%
Поиск по тексту (Find)	13,6%
Чтение подряд	6,4%
Переход по ссылкам	4,8%
Переход по регионам	3,7%

Полезность уровней подтверждают 88,8% опрошенных: 57,0% назвали их очень полезными, ещё 31,8% — скорее полезными. Среди опытных пользователей заголовками навигируют 78%, среди новичков — 47%.

Требования зафиксированы и в стандарте доступности WCAG 2.2:

1.3.1 Info and Relationships (уровень A) — структура должна быть определима программно; техника H42 прямо предписывает размечать структуру элементами H1-H6, а не оформлять её стилями;
2.4.6 Headings and Labels (уровень AA) — «Headings and labels describe topic or purpose»: наличие заголовков критерий не требует, но если они есть, их текст обязан описывать тему;
2.4.10 Section Headings (уровень AAA) — заголовки используются для организации контента.

Автор текста о доступности обычно не думает, и зря: те же правила, которые делают контент доступным, делают его понятнее и поисковому роботу. Разметка тут одна на всех — и для человека со скринридером, и для робота, разбирающего статью на блоки.

Проверка H1: на одном адресе и по всему сайту

Проверка занимает меньше минуты и отвечает сразу на два вопроса: есть ли H1 и не размножился ли он.

Одна страница

От простого к точному:

Исходный код. Ctrl+U в браузере, затем Ctrl+F и ввод строки <h1 в поиск по коду. Счётчик совпадений покажет, сколько таких тегов в коде. Ноль — тега нет, больше единицы — дубли.
Инспектор. Правая кнопка по заголовку, «Просмотреть код» — панель подсветит, каким тегом он размечен. Так проверяют, что визуально крупная строка действительно H1, а не <div> с крупным шрифтом.
Расширения браузера. SEO META in 1 CLICK, Detailed SEO Extension и подобные показывают структуру списком: title, description и дерево от H1 до H6. Здесь же видно, где находится пропуск уровня.

Весь сайт

Поадресно проверять сотни адресов бессмысленно, нужен обход целиком.

Краулеры. Screaming Frog, Netpeak Spider, Comparser обходят сайт и выгружают таблицу: адрес, H1, длина строки, количество. Сортировка по количеству вытаскивает пустые и задвоенные, сортировка по тексту — одинаковые формулировки.
Яндекс Вебмастер. Раздел диагностики и индексируемые адреса дают срез по сайту — краулер он не заменяет, но помогает заметить массовые проблемы.
Логика проверки. Меня интересуют три выборки: без тега, с несколькими заголовками верхнего уровня и группы с одинаковым текстом. Дальше правится по шаблонам, а не поштучно: в 90% случаев причина одна и лежит в коде шаблона.

Где задаётся H1 в CMS

В большинстве движков вручную писать HTML не нужно: тег подставляет шаблон, а вы заполняете поле.

WordPress. По умолчанию имя записи выводится в шаблоне темы как H1. Проблема начинается, когда тема дополнительно оборачивает в тот же тег логотип или имя сайта — тогда их становится два. Проверяется через исходный код, чинится правкой шаблона.
1С-Битрикс. Есть отдельное свойство элемента инфоблока под заголовок первого уровня, отдельно от имени элемента. Его часто не заполняют, и движок подставляет значение по умолчанию — этот и смежные пункты собраны в чек-листе SEO-настроек 1С-Битрикс.
InSales и Joomla. Логика похожая: в карточке товара или материала есть поле имени, шаблон выводит его как H1. Если в шаблоне он обёрнут иначе, правится в коде шаблона.

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

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

Что я делаю с заголовками при потоковой генерации статей

Когда статей одна-две в месяц, всё правится руками. Когда их несколько десятков, ручная проверка перестаёт работать — проверял на собственном блоге. Разберу, что такое тег H1 с точки зрения конвейера: не отдельное поле, которое кто-то заполняет в конце, а часть плана, собранного до текста.

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

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

Коротко о главном

H1 — парный тег в теле кода, который называет материал. Он виден читателю, в отличие от мета-тегов.
Мета-тег и H1 — разные элементы: первый лежит в <head> и работает на выдачу, второй в <body> и работает на посетителя. Делайте их разными по формулировке.
Стандарт HTML разрешает несколько таких тегов, если они не вложены, но лучшей практикой называет единственный. Google подтверждает, что их число не влияет на ранжирование. Держу один — ради структуры, доступности и чистых аудитов.
Рабочая длина — 50-70 символов, одно вхождение ключевого запроса в прямом порядке слов.
Уровни H1-H6 идут без пропусков: после H1 — H2, после H2 — H3. Пропуск ломает навигацию.
Проверять — в исходном коде и краулером по всему сайту, а не в редакторе CMS.

Telegram ВКонтакте X (Twitter)

Automate SEO publishing with SEO Writer

AI writes articles, publishes to CMS, fills meta tags — without your involvement

Start for free →