Что такое тег H1: зачем он нужен, длина и как правильно составлять и использовать

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

Что такое тег H1

Тег H1 — это заголовок веб-страницы, статьи или товара, который видит читатель при переходе на страницу сайта из поиска или рекламы. Заголовок располагается в верхней части страницы под хедером и кратко описывает ключевую суть предлагаемой информации.

H1 — это заголовок первого уровня, который используют для описания содержимого веб-страницы. В HTML-коде он формируется следующим образом: <h1>Текст</h1>.

А на вашем сайте техничка в порядке?

• Подарим чек-лист по внутренней оптимизации
• Проконсультируем по SEO-вопросам

Получить чек-лист

Простыми словами, H1 — это подобие названия книги. Его назначение — информировать читателя, о чём говорится на конкретной странице. В то же время заголовок должен привлекать внимание и вызывать желание читать дальше.

Зачем нужны правильные заголовки H1-H3

Теги, они же заголовки, выполняют двойную работу на сайте. Одну для пользователя, другую для поисковых систем.

Польза для посетителей сайта

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

Читать структурированный текст намного удобнее. Подзаголовки ведут читателя по содержанию, не давая устать от обилия букв. Даже при беглом просмотре, характерном для многих пользователей, заголовки цепляют взгляд, улучшают пользовательский опыт и мотивируют изучить текст внимательнее. Улучшаются поведенческие факторы, которые служат важными сигналами для ранжирования сайта в поисковой выдаче.

Польза для поисковых систем

Поисковые системы детально изучают содержимое сайта и оценивают его на соответствие запросам пользователя. Когда на сайте есть структура с последовательно прописанными тегами, поисковые роботы быстрее понимают, что за контент на сайте и какого он качества. Благодаря этому каждый поисковик, будь то Google или Яндекс, быстрее индексирует контент, лучше определяет его релевантность и подбирает целевую аудиторию.

Особенности заголовка H1

H1 содержит в себе основной посыл содержания и должен быть только один на странице.

Основные свойства тега H1:

• Включает главный интент и ключевую фразу естественно, ближе к началу, без переспама;
• уникальный для всего сайта;
• абсолютно понятный по содержанию;
• всегда начинается с новой строки;
• визуально самый крупный и может быть самым ярким по цвету.

Сколько H1 должно быть на странице в 2026 году

HTML5 допускает несколько заголовков уровня H1 внутри разных секционирующих элементов (например, внутри отдельных <section> или <article>). Однако для поисковой оптимизации и доступности рекомендуется использовать один «документный» H1 — главный заголовок страницы, отражающий её тему. Внутренние разделы начинайте с H2, далее — H3 и ниже.

Чтобы избегать путаницы для поисковых систем и пользователей, в таком случае оставьте один главный H1, а остальные понизьте до H2/H3 в соответствии с иерархией.

Какой длины может быть заголовок

Рекомендуемая длина H1 — 20–70 символов (примерно 7–12 слов): читаемо, попадает в первый экран и удобно для извлечения в сниппетах. Если заголовок получается длиннее, поставьте ключевую фразу в его начало.

Как посмотреть заголовок Н1 на странице

Проверить заголовок можно через специальный инструмент, например, браузерное расширение SEO META in 1 CLICK.

Также можно увидеть Н1 в коде сайта. Правой кнопкой мыши щелкните по любому месту страницы и в появившемся окошке выберите функцию «Посмотреть код страницы».

При переходе в код нажмите одновременно CTRL+F и введите в появившейся сверху строке «H1». Вы увидите в коде строку с выделенным ярким H1.

При написании контента полезно изучать теги конкурентов, чтобы создать более качественные заголовки для своего сайта.

5 классных SEO-кейсов

Круче, чем Гудини: как мы вырастили трафик в 2,2 раза

Все вы прекрасно знаете Гарри Гудини: этот фокусник мог выбраться из закрытой бочки, брошенной в воду. Примерно в таких же рамках оказались и мы, начиная работу с сайтом Eurorepar. Узкий функционал, жесткие требования. Но мы справились без магии, увеличив трафик х2!

Читать кейс

Читать кейс

Как выжать максимум из двадцатилетнего сайта

Можно ли выжать максимум из 20-летнего сайта и докрутить его до современных стандартов? А если есть отягчающие обстоятельства — накрутка поведенческих факторов, антиботы, да еще и админка капризничает и сама удаляет категории?

Читать кейс

Читать кейс

Долгая дорога в SEO и мощный прорыв

Наш клиент — интернет-магазин B2B промышленной тематики. Он достался нам после предыдущих подрядчиков, и первые год-два мы исправляли их ошибки. А потом началась долгая кропотливая работа, которая в итоге принесла желанный результат.

Читать кейс

Читать кейс

Qugo: вырастили трафик из блога платформы b2b в 9,7 раз!

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

Читать кейс

Читать кейс

Эффективное ссылочное продвижение для федеральной аптечной сети

Федеральная аптечная сеть пришла в Kokoc Performance (входит в Kokoc Group) за ссылочным продвижением. Интересно, что в компании есть своя in-house команда по SEO, которая подготовила ссылочную стратегию, а за ее реализацией обратилась к нам.

Читать кейс

Читать кейс

1/5

Почему H1 должен различаться с Title

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

Title создается для роботов под поисковую выдачу. Пользователь видит Title в поисковой выдаче и во вкладке браузера, но не как часть основного контента страницы. Для SEO важнее мета-тег Title, поэтому он должен быть конкретизирован дополнительными уточнениями для получения релевантного трафика.

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

На что влияет H1 на сайте

Тег имеет два фактора влияния:

1. Поисковый — сигнал для роботов о соответствии контента запросу пользователя и шанс на улучшение места в выдаче.
2. Поведенческий — убедительное название цепляет внимание пользователя и заставляет читать дальше, тем самым увеличивая процент конверсии.

Поисковый фактор влияния H1 — содержание заголовка, которое перекликается с мета-тегом Title. Таким образом, создается логичная цепочка перехода пользователя на сайт, когда человек видит то, что искал в поиске. Уменьшается число отказов.

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

Поведенческий фактор влияния H1 зачастую может быть главнее поискового, потому что его задача — вовлечение пользователя в смысл контента и получение конверсионного результата. Тут нужно обязательно использовать стили CSS, делать заголовки не только содержательными, но и красивыми, чтобы глаз цеплялся.

Можно использовать красивый шрифт, крупный размер, подобрать палитру цветов, соответствующую теме контента, сделать анимацию, если уместно. Обязательно оформить всю структуру документа в едином стиле: H1 самый крупный, H2 помельче, H3 еще мельче и так далее.

В CMS при выборе размера главного тега уже есть рекомендации по размеру, на которые стоит ориентироваться при создании структуры контента.

Корректная иерархия с одним главным H1 улучшает навигацию для скринридеров и оказывает реальную помощь пользователям с нарушениями зрения, делая контент доступнее.

Как составить правильный тег H1

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

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

Подзаголовки H2-H6 также участвуют в SEO и содержат ключевые запросы, но менее частотные, с «хвостами», для создания разделов и подразделов документа.

Тег H2 обозначает основные пункты контента, H3 раскрывает детали основного пункта. Подзаголовки H4 и ниже используются по такому же принципу.

Пример создания структуры

Возьмем за основу высокочастотный запрос “программирование для детей”. Он широко популярен среди родителей детей разных возрастов. Его сделаем H1 для страницы с курсами по программированию для детей.

Теперь нужно обозначить тегами H2 отдельные разделы документа. Это будут подзаголовки «Программирование для детей от 6 до 10 лет» и «Программирование для школьников старшего возраста».

При формировании контента нужно следить за переспамом и не ставить близко друг к другу ключевые фразы. Между подзаголовками с однотипными ключевыми фразами должен быть, как минимум, один абзац текста.

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

Подзаголовки H3 используются только внутри разделов документа, обозначенных тегом H2. В них могут быть низкочастотные запросы и/или LSI, которые описывают еще и дополнительную информацию.

Пример иерархии заголовков:

H1 «Программирование для детей» → H2 «Программирование для детей от 6 до 10 лет» → H3 «Обучение дошкольников» и H3 «Обучение школьников младших классов»

Эффективное SEO

• Гарантия результатов
• Комплексное развитие
• При любом тарифе отслеживаем динамику заявок и звонков с сайтов
• Регулярный пересмотр семантического ядра

Узнать больше

Рекомендации по созданию тегов HTML-документа

1. Заголовок H1 должен быть один.
2. Все остальные подзаголовки должны находиться в документе в соответствии с иерархией.
3. H1 должен содержать главный интент и ключевую фразу естественно, ближе к началу.
4. H2 и остальные теги могут содержать в себе основной запрос с «хвостом» или другой запрос, соответствующей содержанию раздела документа.
5. Длина заголовков рекомендуется 20–70 символов.
6. В конце заголовка точка не ставится. Исключение — если он состоит из двух предложений: после первого точка нужна, после второго — нет.
7. Контроль за переспамом обязателен. Если заголовки стоят слишком близко друг к другу, добавьте между ними абзац дополнительного текста или измените ключевую фразу в подзаголовке более низкого уровня.

Как изменить H1

H1 можно изменить в любое время, тем более если появились изменения в семантике. Также можно изменить визуал заголовка с помощью CSS.

Не вносите правки через «Просмотр кода»/инспектор: такие изменения не сохраняются. Редактируйте H1 в шаблоне или редакторе CMS.

Чтобы внести изменения, нужно произвести технические действия:

1. Открыть страницу сайта.
2. Навести курсор на H1.
3. Щелкнуть правой кнопкой мыши на функцию «Просмотр кода» — для определения местоположения тега.
4. В открывшемся окне разработчика найти подсвеченный элемент и сверить текст.
5. Откройте шаблон или редактор CMS и измените текст между тегами <h1>...</h1> в нужном месте. Визуальное оформление правьте в CSS (файл стилей темы/шаблона).

Как вставить тег H1 в популярных CMS: с примерами

У каждой CMS свои способы создания заголовков H1, а значит, и свой алгоритм действий. Рассмотрим варианты в самых популярных из них.

WordPress

В текстовом редакторе сделать следующие действия:

1. Выделить текст, который будет H1.
2. В выпадающем списке стилей выбрать «Заголовок 1» и нажать на него.
3. Опубликовать текст и убедиться, что заголовок сформировался верно.

Tilda

Заходим в настройки блока и прокручиваем вниз до пункта «SEO: ТЕГ ДЛЯ ЗАГОЛОВКА». Кликаем по нему и из выпадающего списка выбираем Н1. Готово.

1C‑Bitrix

1. Откройте шаблон компонента (например, news.detail или страницы каталога) и найдите место вывода заголовка.
2. Убедитесь, что на странице только один <h1> (проверьте, что шапка/логотип не размечены как H1).
3. При необходимости понизьте лишние заголовки до H2/H3 и сохраните изменения в шаблоне.

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

• Screaming Frog: запустите краулинг → во вкладке «H1» выгрузите отчёт → проверьте наличие H1 (фильтр Missing), а также найдите дубликаты, слишком длинные заголовки и страницы с несколькими H1.
• Netpeak Spider: просканируйте сайт → в отчёте по заголовкам отфильтруйте проблемы по тем же критериям.
• Расширения браузера (HeadingsMap, SEO Minion): быстрый просмотр структуры заголовков на конкретной странице.

Приоритезируйте исправления в таком порядке: страницы без H1 → с несколькими H1 → с дубликатами H1 → с H1 длиннее 70 символов.

Распространенные ошибки при создании H1 и пара примеров

Ошибки при формировании H1 нарушают оптимизацию веб-страницы.

1. Отсутствие H1 на странице. Поисковые роботы не видят заглавия HTML-документа и могут неверно определить основную ключевую фразу.
2. Нарушение иерархии заголовков, Н1 не в начале страницы или не один. Сбой анализа веб-страницы, может быть не считана часть содержимого. Из-за нескольких H1 страница может быть воспринята поисковыми системами как чрезмерно оптимизированная.
3. Одинаковые H1 на нескольких страницах сайта. Часть страниц выпадет из поиска как малоценные. Под выдачу будет выбрана одна страница с наибольшим весом.
4. Отсутствие ключевой фразы в теге. Риск получить нецелевую аудиторию, так как за смысл текста будет засчитан «пустой» заголовок.
5. Копирование Title. Это частый случай, который может привести к переспаму из-за близости тегов в коде сайта.
6. Длина заголовка больше 70 символов без явной причины. Краулеры и алгоритмы учитывают релевантность в пределах первых ~70 символов; ставьте ключ ближе к началу.
7. Мелкий шрифт, грамматические ошибки, точка в конце. Читатель не увидит название и не поймет куда попал. Грамматические ошибки могут придать словам другой смысл, который и считают поисковые роботы. Точка в конце — орфографическая ошибка.

Покажем эти ошибки на паре примеров.

Тег H1 отсутствует

Тегов H1 четыре штуки

Как привлечь пользователей заголовком H1

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

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

Примеры

Пример хорошего заголовка из нашего блога: ключевая фраза стоит в начале, а тема и польза статьи абсолютно понятны. По этой ссылке вы можете прочитать материал полностью.

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

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

• Тег H1 — важный элемент сайта, который должен быть абсолютно понятен аудитории и соответствовать требованиям SEO.
• Для создания H1 используйте главный интент страницы и ключевую фразу. Соблюдайте иерархию заголовков при создании контента для веб-страницы.
• Располагайте тег H1 на первом экране страницы, выделяйте крупным шрифтом, ярким цветом.
• Используйте наши рекомендации по созданию заголовков и структуры HTML-документа и повышайте конверсию своего сайта.