Заголовки H1-H6: что это и как расставить на странице

Коротко

Что такое заголовки H1-H6

Заголовок в коде страницы - это текст, обёрнутый в тег h1, h2, h3, h4, h5 или h6. Цифра показывает уровень. По спецификации HTML h1 относится к верхнему уровню, h6 - к самому нижнему. Устройство похоже на оглавление книги: название, главы, параграфы внутри глав.

Заголовок в тексте и title - разные вещи. Title - это элемент title в служебной части страницы (head). Яндекс называет его визитной карточкой сайта в результатах поиска. Заголовки H1-H6 находятся в теле страницы, внутри текста. Как писать title, разобрано в статье про title и description.

Что говорят Яндекс и Google

Документы двух систем сформулированы по-разному, поэтому сравним их по темам.

Для Яндекса мы опирались на раздел справки Вебмастера «Представление информации на сайте». Если в нём чего-то нет, это ничего не запрещает и ничего не разрешает: выводов для Яндекса из слов Google мы не делаем.

Подходы различаются по существу. Яндекс просит размечать иерархию и объясняет это удобством читателя и робота. Google пишет, что веб в целом не соответствует правилам HTML, поэтому его поиск редко может опираться на заложенный в спецификации смысл, и порядок заголовков для него неважен. Зато порядок полезен скринридерам - программам, которые зачитывают страницу вслух слепым и слабовидящим людям. С их помощью по заголовкам переходят между разделами.

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

Нужен ли один H1

Требования «ровно один H1» в справках поисковых систем нет. Спецификация HTML допускает несколько заголовков верхнего уровня, но поощряет наличие заголовка первого уровня. W3C в руководстве по доступности тоже не ставит жёсткого правила и приводит примеры, где главный заголовок содержимого - H1.

У Google есть практический довод. Он советует сделать главный заголовок страницы отличимым от остального текста, например поместить его в первый видимый H1. Если несколько заголовков выглядят одинаково значимыми, Google может взять первый из них для заголовка ссылки в выдаче. Поэтому мы советуем один H1: он называет тему страницы и стоит первым среди заголовков содержимого.

Как расставить заголовки: по шагам

1. Сформулируйте главный вопрос страницы

   Запишите одной фразой, о чём страница и что получит читатель. Эта фраза станет H1. Суть должна быть понятна уже на первом экране браузера: так советует Яндекс в рекомендациях по оформлению страниц.

2. Составьте план из разделов

   Выпишите, из каких частей состоит ответ. Каждая часть - это H2. Хороший H2 понятен сам по себе: по нему видно, какой ответ в разделе.

3. Добавьте подразделы там, где они нужны

   Если раздел распадается на несколько частей, дайте им H3. Уровни H4-H6 нужны редко. Мы считаем, что глубокая вложенность чаще всего говорит о том, что страницу стоит разделить на две.

4. Не пропускайте уровни вглубь

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

5. Выбирайте уровень по смыслу

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

6. Прочитайте только заголовки

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

Пример структуры

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

<h1>Как выбрать пластиковые окна для квартиры</h1>
  <h2>Из чего состоит окно</h2>
    <h3>Профиль</h3>
    <h3>Стеклопакет</h3>
  <h2>Как выбрать профиль</h2>
  <h2>Как проверить установку</h2>
  <h2>Частые вопросы</h2>

Переход от h1 к h2, от h2 к h3 и возврат к h2 - допустимая структура. Переход от h2 сразу к h4 разорвал бы иерархию.

Чем H1 отличается от title

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

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

1. Откройте страницу в браузере и нажмите F12 (инструменты разработчика). В коде найдите теги h1: вы увидите, сколько их и какой текст внутри.
2. Просмотрите по очереди теги h2 и h3. Проверьте, что вложенность идёт по порядку, без прыжков вглубь.
3. Убедитесь, что заголовки видны читателю. Яндекс просит не размещать на страницах текст, который пользователи никогда не увидят. Мы считаем, что это относится и к заголовкам.
4. Если есть возможность, откройте страницу с программой чтения с экрана и перейдите по заголовкам клавишей, назначенной в программе. При логичной структуре порядок разделов будет понятен на слух.

Отдельного отчёта по заголовкам в справке Яндекса, которую мы открывали, нет, поэтому достаточно проверки кода страницы.

Частые ошибки

• Ставить тег заголовка ради крупного шрифта. Скринридер получит ложный сигнал о структуре, а Яндекс просит размечать заголовки по иерархии документа.
• Оставлять без заголовков длинную страницу: читателю труднее найти нужный раздел.
• Повторять один и тот же текст в заголовках: по оглавлению не видно, чем разделы различаются.
• Прятать заголовок от читателя стилями. Мы считаем, что это противоречит просьбе Яндекса не размещать невидимый пользователям текст.
• Раздувать число заголовков. Google пишет, что идеального числа нет, а если заголовков кажется слишком много, вероятно, так и есть.
• Делать в начале страницы несколько одинаково заметных заголовков: Google может взять первый из них для заголовка ссылки.
• Прыгать по уровням вглубь, например от H2 к H4 без промежуточного H3.

С чего продолжить

Заголовки - часть общей структуры страницы. Дальше посмотрите, как написать title и description, и прочитайте обзор SEO-продвижения: он показывает, какое место структура текста занимает среди остальных работ над сайтом.

О Head Promo

Head Promo - агентство поискового маркетинга. Подробнее об услуге - на странице SEO-продвижения на нашем сайте.

Частые вопросы