Блог / Статьи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?