Заголовки на странице нужны не для красоты и не для того, чтобы «сделать текст покрупнее». Это каркас, по которому и поисковик, и человек понимают структуру страницы. Расставленные правильно, они помогают ранжированию и удобству. Ниже разберём, какие теги используются для заголовков, чем H1 отличается от тега title, как устроена иерархия H1–H6 и как проверить заголовки на своём сайте за пять минут.
Что такое теги заголовков в HTML
Теги заголовков это элементы HTML от h1 до h6, которыми на странице размечают заголовки разных уровней. Браузер по умолчанию показывает их крупнее обычного текста, но главное не размер, а смысл: тег сообщает, что этот текст является заголовком раздела.
«Элементы h1–h6 представляют заголовки своих разделов».
Какие теги используются для создания заголовков: только h1, h2, h3, h4, h5 и h6. Жирный шрифт, увеличенный размер или тег strong заголовком для поисковика не являются, даже если выглядят как заголовок.
<h1>Сотовый поликарбонат</h1><h2>Характеристики</h2><h3>Толщина и вес листа</h3><h2>Доставка и оплата</h2>
Что означают H1–H6
Это уровни заголовков от главного к второстепенным. Получается иерархия, как оглавление документа:
| Тег | Уровень | Что размечают |
|---|---|---|
| h1 | Заголовок первого уровня | Название всей страницы, один на странице |
| h2 | Второй | Крупные разделы страницы |
| h3 | Третий | Подразделы внутри раздела |
| h4–h6 | Четвёртый и ниже | Мелкие подпункты, на обычных страницах почти не нужны |
Какой тег используется для заголовка первого уровня: h1. Заголовки h1 и h2 есть почти на каждой странице, h3 в длинных статьях и карточках с характеристиками, до h4–h6 доходят редко: в справочниках и технической документации.
Тег title и заголовок H1: в чём разница
Тег title это заголовок страницы, который виден во вкладке браузера и в поисковой выдаче. H1 это заголовок на самой странице, который видит посетитель. Их часто путают, но это разные элементы.
| Тег title | Заголовок H1 | |
|---|---|---|
| Где виден | Вкладка браузера, выдача поисковика | На самой странице, обычно вверху |
| Где стоит в коде | В служебной части head | В тексте страницы |
| Длина | До 60–70 знаков, дальше обрезается в выдаче | Короче, чтобы читался с одного взгляда |
| Задача | Привлечь клик из поиска | Подтвердить, что человек попал туда, куда шёл |
Title и H1 могут совпадать, но лучше, когда они дополняют друг друга: в title добавляют название бренда и уточнения, в H1 оставляют суть. Как заполнить title и описание, разобрали в материале Что такое мета-теги и как их заполнить.
Зачем нужны теги заголовков
- Поисковику показывают, о чём страница и как она устроена. H1 с ключевым запросом это сильный сигнал, а H2 подсказывают, какие подтемы раскрыты.
- Читателю дают быстро просканировать страницу и найти нужное.
- Доступности: программы экранного доступа для незрячих людей ориентируются по заголовкам.
«Как пользователи читают в интернете? Никак. Люди редко читают страницы слово за словом, они их сканируют».
В том же исследовании 79% участников сканировали любую новую страницу, а не читали её. По опросу пользователей экранного доступа WebAIM (2024), 71,6% из них ищут нужную информацию на странице, переходя по заголовкам. Для обоих случаев заголовки это навигация.
Правила и частые ошибки
| Правильно | Ошибка |
|---|---|
| Один H1 на странице | Несколько H1 или H1 на логотипе |
| H1 с ключевым запросом | H1 «Добро пожаловать» |
| Логичная иерархия H2 → H3 | После H2 сразу H4, потому что так удобнее по размеру |
| Заголовок описывает раздел | Заголовки ради размера шрифта: цифры, кнопки, подписи |
| Разные заголовки разделов | Одинаковые H2 «Преимущества» на десятке страниц |
Главная мысль: заголовок это про смысл и структуру, а не про оформление. Размер текста задаётся стилями, а H-теги несут значение. Представители Google говорили, что несколько H1 на странице ранжированию не мешают, но для структуры и Яндекса надёжнее один. Это часть правильной структуры сайта и SEO-статьи.
Как писать заголовки для SEO
Заголовок раздела должен сам по себе отвечать на вопрос «о чём этот блок». Хорошо работают формулировки вопросом или «как сделать», потому что так люди ищут: «Как выбрать толщину поликарбоната», «Сколько стоит доставка». Ключевую фразу ставят в H1 и в один-два подзаголовка, не в каждый.
- Один заголовок, одна мысль. Не «Характеристики, доставка и оплата».
- Коротко. Заголовок, который не помещается в строку на телефоне, плохо сканируется.
- Без повторов. Одинаковые заголовки на разных страницах сайта путают поисковик.
Заголовки это скелет текста, а мясо в абзацах под ними: как писать сами тексты, в статье SEO-тексты: что это и как писать правильно. Иерархию заголовков удобнее всего закладывать ещё на этапе прототипа, до дизайна: подробнее в материале Прототип сайта: зачем он нужен до дизайна.
Как проверить заголовки на своём сайте за пять минут
Откройте любую страницу и посмотрите её теги заголовков: в браузере через инструменты разработчика или бесплатными расширениями, которые показывают дерево h1–h6. Три типичные находки:
- H1 нет или их два, потому что в шаблон попал заголовок блока или логотип.
- Уровни перепрыгивают: после H2 сразу H4, потому что верстальщику так было удобнее по размеру шрифта.
- В заголовки завёрнуты подписи и кнопки: цифры, призывы, подписи к фото.
Все три лечатся за один проход и заметно упрощают жизнь поисковику. На нашем сайте оглавление каждой статьи собирается автоматически из заголовков H2, поэтому ошибка в уровне сразу видна: раздел, у которого неправильный тег, просто не попадает в оглавление. Такая сборка работает как встроенная проверка структуры при каждом обновлении.
Если страниц много, теги заголовков страницы проверяют программой-краулером по всему сайту сразу, а исправления вносят в шаблоны. Эта работа входит во внутреннюю оптимизацию сайта: вместе с мета-тегами, структурой и перелинковкой. Хотите проверить, правильно ли размечены Ваши страницы? Посмотрим при аудите, первый разбор бесплатно, а исправления возьмём в рамках оптимизации структуры и заголовков сайта.
