H1–H6 обозначают уровни заголовков в HTML. Они помогают понять тему и вложенность разделов, а также перемещаться по странице с помощью вспомогательных технологий. Заголовок должен называть работу раздела: что здесь можно узнать, сравнить или сделать. Размер шрифта выбирают отдельно от уровня — для оформления используют стили.
Как выбрать уровень заголовка
| Уровень | Роль в обычной статье | Учебный пример |
|---|---|---|
| H1 | Главная тема страницы | Как выбрать зимние ботинки |
| H2 | Самостоятельный раздел | Подошва и сцепление |
| H3 | Вопрос внутри раздела | Что проверить при примерке |
| H4–H6 | Более глубокая вложенность, если она нужна | Уточнения внутри технической инструкции |
Количество разделов определяется материалом. Не нужно делать пять H2 ради шаблона или добавлять H4, потому что его шрифт красивее. Для обычной страницы один ясно выраженный главный заголовок — удобная редакторская структура. Но наличие второго H1 само по себе не доказывает поисковую санкцию.
W3C рекомендует логичную вложенность и описательные заголовки, чтобы читателю было проще ориентироваться. Руководство WAI по заголовкам.
Почему пропуски уровней стоит исправлять
Переход от H2 сразу к H4 затрудняет понимание вложенности: читатель ожидает промежуточный раздел. Исправьте смысловую структуру, а внешний вид сохраните через CSS.
Обратный переход не является ошибкой сам по себе. После завершения подраздела H3 можно вернуться к следующему H2 — начинается новый раздел. Важно различать начало более глубокого уровня и выход из него.
Заголовки могут быть нужны и вне основной статьи: например, у содержательных разделов боковой панели. Решение зависит от роли блока. Нельзя универсально запрещать заголовки во всех виджетах или подвале; нужно проверить, не засоряют ли они навигацию повторениями и понятна ли область страницы.
Должны ли H1 и Title отличаться
H1 — видимый главный заголовок, Title — название документа, которое может использоваться при формировании поискового результата. Они должны описывать одну тему, но могут совпадать дословно. Различать их ради большего числа вариантов запроса не обязательно.
Например, H1 «Как выбрать зимние ботинки» понятен внутри статьи. В Title можно добавить формат «критерии и пример» или название проекта, если это действительно помогает человеку. Содержание должно выполнять обещание обоих элементов.
Подробный разбор — Title и Description: правила и примеры. Ни длина H1 в заданном диапазоне символов, ни точное вхождение в каждом заголовке не являются самостоятельным критерием качества.
Как собрать структуру перед написанием
- Запишите главный вопрос страницы и ожидаемое решение читателя.
- Разложите ответ на самостоятельные части. Для инструкции это могут быть условия, действия, проверка и ошибки; для сравнения — варианты и критерии.
- Проверьте, что каждый H2 добавляет новый вопрос, а не переименовывает предыдущий.
- Вложенные вопросы поместите под соответствующий раздел. Не делайте H3 темой, которая относится сразу ко всей статье.
- Прочитайте только заголовки. Должно быть понятно, что будет объяснено и где искать нужный фрагмент.
- После текста повторите проверку: иногда раздел оказался слишком широким или не выполнил обещание заголовка.
Учебный пример: услуга с несколькими разделами
Допустим, на странице ремонта офиса заголовками H1 помечены и услуга, и «Наши цены», а блоки условий оформлены только жирным текстом. Более ясная схема:
H1 Ремонт офисов: состав работ и порядок оценки
H2 Для каких помещений подходит услуга
H2 Что входит в работу
H3 Подготовка помещения
H3 Отделка и инженерные работы
H2 От чего зависит стоимость
H2 Как согласуют объём и принимают результат
H2 Как обсудить проект
Это учебная структура, а не описание фактической услуги компании. Если инженерные работы не выполняются, такой подраздел добавлять нельзя. Заголовки должны следовать реальному составу, а не обещать больше ради полноты.
Исправление уровней делает навигацию понятнее, но по одной схеме нельзя обещать рост позиций или конверсии.
Какие ошибки искать в готовой странице
| Наблюдение | Что исправить |
|---|---|
| Заголовок обещает сравнение, под ним общий рассказ | Дать сопоставление по критериям или переименовать раздел |
| Один и тот же запрос повторяется в каждом H2 | Назвать отдельный вопрос каждого раздела |
| Крупная надпись оформлена обычным div | Если это смысловой заголовок, использовать соответствующую разметку |
| Заголовок находится только в картинке | Сделать доступный текст и проверить его семантическую роль |
| Пустые заголовки или повторяющиеся заголовки шаблона | Удалить пустые и уточнить назначение повторов |
| Все уровни выглядят одинаково | Развести визуальный вес без изменения смысловой иерархии |
Крупный div не становится для поисковика «несуществующим текстом», но он не даёт тех же семантических указаний, что элемент заголовка. Исправляйте реальную проблему разметки, не придумывая последствий, которые не измерены.
Как проверить на странице и на телефоне
Просмотрите дерево H1–H6 в браузере или инструменте проверки HTML. Затем прочитайте страницу обычным способом: виден ли главный заголовок, не дробится ли текст на слишком короткие фрагменты, понятны ли длинные заголовки на телефоне?
Для проверки доступности полезно пройти навигацию по заголовкам с помощью скринридера. Один такой проход не доказывает соответствие всему стандарту доступности, но помогает обнаружить пустые уровни, лишние повторения и потерянную вложенность.
Если смысловая структура не складывается, возвращайтесь к вопросам посетителя. Смена тега не исправит раздел, у которого нет понятной задачи.
Вопросы и ответы
Сколько H1 должно быть на странице?
Для обычной статьи или страницы услуги удобен один ясно выраженный главный заголовок. Проверяйте структуру и назначение разделов; второй H1 сам по себе не доказывает санкцию.
Обязательны ли ключи в каждом H2?
Нет. Назовите конкретный вопрос раздела естественным языком. Повтор основного запроса в каждом заголовке обычно не добавляет информации.
Можно ли после H3 поставить H2?
Да, если подраздел закончился и начинается новый раздел того же верхнего уровня. Не следует пропускать вложенные уровни только ради оформления.
Должны ли H1 и Title быть разными?
Нет. Они могут совпадать, если точно описывают страницу. Разные формулировки допустимы для удобства, а не как обязательная SEO-норма.
Добавить комментарий