Блог / Статті04 грудня 2018

Як правильно використовувати та оптимізувати заголовки h1 – h6 для SEO

Технічна SEO-оптимізація сторінок передбачає використання цілої низки тегів і мета-тегів: <title>, <meta name = "description">, <link rel = "canonical"> та інших. Від грамотного застосування цих тегів, їхніх атрибутів і вмісту багато в чому залежить, чи правильно пошукова система розпізнає ваш контент, наскільки високо він ранжируватиметься, як буде виглядати сніппет у пошуковій видачі, яка версія сторінки буде показана користувачу.

До важливих тегів для пошукової оптимізації належать і теги заголовків. Крім того, продумані заголовки на сторінці дозволяють зробити її набагато зручнішою для користувачів, а також привернути їхню увагу до потрібної інформації або підштовхнути до вчинення цільових дій. У цій статті розглянемо, як використовувати заголовки, щоб «догодити» і пошуковій системі, і відвідувачам вашого сайту або лендінгу.

Трохи теорії

Усього в HTML існує 6 тегів заголовків – від <h1> до <h6>. Цифра у тегах показує відносну важливість розділу, що йде після заголовка: <h1> є найбільш значним, тоді як <h6> – найменш. Відповідно до цього, за замовчуванням HTML відображає заголовки різних рівнів шрифтами різних розмірів: <h1> буде найбільшим, а кожний наступний – трохи меншим.

Теги заголовків – це блокові елементи: вони завжди розташовуються з нового рядка; також з нового рядка розміщуються елементи, що слідують за ними.

Як оптимізувати заголовки для SEO

Одним з найсильніших сигналів для пошукових систем є заголовок першого рівня <h1>. Він поступається за силою тегу <title>, проте ключові слова, що містяться в ньому, також мають сильний вплив на ранжування.

Виходячи з цього, ми в Arto Web Agency використовуємо такий підхід до складання заголовків: вживаючи ключові слова, розміщуємо найбільш високочастотні та важливі ключі в <title>, наступні за важливістю – в <h1>. У цих двох тегах можна використовувати одні й ті самі слова, однак, з точки зору оптимізації краще робити їх різними: так ви зможете вжити більше ключових слів та їх синонімів.

Заголовки нижчих рівнів (<h2>, <h3> і так далі) є слабшими сигналами для пошукового робота. До них можна включити низькочастотні та менш важливі ключові слова. Ті ключі, які «не вмістяться» у заголовки, варто вжити безпосередньо в тексті. Приклад ТЗ для копірайтера з заголовками, складеними за таким принципом, ви можете побачити нижче.

Кластер запитів, під які потрібно оптимізувати статтю. У другому стовпчику вказана частота кожного запиту на місяць у пошуковій системі Google Україна

Приклад сторінки з ТЗ для копірайтера зі структурою заголовків статті, складеною на основі пошукових запитів

Важливо не «переспамити» заголовки ключовими словами: бажано, щоб у межах одного заголовка кожне ключове слово зустрічалося не більше одного разу; якщо ж контекст вимагає вжити його кілька разів, то краще використовувати слово у різних словоформах.

Саме через те, що теги заголовків мають важливе семантичне значення, не варто ними нехтувати і оформлювати у вигляді заголовка звичайний текст за допомогою стилів, як це іноді роблять вебмайстри. З іншого боку, не слід використовувати теги <h1> – <h6> як елементи дизайну, наприклад, виділяти цими тегами семантично незначущі елементи сторінки: такі, як посилання на кошик в інтернет-магазині або фразу «Наш блог» в бічній панелі товарного каталогу.

Слідкуйте за тим, щоб заголовок був релевантним тексту, який слідує за ним, а також читабельним і зрозумілим для користувачів. Саме це допоможе зробити контент зручнішим і кориснішим, а відповідно, і «завоювати довіру» пошукових систем. Часом можна знехтувати деякими ключовими словами на користь читабельності заголовка і перенести їх до тексту сторінки.

Важливо також, за можливістю, робити так, щоб заголовки чіпляли і інтригували – користувач, прочитавши заголовок, повинен захотіти прочитати і текст, що йде за ним. Це актуально для інформаційних статей; для комерційних сторінок, особливо лендінгів, заголовок також може мотивувати користувача зробити цільову дію або ознайомитися з інформацією, яка підштовхне його до цього.

Потрібна допомога по SEO?

Ми в Arto готові допомогти! Наше агентство надає послуги SEO-аудиту, консультацій і просування сайтів як молодого бізнесу, так і великих компаній. Наш підхід – максимальна відкритість і відповідальність. Якщо у вас є запит на пошукову оптимізацію, зв'яжіться з нами, натиснувши на кнопку нижче.

Логічна послідовність заголовків

Розміщуючи заголовки на сторінці, варто стежити за тим, щоб вони розташовувалися у правильній ієрархічній послідовності. Згідно зі стандартами HTML4, заголовок першого рівня на сторінці повинен бути тільки один (це правило може порушуватися в HTML5, про що поговоримо нижче). Всередині тексту, позначеного заголовком <h1>, може бути кілька розділів, кожен з яких починається з заголовка <h2>; у свою чергу, кожен з них може бути розбитий на підрозділи заголовками <h3> і так далі. При цьому деякі з розділів можуть і не мати підрозділів. Ось так, наприклад, буде виглядати правильна логічна структура заголовків:

А так – невірна:

Заголовки третього рівня зустрічаються рідше, ніж другого: для невеликої статті обсягом до 5000 символів зазвичай цілком можна обійтися тегами <h1> і <h2>. Заголовки четвертого і нижче рівнів використовуються нечасто. Вони можуть мати сенс для текстів великого об'єму і складної структури – наприклад, юридичної або технічної документації, але такі документи часто буде зручніше завантажити на сайт у форматі PDF, а не виділяти для них окрему HTML-сторінку.

Аудит заголовків

Для швидкої перевірки заголовків на всьому сайті можна скористатися Screaming Frog SEO Spider або іншим додатком для SEO-аудиту. Після перевірки ви зможете побачити сторінки, де заголовки першого рівня відсутні або дублюються, занадто довгі заголовки та ін.

Для перевірки структури заголовків на окремо взятій сторінці зручно використовувати браузерне розширення HeadingsMap: воно показує, заголовки яких рівнів присутні на сторінці, який текст вони містять, і автоматично будує дерево їх ієрархії.

Приклад відображення структури сторінки в HeadingsMap

Окрім правильної послідовності тегів <h1> – <h6>, варто пам'ятати і про те, щоб розмір шрифту відповідав важливості заголовка. Погодьтеся, якщо на сторінці є, наприклад, три рівні заголовків, то її структура вже й так досить складна; якщо ж раптом виявиться, що заголовок третього рівня за допомогою стилів відображений більшим шрифтом, ніж другого рівня, то користувач легко заплутається в тексті.

Теги заголовків і HTML5

У стандарті HTML5 були введені нові семантичні елементи: <section>, <article> та інші. Використання цих елементів дозволяє розміщувати всередині кожного з них свою ієрархію заголовків; тобто, на сторінці тепер може з’являтися більше одного заголовка <h1>. Це може бути зручно, наприклад, для стрічки блогу, де загальним заголовком першого рівня для сторінки буде, наприклад, «Наш блог», а заголовками окремих секцій – назви статей. З іншого боку, можна зберегти загальну структуру заголовків для всієї сторінки. Тобто, прийнятними будуть обидва варіанти:

Представники Google також стверджують, що у використанні декількох заголовків <h1> на сторінці немає нічого поганого: пошукова система коректно розпізнає таку розмітку.

Таким чином, підсумовуючи сказане, можна виділити декілька головних порад.

  • Завжди використовуйте на сторінці заголовок першого рівня <h1> (один на всю сторінку або окремий для кожної секції). Інші заголовки застосовуйте тоді, коли вони дійсно потрібні, щоб структурувати контент.
  • Використовуйте в заголовках ключові слова. Чим вищий рівень заголовка, тим більш важливі та частотні ключові слова повинні в ньому фігурувати. Не зловживайте ключовими словами, щоб уникнути «переоптімізаціі».
  • Слідкуйте за релевантністю заголовків: вони повинні коротко передавати те, про що йтиметься у тексті.
  • Дотримуйтесь логічної послідовності тегів заголовків.
  • Не використовуйте заголовки як елементи дизайну.
  • Намагайтеся створювати заголовки, що чіпляють, щоб привабити користувачів.
Микола Ашпін
SEO, редактор блогу
Займаюсь копірайтингом з 2014 року, SEO – з 2017. Цікавлюся сучасними тенденціями інтернет-маркетингу та пошукової оптимізації, а також можливостями інструменту Google My Business, досвідом використання якого ділюся на семінарах та конференціях. Якщо у вас є питання щодо цієї статті, будь ласка, напишіть на пошту nikolay@arto.agency.

Дізнавайтеся про важливе першими!

Навчальні матеріали, важливі новини, огляди. Ми пишемо вам тоді, коли дійсно є що сказати
КОМЕНТАРІ
КОМЕНТУВАТИ
УВІЙТИ
  • Facebook
  • Twitter
МИХАИЛ
24 липня 2020, 19:34
Это все здорово и понятно. Но как быть в случае если страница, дизайном или логикой, не предусматривает заголовок ? Допустим это каталог или страница privacypolicy или т.п. Но при этом каждый тест ругается на то что страницы не содержат

НИКОЛАЙ АШПИН
25 липня 2020, 17:35
Добрый день! Спасибо за ваш комментарий. Если это служебная страница (privacy policy, условия пользования сайтом, форма отправки сообщения об ошибке), то есть не предназначенная для SEO (пользователи вряд ли попадут на нее из поисковиков), то заголовка на ней может и не быть. В таком случае результаты тестов можно игнорировать.

Но если страница предназначена для поиска, если вы ожидаете, что люди могут прийти на нее по каким-то целевым запросам (например, это каталог, в котором собраны товары определенного вида или определенной марки), то все-таки лучше планировать дизайн так, чтобы он включал заголовок. Это сильный сигнал для поисковой системы.
ЦЕЙ САЙТ ВИКОРИСТОВУЄ COOKIES
Ми використовуємо cookies для аналізу трафіку, забезпечення функцій соціальних мереж і роботи системи коментування на сайті. Список встановлюваних cookies знаходиться на цій сторінці. Чи згодні ви на установку cookie?