Анализ структуры заголовков H1–H6

Список пуст

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

Как пользоваться

1. Вставьте адрес страницы и нажмите «Загрузить». Сервер заберёт страницу вашим выбранным обозревателем и вытащит из неё заголовки и title — открывать код руками не нужно.

2. Посмотрите на верхнюю плашку: она сравнивает title и H1. Разные тексты — это норма, дословный повтор — повод переписать один из двух.

3. Прочитайте дерево слева и таблицу справа. В таблице видно длину каждого заголовка и сколько слов идёт под ним до следующего заголовка.

4. Правьте сверху вниз: сначала число H1, потом пропуски уровней, потом заголовки длиннее 70 символов и разделы короче 40 слов.

5. Пустые и спрятанные заголовки помечены в обоих режимах. Заголовки через role="heading" тоже: во вставленном коде они стоят на своём месте, а по адресу — в конце списка с пометкой «вне порядка», потому что сервер отдаёт их отдельно.

6. Готовое забирайте файлом: «Таблица CSV» — для отчёта, «Оглавление MD» — готовый список со ссылками на якоря.

Разбор примера: статья про выбор велосипеда

Исходные данные — те же, что стоят в полях по умолчанию: их можно пересчитать в уме и убедиться, что инструмент не врёт.

• title «Как выбрать велосипед — мастерская «Спица»», H1 «Как выбрать велосипед»
• H2 «Рама», внутри H3 «Размер»
• H2 «Колёса», сразу под ним H4 «Спицы»
• H2 «Тормоза», внутри H3 «Уход за тросами» с текстом в три слова

1. Всего заголовков семь: один H1, три H2, два H3, один H4.

2. H1 ровно один и стоит первым. С title он не совпадает дословно — это нормально: title длиннее и несёт название мастерской.

3. После «Колёса» на втором уровне идут «Спицы» на четвёртом: третий уровень пропущен, строка помечена.

4. У «Ухода за тросами» под заголовком три слова — раздел помечен как короткий: заголовок тут скорее оформление, чем раздел.

5. Если вписать в поле ключевую фразу «выбрать велосипед», сводка покажет, что в H1 она есть, а в H2 не встречается ни разу.

Два замечания: прыжок с H2 на H4 у «Спиц» и раздел в три слова у «Ухода за тросами». Остальное ровно — счётчики показывают 7 заголовков и один H1.

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

• Что именно уходит на сервер?

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

• Видно ли по адресу пустые и спрятанные заголовки?

  Да. Сервер отдаёт заголовок без текста наравне с остальными и помечает те, что спрятаны через hidden, display:none, visibility:hidden или aria-hidden. Он же считает слова между соседними заголовками, поэтому объём раздела виден и по адресу. Одного он не видит: заголовков, которые дорисовывает скрипт уже в браузере — в разметке, которую отдаёт сайт, их просто нет. Такие найдутся, если скопировать код из панели разработчика и вставить его во вторую вкладку.

• Сколько H1 должно быть на странице?

  HTML разрешает несколько, браузер и валидатор не возразят. Но H1 отвечает на вопрос «о чём эта страница», а ответ на него один. Два H1 — обычно признак того, что в шаблон попал и заголовок статьи, и название сайта.

• Пропущенный уровень — это ошибка?

  Для валидатора HTML — нет, код останется правильным. Для человека с экранным диктором — да: он ходит по заголовкам как по оглавлению, и дыра в нумерации сбивает представление о том, что чему подчинено.

• Откуда взялись пороги 70 символов и 40 слов?

  Это не правила поисковых систем, а границы читаемости, на которые сходятся инструменты разбора. Заголовок длиннее 70 символов перестаёт быть строкой оглавления и превращается в предложение. Раздел короче 40 слов — обычно признак того, что заголовок поставили ради оформления, а не ради раздела. Оба порога — повод посмотреть, а не обязанность править.

• Считаются ли заголовки, сделанные через role="heading"?

  Да, в обоих режимах. Для экранного диктора элемент с role="heading" и aria-level — такой же заголовок, как h2, и в дереве он помечен. Разница в месте: во вставленном коде он стоит там, где стоит в разметке, а по адресу сервер отдаёт такие заголовки отдельным списком, без места в документе — поэтому они идут в конце с пометкой «вне порядка» и в счёте пропущенных уровней не участвуют. Заголовки внутри hgroup после первого считаются подзаголовками и в проверке уровней тоже не участвуют: это подпись к соседнему заголовку, а не отдельный раздел.

• В дерево попали заголовки шапки и подвала

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

• Заголовки влияют на позиции в поиске?

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