Заголовки і структура контенту

Заголовки та структура контенту — тема, де правила з чек-листів звучать суворіше, ніж є насправді. Google не публікує правил про порядок і кількість заголовків, але документує, як він використовує помітний текст сторінки для заголовка результату, і згадує заголовки як засіб навігації. Решта — стандарт HTML і рекомендації щодо доступності. У цьому уроці розведено три речі: що каже Google, що кажуть W3C і MDN та що залишається звичкою.

Спиратися будемо на опис заголовків результатів, посібник W3C із заголовків і довідник MDN щодо елементів заголовків.

Навіщо потрібні заголовки, за документацією

У вступному посібнику Google заголовки названо засобом для читача: розбивайте довгий текст на абзаци й розділи та давайте заголовки, щоб користувачам було легше орієнтуватися на сторінках. Там само сказано, що контент має бути добре написаний, легко читатися й не містити орфографічних та граматичних помилок. Це єдине пряме призначення заголовків у посібнику; ваги чи «сили сигналу» він їм не приписує.

Є й друге, непряме: заголовки — одне з кількох джерел, з яких Google збирає заголовок результату, поряд із головним візуальним заголовком та іншим великим помітним текстом. Це вже впливає на те, що бачить користувач у видачі — див. урок про title й мета-опис.

Скільки H1: три різні відповіді

На питання «скільки H1 має бути на сторінці» відповідають однією цифрою, хоча насправді три різні джерела кажуть різне.

Висновок чесний і неоднозначний: один H1 — розумний вибір, бо він позбавляє Google потреби обирати і відповідає практиці, але твердження «другий H1 — помилка, яку Google читає як нісенітницю» в документації не зустрічається. Це не штраф і не порушення.

Рівні без пропусків

Тут однозначніше, і опора — доступність, а не пошук. W3C: вкладайте заголовки за рангом; пропуск рангів може збивати з пантелику, і його слід уникати, де можливо: h2 не повинен одразу змінюватися на h4. Виняток — закриття підрозділу: h2, що починає новий розділ, може йти після h4. MDN пояснює, чому: користувачі програм читання з екрана часто швидко перестрибують від заголовка до заголовка, щоб зрозуміти вміст сторінки, а пропущений рівень лишає людину гадати, де відсутній заголовок.

Там само друге правило, яке часто порушують: не використовуйте елементи заголовків, щоб змінити розмір тексту — для цього є CSS-властивість font-size. Заголовок — це структура, а не стиль.

Помітність і розмітка мають збігатися

Єдине місце, де документація Google прямо повʼязує вигляд і сенс, — заголовок результату: він враховує головний візуальний заголовок, елементи заголовків та інший великий помітний текст. Практичний висновок для верстки: те, що для читача виглядає головним заголовком, має ним і бути в розмітці. Якщо великий текст оформлено як div, а справжній h1 прихований або дрібний, Google і читач побачать різне, і заголовок можуть підмінити. Перевірка проста: що на сторінці найбільше й перше — і чи є воно заголовком.

Семантичні теги: що відомо

Твердження «article, section, nav і main дають Google додатковий контекст» у документації Google Search не зустрічається. MDN, навпаки, відсилає до матеріалу «немає алгоритму структури документа»: вкладені розділи не перераховують рівні заголовків, тому структуру задають самі заголовки. Семантичні теги корисні для доступності й супроводу верстки; як сигнал пошуку вони не описані. Користуватися ними варто, але не обіцяючи собі ранжування.

Структура читабельного тексту

Що зі структури підтверджено документацією і в якій ролі:

• Абзаци й розділи із заголовками. Допомагають користувачам орієнтуватися.
• Відрізнюваний основний вміст. Серед питань самооцінки користувацького досвіду сторінки є питання, чи легко відвідувачам відрізнити основний вміст від решти. Заголовки — головний спосіб це забезпечити.
• Повнота й користь. Документація питає, чи дає матеріал оригінальну інформацію, дослідження чи аналіз та істотний, повний опис теми. Структура допомагає показати цю повноту, але не замінює її.
• Списки й таблиці. Їхня користь для сканувального погляду — практика; у розібраних посібниках Google про них як про сигнал немає.

Принципи тексту — в уроці про SEO-текст, розміщення слів — в уроці про ключові слова на сторінці. Що робити з унікальністю, розібрано в наступних уроках: унікальність контенту і дубльований контент. Коротко про межу: Google називає зловживанням передрук контенту з інших сайтів без додавання оригінального вмісту чи цінності.

Як перевірити структуру сторінки

1. Випишіть усі заголовки за порядком. Аналіз сторінки показує структуру H1–H3 однієї сторінки й сам позначає кілька H1; сканер сайту збирає H1 кожної сторінки, тож видно сторінки без H1 і з повторюваними.
2. Прочитайте лише заголовки. Якщо за ними зрозуміла тема й логіка тексту, структура працює. Якщо ні — проблема у змісті, а не в тегах.
3. Перевірте рівні. Чи немає стрибків на кшталт h2 → h4 і заголовків, потрібних лише для розміру шрифту.
4. Звірте головний заголовок із title. Вони не мусять збігатися, але не повинні суперечити: інакше заголовок результату можуть підмінити.
5. Перевірте читабельність. Читабельність, якість тексту та орфографія.

Чого в документації Google немає

Ці поширені твердження в документації не зустрічаються, тому як правила їх подавати не можна:

• «два H1 — структура порушена, Google читає це як нісенітницю»: Google описує лише, що за кількох рівнозначних заголовків може взяти перший;
• «H2 потрібні для LSI-ключових слів» і «H1 — один раз з основним ключовим словом» як механіка ранжування;
• «семантичні теги дають Google додатковий контекст»;
• «Google читає CSS і розуміє візуальну ієрархію»: задокументовано лише те, що помітний текст бере участь у збиранні заголовка результату;
• кейс «виправили ієрархію — сторінка почала зрозуміло розповідати про тему» як доказ.

Це не означає, що протилежне вірне. Це означає, що струнка структура — передусім зручність читача й доступність, а не важіль ранжування.

Чек-лист

1. У сторінки один зрозумілий головний заголовок, відрізнюваний і найпомітніший.
2. Рівні вкладено за рангом, без пропусків на кшталт h2 → h4.
3. Заголовки не використовуються заради розміру шрифту.
4. Текст за заголовками читається як зміст.
5. Головний заголовок узгоджений із title.
6. Довгий текст розбито на абзаци й розділи.
7. Орфографію й читабельність перевірено.

Помилки

• Великий текст у div замість заголовка, а справжній h1 дрібний або прихований.
• Заголовки h3–h4 лише заради розміру шрифту.
• Стрибки рівнів, що збивають користувачів програм читання з екрана.
• Кілька рівнозначних великих заголовків без явного головного.
• Чекати зростання позицій від семантичних тегів.
• Вважати структуру заміною змісту.

Що далі

Наступний урок — про унікальність контенту: унікальність контенту.