Заголовки h1 — h6 полезные для людей и понятные для роботов

Заголовки h1 — h6 полезные для людей и понятные для роботов

Дата: 12.07.2018

Часто случается так, что при разработке сайта программисты не прописывают стили заголовков. Используют их при форматировании других элементов сайта или вовсе забывают об их существовании. Но одним из основных факторов ранжирования для поисковых систем были, есть и останутся заголовки h1 — h6.

Чтобы разработчики не забыли о заголовках, необходимо в ТЗ прописать все требования, вплоть до размеров каждого из тегов H. Об этом мы писали в нашей статье о seo-требованиях при разработке сайта.

Сегодня поговорим о том, чем отличаются заголовки h1 — h6, как их писать и какие ошибки нельзя допускать при вёрстке текста на сайте.

Зачем вообще нужны h1 — h6 в тексте?

Заголовки разбивают текст на смысловые блоки, сообщают читателю тему очередного блока. Это некий путеводитель по статье. Пользователь, в первую очередь, пробегает глазами по заголовкам и решает стоит дальше тратить время на изучение текста или нет.

Структурированный текст приятнее и удобнее читать, чем “портянку”. Убедитесь сами! Какую статью проще воспринимать?

Сравнение статей с заголовками и без

Вывод очевиден.

Польза H-тегов для пользователей понятна, а что с поисковыми системами?

Роботы ПС видят сайт иначе, но структура контента для них также важна. Из H-тегов поисковые роботы получают информацию о теме контента.

как поисковики видят заголовки

Все по полочкам — структура заголовков h1 — h6

Заголовки имеют строгую иерархию. Тег h1 является главным, теги h2 — h6 являются подзаголовками, причем каждый из них имеет свой уровень вложенности. Чтобы использовать на сайте тег <h6> необходимо чтобы перед ним были остальные теги.

Иерархию заголовков и варианты их использования схематично можно изобразить так:

Иерархия заголовков

Чаще всего используются заголовки h1 — h3, другие теги встречаются только в очень больших статьях.

Правила использования тегов h1 — h6

Бездумное применение заголовков может привести к негативным последствиям. Следуйте следующим правилам, использования тегов:

  • Соблюдайте иерархию. Тег h3 не может идти сразу после тега h1 и наоборот.
  • Не допускайте применение тегов заголовков к форматированию изображений, кнопок и других элементов сайта. Только текст, только хардкор!
  • Размеры заголовков должны отличаться друг от друга и уменьшаться в зависимости от значимости.
  • Не используйте другие акцентирующие теги (например <b>, <i>, <u>) в заголовках.
  • Заголовки должны содержать ключевые фразы, но только там, где это уместно. Не переусердствуйте с “ключевиками” иначе Баден-Баден* не за горами!
  • Используйте не более 50 символов в заголовке. Чем короче, тем понятнее.
  • Не ставьте точку в конце заголовка.

*Справка: Баден-Баден — это алгоритм поисковой системы Яндекс, который выявляет переоптимизованные страницы на сайте. В результате переоптимизованные страницы ранжируются ниже.

переоптимизированный текст

Яркий пример переоптимизированного текста :-)

Помимо основных правил использования у тега h1 есть еще несколько особенностей:

  1. Используется только 1 раз в тексте.
  2. Уникальный для каждой страницы сайта.
  3. Схож с title, но не дублирует его.
  4. Цепляет внимание пользователя и мотивирует изучать текст дальше.
  5. Минимум знаков препинания, а лучше вообще их отсутствие.
  6. Отражает суть текста (релевантен ему)

Пример релевантного заголовка

Пример релевантного заголовка. Сразу понятно о чем пойдет речь в статье

Пример хороших заголовков h1 — h3

На примере одного из наших клиентов покажем как правильно использовать теги h1 — h3.

Пример правильного использования h-тегов

На скриншоте видна четкая структура. По размеру заголовка понятна их иерархия и значимость в тексте. Из названия каждого заголовка понятно о чем пойдет речь в абзаце.

Это все,что вам нужно было знать о тегах h1 — h6. Пользуйтесь общими правилами, не забывайте о тегах при разработке сайта и вёрстке текстов и ваш контент станет интереснее для читателя и понятнее для поискового робота.

Обсудить сотрудничество