Заголовки — найдешевший спосіб зробити текст зрозумілим і найчастіше зіпсована частина сторінки. Їх або немає взагалі, і текст іде суцільним полотном, або вони є, але зроблені стилями — просто більший і жирніший абзац. У результаті сторінка виглядає структурованою для дизайнера й залишається безструктурною для читача, скрінрідера й пошуку.
Розберемо, як влаштована ієрархія H1-H2-H3, навіщо вона насправді потрібна й як формулювати заголовки, щоб вони працювали на обидві аудиторії.
Ієрархія — це зміст сторінки
Заголовки утворюють дерево. H1 — про що сторінка загалом. H2 — великі підтеми. H3 — уточнення всередині підтеми. Якщо виписати їх підряд, має вийти зрозумілий переказ сторінки: це найпростіша перевірка структури, і провалюють її частіше, ніж здається.
Звідси і правило одного H1: питання «про що ця сторінка» має рівно одну відповідь. Технічно два H1 сайт не вб'ють, але майже завжди означають, що на сторінці змішані дві теми — а це вже проблема і для читача, і для ранжування. Так само не варто пропускати рівні заради розміру шрифту: якщо H3 виглядає доречніше, це питання стилів, а не тегів.
Люди не читають — вони сканують
Перше, що робить відвідувач, — прокручує сторінку очима, шукаючи свій фрагмент. Заголовки для нього — покажчики. Тому «Терміни» працює гірше за «Скільки триває розробка», а «Умови» — гірше за «Що входить у гарантію».
Формулювання питанням або конкретною відповіддю дає дві переваги одразу: людина за секунду знаходить потрібний абзац, а пошук бачить, що сторінка справді розкриває це питання. Це та сама логіка, за якою будується корисний текст загалом, — ми розбирали її в матеріалі про те, як написати текст для сайту.
Заголовок — це тег, а не оформлення
Дуже поширена ситуація: візуально на сторінці десять заголовків, а в коді — жодного. Усе зроблено абзацами з великим кеглем. Для дизайну різниці немає, для всього іншого — принципова.
Структура документа, побудована на тегах, використовується скрінрідерами: людина, яка не бачить екрана, переміщується сторінкою саме по заголовках. Її ж читає пошук, будуючи уявлення про сторінку. Абзац, оформлений жирним, для обох залишається просто абзацом. Ця помилка одночасно б'є по доступності й ховає структуру від пошуку — про першу частину ми писали в матеріалі про доступність сайту.
Зворотна помилка теж трапляється: заголовками роблять елементи інтерфейсу — назви блоків, підписи, пункти меню, — і тоді структура сторінки перетворюється на кашу з двадцяти H2 ні про що.
Ключові слова в заголовках: без фанатизму
Заголовки впливають на пошук — але не тому, що це «місце для ключа». Вони показують, наскільки повно сторінка закриває тему. Сторінка з логічними 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, щоб вони працювали?
Формулювати їх як питання читача або як конкретну відповідь, а не як абстрактну назву розділу. «Скільки триває розробка» працює краще за «Терміни», «Що входить у гарантію» — краще за «Умови». Такий заголовок допомагає людині, яка сканує сторінку очима, знайти свій фрагмент за секунду, а пошуку — зрозуміти, що сторінка справді розкриває це питання. Перевірка проста: якщо прочитати самі лише заголовки підряд, має вийти зрозумілий переказ сторінки.
Потрібен сайт або застосунок?
Розробляємо під ключ — від дизайну до запуску. Порахуємо ваш проєкт безкоштовно.