Заголовки — найдешевший спосіб зробити текст зрозумілим і найчастіше зіпсована частина сторінки. Їх або немає взагалі, і текст іде суцільним полотном, або вони є, але зроблені стилями — просто більший і жирніший абзац. У результаті сторінка виглядає структурованою для дизайнера й залишається безструктурною для читача, скрінрідера й пошуку.
Розберемо, як влаштована ієрархія H1-H2-H3, навіщо вона насправді потрібна й як формулювати заголовки, щоб вони працювали на обидві аудиторії.
Ієрархія — це зміст сторінки
Заголовки утворюють дерево. H1 — про що сторінка загалом. H2 — великі підтеми. H3 — уточнення всередині підтеми. Якщо виписати їх підряд, має вийти зрозумілий переказ сторінки: це найпростіша перевірка структури, і провалюють її частіше, ніж здається.
Звідси і правило одного H1: питання «про що ця сторінка» має рівно одну відповідь. Технічно два H1 сайт не вбʼють, але майже завжди означають, що на сторінці змішані дві теми — а це вже проблема і для читача, і для ранжування. Так само не варто пропускати рівні заради розміру шрифту: якщо H3 виглядає доречніше, це питання стилів, а не тегів. Про безкоштовні способи відстежувати позиції сайту ми писали детально.
Люди не читають — вони сканують
Перше, що робить відвідувач, — прокручує сторінку очима, шукаючи свій фрагмент. Заголовки для нього — покажчики. Тому «Терміни» працює гірше за «Скільки триває розробка», а «Умови» — гірше за «Що входить у гарантію».
Формулювання питанням або конкретною відповіддю дає дві переваги одразу: людина за секунду знаходить потрібний абзац, а пошук бачить, що сторінка справді розкриває це питання. Це та сама логіка, за якою будується корисний текст загалом, — ми розбирали її в матеріалі про те, як написати текст для сайту.
Заголовок — це тег, а не оформлення
Дуже поширена ситуація: візуально на сторінці десять заголовків, а в коді — жодного. Усе зроблено абзацами з великим кеглем. Для дизайну різниці немає, для всього іншого — принципова.
Структура документа, побудована на тегах, використовується скрінрідерами: людина, яка не бачить екрана, переміщується сторінкою саме по заголовках. Її ж читає пошук, будуючи уявлення про сторінку. Абзац, оформлений жирним, для обох залишається просто абзацом. Ця помилка одночасно бʼє по доступності й ховає структуру від пошуку — про першу частину ми писали в матеріалі про доступність сайту.
Зворотна помилка теж трапляється: заголовками роблять елементи інтерфейсу — назви блоків, підписи, пункти меню, — і тоді структура сторінки перетворюється на кашу з двадцяти H2 ні про що.
Ключові слова в заголовках: без фанатизму
Заголовки впливають на пошук — але не тому, що це «місце для ключа». Вони показують, наскільки повно сторінка закриває тему. Сторінка з логічними H2 під реальні питання виграє в полотна тексту, бо очевидніше відповідає на запит.
Тому здоровий підхід такий: спершу сформулювати заголовок так, як спитала б людина, і лише потім перевірити, чи звучить у ньому природно потрібне слово. Якщо для цього доводиться ламати мову — краще залишити як було. Напхані ключами заголовки не додають позицій, зате псують текст. Як зібрати самі питання, під які пишуться розділи, ми показували в матеріалі про семантичне ядро.
Як перевірити заголовки на своїй сторінці
Перевірка займає пару хвилин і не потребує платних сервісів.
Спосіб для будь-кого. Скопіюйте сторінку в текстовий редактор із збереженням форматування або скористайтеся режимом читання в браузері — він показує лише заголовки й текст. Якщо в такому вигляді структура розсипається, значить заголовків насправді немає.
Спосіб точніший. У браузері відкрийте перегляд коду сторінки й пошукайте <h1, <h2, <h3. Так одразу видно, скільки їх, у якому порядку вони йдуть і чи не пропущено рівень.
Що шукати під час перевірки:
- Рівно один H1, і він відповідає темі сторінки.
- Немає стрибків через рівень — H3 не йде одразу після H1.
- Заголовками не оформлені елементи інтерфейсу: назви блоків, кнопки, підписи в шапці й футері.
- Виписані підряд заголовки читаються як зміст.
Останній пункт — найкорисніший. Якщо переказ виходить незвʼязним, проблема не в тегах, а в тому, що сторінка написана без плану.
Скільки заголовків потрібно й якої довжини
Питання, яке ставлять частіше за інші, і відповідь на нього не в цифрах, а в логіці: заголовок зʼявляється там, де починається нова підтема. Якщо на сторінці три підтеми — три H2, і додавати четвертий заради «структури» не потрібно.
Практичні орієнтири, які працюють на більшості сторінок:
- Довгий текст без жодного заголовка — майже завжди помилка: сканувати його неможливо.
- Заголовок через кожні два речення — інша крайність: структура перетворюється на список тез.
- Довжина H1 — така, щоб він цілком читався одним поглядом. Довгий заголовок майже завжди означає, що в нього намагаються вмістити кілька думок.
- H3 потрібні не завжди. Якщо всередині підтеми немає чого розділяти — не додавайте рівень штучно.
Заголовки в каталозі та картці товару
Окремий випадок, де помилки коштують найбільше, бо повторюються на сотнях сторінок одразу.
У категорії каталогу H1 — це назва категорії, а не гасло магазину. «Кухонні витяжки» краще за «Найкращі ціни на витяжки»: перше відповідає на питання «де я», друге нічого не додає.
У картці товару H1 — назва товару. Проблема виникає, коли той самий товар існує в кількох варіантах: заголовки починають відрізнятися одним словом, і сторінки стають майже однаковими. Коли варіанти взагалі варто розводити по різних сторінках — у матеріалі про варіанти товару.
У фільтрах заголовок має змінюватися разом із вибором, якщо сторінка фільтра індексується. Інакше десятки сторінок отримують один і той самий H1 — і пошук цілком обґрунтовано вважає їх дублями.
Часті помилки, які видно одразу
- Логотип обгорнутий у H1 — тоді на всіх сторінках сайту головний заголовок однаковий: назва компанії.
- H1 схований або зменшений стилями до розміру звичайного тексту заради дизайну. Технічно він є, але це очевидна спроба обійти правила, і користі не дає.
- Той самий H1 на кількох сторінках — прямий шлях до конкуренції власних сторінок між собою.
- Заголовок, що не має відношення до тексту під ним — читач втрачає довіру до всієї сторінки.
- Питання в заголовку без відповіді в наступному абзаці. Якщо H2 сформульовано питанням, відповідь має бути в першому ж реченні під ним.
H1 і title — різні речі
Останнє джерело плутанини. Title — те, що видно у вкладці браузера й у результатах пошуку. H1 — те, що видно на самій сторінці. Вони можуть збігатися, але часто не мають: у title є сенс додати місто, бренд чи уточнення для сніппета, а H1 залишити коротким і людяним.
Головне — щоб вони не суперечили одне одному: людина, яка клікнула на один заголовок у видачі, має побачити зверху сторінки те саме за змістом. Розбіжність між обіцянкою у видачі й реальністю на сторінці — одна з причин, чому люди повертаються назад. Детальніше про сам title — у матеріалі про meta title і description.
Коротко
Заголовки — це структура документа, а не оформлення: якщо виписати їх підряд, має вийти зрозумілий переказ сторінки. H1 один, бо питання «про що сторінка» має одну відповідь; два H1 зазвичай означають дві змішані теми. Формулювати H2 треба як питання читача або конкретну відповідь, а не як абстрактну назву розділу — так людина за секунду знаходить свій фрагмент. Робити заголовки жирним текстом замість тегів не можна: така сторінка залишається безструктурною для скрінрідерів і для пошуку. Ключові слова в заголовках працюють лише природні: заголовок пишеться під питання людини, а не під ключ. І не варто плутати H1 із title — вони можуть відрізнятися, але не мають суперечити одне одному. Як усе це вкладається в системну роботу з пошуком для невеликої компанії, ми розбирали в матеріалі про SEO для малого бізнесу.
Ми в Obliko розробляємо сайти під ключ із нормальною семантичною структурою сторінок — заголовками, які працюють і на читача, і на пошук, а не просто виглядають великими. Якщо у вас уже є сайт і ви не впевнені, що з його структурою, — напишіть, подивимося.
Чи має бути на сторінці рівно один H1?
Так, і причина не в правилах пошуку, а в сенсі: H1 відповідає на питання «про що ця сторінка загалом». Двох відповідей на це питання бути не може. Технічно сучасний пошук переживе й два H1 — сайт за це не покарають, — але два головні заголовки майже завжди означають, що на сторінці змішані дві різні теми, і це вже реальна проблема і для читача, і для ранжування. Тому один H1 — це наслідок ясної структури, а не самоціль.
Чи впливають заголовки на позиції в пошуку?
Впливають, але не як магічне місце для ключових слів. Заголовки показують пошуку структуру сторінки: які підтеми на ній розкриті й наскільки повно вона закриває запит. Сторінка з логічними H2 під конкретні питання виграє в сторінки, де текст суцільним полотном, — не тому, що в заголовках є ключі, а тому, що вона очевидніше відповідає на запит. Напхані ключами заголовки, навпаки, читаються неприродно й нічого не додають.
Чим заголовок відрізняється від жирного тексту?
Візуально — нічим, технічно — всім. Заголовок H2 формує структуру документа: за нею будується зміст, її читають скрінрідери, її бачить пошук. Абзац, зроблений великим і жирним через стилі, для всіх цих механізмів залишається звичайним абзацом. Тому робити заголовки оформленням замість тегів — типова помилка, яка одночасно псує доступність і ховає структуру сторінки від пошуку.
Як писати H2, щоб вони працювали?
Формулювати їх як питання читача або як конкретну відповідь, а не як абстрактну назву розділу. «Скільки триває розробка» працює краще за «Терміни», «Що входить у гарантію» — краще за «Умови». Такий заголовок допомагає людині, яка сканує сторінку очима, знайти свій фрагмент за секунду, а пошуку — зрозуміти, що сторінка справді розкриває це питання. Перевірка проста: якщо прочитати самі лише заголовки підряд, має вийти зрозумілий переказ сторінки.
Сайт є, а з пошуку не приходять?
Розберемо, за якими запитами вас реально шукають, що заважає піднятись і скільки це коштує.