- трохи теорії
- Як оптимізувати заголовки для SEO
- Логічна послідовність заголовків
- аудит заголовків
- Теги заголовків і HTML5
Технічна 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> як елементи дизайну, наприклад, виділяти цими тегами семантично незначущі елементи сторінки: наприклад, посилання на кошик в інтернет-магазині або фразу «Наш блог» в бічній панелі товарного каталогу.
Слідкуйте за тим, щоб заголовок був релевантним текстом, який слід за ним, а також читабельним і зрозумілим для користувачів. Саме це допоможе зробити контент зручніше і корисніше, а значить, і «завоювати довіру» пошукових систем. Часом можна знехтувати деякими ключовими словами на користь читабельності заголовка і перенести їх в текст сторінки.
Важливо також, по можливості, робити заголовки чіпляти і інтригуючими - користувач, прочитавши заголовок, повинен захотіти прочитати і наступний за ним текст. Це актуально для інформаційних статей; для комерційних сторінок заголовок також може мотивувати користувача зробити цільове дію або ознайомитися з інформацією, яка його до цього підштовхне.
Логічна послідовність заголовків
Розміщуючи заголовки на сторінці, варто стежити за тим, щоб вони розташовувалися в правильній ієрархічної послідовності. Згідно зі стандартами 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> (один на всю сторінку або окремий для кожної секції). Інші заголовки застосовуйте тоді, коли вони дійсно потрібні, щоб структурувати контент.
- Використовуйте в заголовках ключові слова. Чим вище рівень заголовка, тим більш важливі і частотні ключові слова повинні в ньому фігурувати. Не зловживайте ключовими словами, щоб уникнути «переоптімізаціі».
- Слідкуйте за релевантністю заголовків: вони повинні коротко передавати те, про що піде мова в тексті.
- Дотримуйтесь логічну послідовність тегів заголовків.
- Не використовуйте заголовки як елементи дизайну.
- Намагайтеся робити заголовки чіпляти, щоб залучити користувачів.
