Проверка заголовков H1 и вложенности подзаголовков

Проверка заголовков H1 и вложенности подзаголовков
Анатолий Кузнецов
Анатолий Кузнецов
SEO-оптимизатор с 20-летним стажем. Автор блога seo-prodvizhenie-biznesa.ru о продвижении и доработке сайтов.

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

Что именно проверяют в заголовках

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

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

Содержимое H1. Заголовок должен содержать основную фразу и читаться как название документа, а не слоган. Массово ловят три беды: H1 совпадает с H1 других страниц (карточки, фильтры, пагинация), H1 из одного слова, H1 с названием компании на всех страницах. Отношения H1 и метатега разбирались в материале title и h1 одинаковые или разные.

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

Наличие текста в заголовке. Заголовок, внутри которого лежит только картинка без атрибута alt, для робота пуст. То же с текстом, спрятанным через CSS.

Соответствие заголовка разделу. Если под H2 «Стоимость» нет ни одной цифры, заголовки перестают работать как навигация и вырезать по ним фрагмент под запрос нельзя.

Как выгрузить все заголовки сайта разом

Ручной просмотр кода годится для трёх страниц. Для сайта нужна выгрузка: список всех адресов с колонками H1-1, H1-2, H2-1, H2-2. Только на такой таблице видно, что дефект шаблонный.

Главная ловушка сбора — рендеринг. Краулер по умолчанию читает исходный HTML, отданный сервером. Если заголовки дорисовывает скрипт (типично для конструкторов и одностраничников на фреймворках), в выгрузке они пустые, а в браузере видны. Встречается и обратное: скрипт заменяет H2 на H1 после загрузки. Поэтому первый прогон делают в обычном режиме, второй — с исполнением JavaScript. Расхождение двух выгрузок и есть список страниц, где заголовки существуют только для пользователя.

Способ сбора Что даёт Ограничение
Десктопный краулер (Screaming Frog, Netpeak Spider, SiteAnalyzer) Адрес, H1 и его дубли, все H2, длина, фильтры «отсутствует», «дубликат», «более одного» Бесплатные версии ограничены по числу адресов; JS-рендеринг замедляет обход
Консоль браузера на одной странице Мгновенная проверка шаблона после отработки скриптов Одна страница за раз, выгрузить в таблицу нельзя
Расширения-визуализаторы (HeadingsMap, Web Developer) Дерево заголовков поверх страницы, пропуски уровней видно глазом Только открытая вкладка, для массового аудита не годится
Аудит доступности (Lighthouse, axe) Подсвечивает нарушенный порядок уровней и пустые заголовки Дубликаты H1 между страницами не увидит
Свой скрипт по карте сайта Любые правила проверки, запуск по расписанию Нужен разработчик, не видит то, что рисует браузер

Для быстрой проверки шаблона в консоли браузера достаточно перечислить заголовки по порядку: document.querySelectorAll('h1,h2,h3,h4,h5,h6') и вывести имя тега с текстом. Список покажет число H1, порядок уровней и заголовки без текста. Проверять стоит по одному представителю каждого шаблона: главная, раздел, карточка, статья, фильтр, пагинация, поиск, страница 404. Восьми адресов хватает, а выгрузка краулером покажет тираж дефектов. Такой прогон входит в технический аудит сайта.

Два H1 на странице: откуда берётся второй

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

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

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

Что делать. Спецификация HTML5 допускает несколько H1 в разных секциях, и сайт не выпадет из индекса из-за второго. Но алгоритм построения структуры документа по секциям браузерами и программами экранного доступа так и не реализован, поэтому на практике несколько H1 дают один эффект: размывают тему страницы. Логотип возвращают в обычный тег, заголовки виджетов опускают до H2 или H3 — правку делают в шаблоне, иначе дефект вернётся с обновлением темы. Последствия таких изменений разобраны в материале Может ли изменение тегов H1 или H2 навредить SEO.

Пропущенные уровни вложенности

Пропуск уровня выглядит так: H1, затем H2, затем сразу H4. Или H1 и сразу H3. В вёрстке это почти всегда следствие подбора шрифта: H3 показался крупным, H4 — в самый раз, взяли H4.

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

Обратный дефект реже, но хуже: внутри раздела H2 идут подпункты H3, а потом появляется ещё один H2, по смыслу тоже подпункт. Робот считает, что старый раздел закончился, и относит остаток текста к новой теме. На длинных статьях видно сразу: оглавление, собранное скриптом по заголовкам, разъезжается.

Правило простое: уровень вниз — только на одну ступень, уровень вверх — на сколько угодно. После H4 может идти H2, это нормальное закрытие вложенного блока. А вот после H2 сразу H4 идти не должно. Если H3 крупноват, его правят в стилях, а не подменяют тегом. Как выстраивать материал целиком — Как структурировать статью на сайте.

Заголовок-картинка без текста

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

Разновидности того же дефекта:

  • Текст заголовка вынесен в фоновое изображение через стили, в разметке остался пустой тег.
  • Текст внутри заголовка выведен за пределы экрана приёмом для программ экранного доступа, а видимую надпись рисует картинка. Робот читает одно, пользователь видит другое; расхождение текстов — повод для претензий.
  • Заголовок собран из букв-спанов с анимацией: текст разорван служебными элементами, при склейке получается строка с лишними пробелами.
  • Внутри заголовка стоит SVG с текстом. Формально текст есть, но лежит в графическом элементе, и рассчитывать, что его учтут как заголовок, не стоит.

Как искать: отфильтровать в выгрузке строки с пустым H1 и сверить с браузером. Заголовок виден в браузере, а в выгрузке пусто — это ровно тот случай. Исправление одно: настоящий текст в теге, оформление — стилями и веб-шрифтом. Если картинка принципиальна, ей прописывают alt, дословно повторяющий надпись. Общие принципы собраны в материале Оптимизация заголовков h1-h6.

Когда H2 ставят вместо абзаца ради размера шрифта

Отдельный класс ошибок: заголовочный тег используется как средство оформления. Контент-менеджер хочет выделить важную мысль, в редакторе есть кнопки «Заголовок 2» и «Заголовок 3» — и на странице появляется десяток H2, каждый из которых на деле обычное предложение.

В выгрузке это видно так: у страницы двадцать пять H2, многие длиной за 120 знаков, с точкой в конце и грамматикой предложения. Заголовок так не выглядит — он назывной, короткий, без точки.

Чем вредно. Робот воспринимает заголовки как оглавление документа. Если в нём двадцать пять пунктов и ни один не является темой раздела, вес заголовков как сигнала размазывается. Дополнительно ломается блок с прямым ответом: система опирается на пару «заголовок-вопрос плюс абзац под ним», а тут вместо вопроса середина рассуждения.

Обратная крайность: страница на десять тысяч знаков без единого H2. Робот получает сплошное полотно, не может выделить фрагмент под запрос, и страница ранжируется по одной общей теме, теряя длинный хвост. Разумная плотность — заголовок раздела каждые 1200–2000 знаков.

Что делать: выделение внутри текста — это strong, врезка, цитата, элемент списка, но не заголовок. Правило проверки: выпишите текст всех H2 подряд. Внятное оглавление — всё хорошо; бессвязный набор фраз — теги расставлены под шрифт.

Как заголовки влияют на попадание в быстрые ответы

Блок с прямым ответом наверху выдачи собирается автоматически: система ищет на документе кусок, который отвечает на запрос целиком, и вырезает его. Заголовки здесь — основной способ разметить, где такой кусок начинается и заканчивается.

Работает это так. Запрос формулируется вопросом («как проверить количество h1 на сайте»). Алгоритм ищет страницы с заголовком, близким к вопросу, и берёт текст сразу под ним. Чем точнее заголовок повторяет вопрос и чем компактнее ответ в первом абзаце, тем выше шанс, что вырежут ваш фрагмент. Отсюда следствия.

  • Формулируйте вопросами те H2, где ответ реально умещается в два-три предложения. Не все подряд.
  • Первый абзац под заголовком-вопросом должен быть самодостаточным ответом на 40–60 слов, без отсылок вроде «как мы говорили выше»: вырезанный фрагмент читают отдельно от страницы.
  • Если ответ списочный или табличный, ставьте список или таблицу сразу под заголовком — такие фрагменты забираются целиком.
  • Пропуск уровня мешает: при неоднозначном дереве непонятно, где кончается раздел, и система заберёт обрывок или не заберёт ничего.
  • Раздел частых вопросов работает лучше, когда каждый вопрос — отдельный заголовок, а не пункт списка.

Полностью управлять этим блоком нельзя, гарантий никто не даёт, и попадание меняется от переформулировки запроса. Но структура заголовков — рычаг, который целиком в ваших руках. Механика блока разобрана в материале Быстрые ответы Яндекс.

Что править в первую очередь, а что не трогать

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

Дефект Как обнаружить Приоритет Что делать
H1 отсутствует или пустой Фильтр «Missing» по колонке H1 Высокий Добавить в шаблон, текст — из названия страницы с основной фразой
H1 занят логотипом в шапке Первый H1 одинаковый на всех адресах выгрузки Высокий Заменить тег в шапке, H1 оставить контенту
H1 внутри картинки без alt Пустой H1 при видимом заголовке в браузере Высокий Текст в тег, оформление веб-шрифтом; картинке прописать alt
Одинаковый H1 на массиве страниц Фильтр «Duplicate» по колонке H1 Высокий Подстановка названия и уточнения в шаблоне
Несколько H1 из виджетов и слайдера Заполненные колонки H1-2, H1-3 Средний Опустить заголовки блоков до H2 или H3
Пропущен уровень (H2 сразу к H4) Замечание о порядке заголовков в аудите доступности Средний Перевесить уровни, размер править стилями
H2 вместо абзаца ради шрифта Больше 15 H2, длина за 120 знаков, точка в конце Средний Вернуть абзацы, оставить 6–10 настоящих разделов
H1 длиннее 70 знаков или равен title Фильтр по длине, сравнение колонок Низкий Править только там, где заголовок нечитаем

Чего делать не нужно. Не впихивайте в H1 три ключевые фразы через запятую — на текстовые фильтры это работает быстрее, чем на позиции. Не меняйте H1 на страницах, которые уже держат первую-вторую позицию. Не тратьте время на H4-H6, пока не решены проблемы уровнем выше. И не переписывайте заголовки на страницах, закрытых от индексации или ведущих на 301.

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

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

Сколько H1 должно быть на странице? Один. Спецификация HTML5 допускает несколько H1 в разных секциях, и санкций за второй H1 нет, но практической пользы тоже нет: тема документа размывается, а механизм построения структуры по секциям браузерами не реализован.

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

Пропуск уровня — ошибка или рекомендация? Валидатор HTML ошибкой это не считает, разметка остаётся валидной. Замечание выносят проверки доступности и SEO-краулеры. Считайте дефектом качества: напрямую не наказывается, но снижает точность разбора страницы.

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

Считаются ли заголовки внутри скрытых вкладок и аккордеонов? Да, если текст есть в исходном коде и скрыт только стилями, хотя вес такого содержимого ниже. Если же содержимое вкладки подгружается по клику, в исходном коде его нет и учитывать нечего.

Сколько H2 считается нормой? Столько, сколько в тексте реальных смысловых разделов. Для материала на 12 тысяч знаков это обычно 8–10 заголовков. Двадцать пять H2 почти всегда означают, что тегом выделяли крупный шрифт.

Коротко

  • Проверяйте пять вещей: число H1, содержимое H1, последовательность уровней, наличие текста внутри заголовка и соответствие заголовка разделу. Остальное вторично.
  • Собирайте заголовки выгрузкой краулера в двух режимах — со скриптами и без. Расхождение показывает страницы, где заголовки есть только для пользователя.
  • Два H1 почти всегда приходят из шаблона: логотип, слайдер, виджет похожих товаров, всплывающая форма. Правят шаблон, а не отдельные страницы.
  • Пропуск уровня вниз через ступень ломает дерево документа. Размер шрифта правят стилями, а не подменой тега.
  • Заголовок, внутри которого только картинка без alt, для робота пуст. Ищется фильтром пустых H1 в выгрузке.
  • Попадание в блок с прямым ответом строится на паре «заголовок-вопрос плюс короткий самодостаточный абзац». Пропуски уровней и H2 вместо абзацев это ломают.

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

Увеличьте позиции и продажи вашего сайта

Профессиональное SEO-продвижение с гарантией результата. Выберите подходящую услугу:

Анатолий Кузнецов — SEO-оптимизатор

Остались вопросы по продвижению?

Меня зовут Анатолий Кузнецов, я SEO-оптимизатор с 20-летним стажем. Разберу ваш сайт, отвечу на вопросы и подскажу, что улучшить для роста позиций в Яндексе и Google.

Связаться со мной →

Комментарии

Ефрем Полторацкий

Прогнал краулером интернет-магазин, в колонке H1 у всех 14 тысяч карточек стоит название магазина, а настоящий заголовок товара уехал в H2. Тема покупная, в шаблон карточки лезть страшно. Насколько это критично на самом деле?

Анатолий Кузнецов автор

Критично, и вот почему. У вас 14 тысяч страниц с абсолютно одинаковым главным заголовком — для робота это 14 тысяч документов на одну и ту же тему, а различает он их только по title и тексту. Название товара, ради которого страница вообще существует, при этом задвинуто на второй уровень. Чинится это не переписыванием карточек, а одной правкой в шаблоне: тег логотипа в шапке меняете на обычный, а тегу с названием товара поднимаете уровень до H1. В покупной теме такое делают через дочернюю тему, иначе правка слетит при первом же обновлении. После выката проверьте пять случайных карточек краулером и отправьте раздел на переобход — эффект по низкочастотным запросам появляется после того, как робот заново прочитает страницы, а не в день правки.

Виринея Ошуркова

У нас на лендинге заголовки нарисованы дизайнером картинками, шрифт фирменный и в вебе его нет. Alt прописали. Этого достаточно или всё равно надо переделывать?

Анатолий Кузнецов автор

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

Лаврентий Бердников

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

Злата Чигринова

В выгрузке Screaming Frog половина страниц без H1, а в браузере заголовки есть. Сайт на Vue. Это тот случай с рендерингом?

Анатолий Кузнецов автор

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

Панкрат Вешняков

А заголовки в скрытых вкладках и аккордеонах вообще учитываются? У нас в них лежит половина описания услуги.

Каролина Жихарева

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

Анатолий Кузнецов автор

Читается лучше не от тега, а от того, что мысли разделены визуально, и этого можно добиться врезками, списками и подзаголовками нужного уровня. Простая проверка, которая обычно закрывает спор: выпишите текст всех 31 заголовков подряд и прочитайте получившееся отдельно от статьи. Если это внятное оглавление — вопросов нет. Если получился поток случайных фраз с точками на конце, значит тегом выделяли шрифт. Практический ориентир для длинного материала — раздел каждые полторы-две тысячи знаков, то есть 8–10 заголовков на статью в 12 тысяч. Всё, что нужно подчеркнуть внутри раздела, оформляется полужирным начертанием, врезкой или элементом списка. Заодно у статьи появится нормальное оглавление, потому что скрипты собирают его как раз по заголовкам.

Савелий Кряквин

Правильно понимаю, что после H4 можно сразу ставить H2 и это не ошибка? Верстальщик спорит, говорит уровни должны идти строго по порядку в обе стороны.

Аграфена Тюлькина

Собрала список из 800 адресов с дублями H1. Это страницы фильтров каталога. Переписывать вручную нереально. Есть вариант проще?

Наум Сыромятов

Поменяли H1 на всех посадочных две недели назад, позиции просели на 4-6 пунктов. Откатывать или ждать?

Анатолий Кузнецов автор

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

Ираида Плешакова

Хочу попасть в блок с прямым ответом по вопросным запросам. Достаточно оформить раздел частых вопросов списком или обязательно каждый вопрос отдельным заголовком?

Ярослава Ундольская

В теме WordPress виджет похожих записей выводит названия в H1. Отключить виджет жалко, он даёт переходы. Что делать?

Родион Барсуков

Есть ли смысл вообще заниматься H4-H6 или это уже перфекционизм?

Прокрутить вверх