Техническая SEO-оптимизация страниц предполагает использование целого ряда тегов и мета-тегов:,, и других. От грамотного применения этих тегов, их атрибутов и содержимого во многом зависит, правильно ли поисковая система распознает ваш контент, насколько высоко он будет ранжироваться, как будет выглядеть сниппет в поисковой выдаче, какая версия страницы будет показана пользователю.
К важным тегам для поисковой оптимизации относятся и теги заголовков. Кроме того, продуманные заголовки на странице позволяют сделать ее гораздо более удобной для пользователей, а также привлечь их внимание к нужной информации или подтолкнуть к совершению целевых действий. В этой статье рассмотрим, как использовать заголовки, чтобы «угодить» и поисковой системе, и посетителям вашего сайта или лендинга.
Немного теории
Всего в HTML существует 6 тегов заголовков – от < h1 > до < h6 > . Цифра в теге показывает относительную важность раздела, идущего после заголовка: < h1 > является наиболее значительным, тогда как < h6 > – наименее. В соответствии с этим, по умолчанию HTML отображает заголовки разных уровней шрифтами разных размеров: < h1 > будет самым крупным, а каждый последующий – немного меньше.
Теги заголовков – это блочные элементы: они всегда располагаются с новой строки; также с новой строки размещаются элементы, следующие за ними.
Как оптимизировать заголовки для SEO
Одним из самых сильных сигналов для поисковых систем является заголовок первого уровня < h1 >. Он уступает по силе тегу, однако ключевые слова, содержащиеся в нем, также оказывают сильное влияние на ранжирование.
Исходя из этого, мы в Arto Web Agency используем такой подход к составлению заголовков: употребляя ключевые слова, размещаем самые высокочастотные и важные ключи в, следующие по важности – в < h1 >. В этих двух тегах можно использовать одни и те же слова, однако, с точки зрения оптимизации лучше делать их различными: так вы сможете употребить больше ключевых слов и их синонимов.
Заголовки более низких уровней ( < h2 >,< h3 >и так далее) являются более слабыми сигналами для поискового робота. В них можно включить низкочастотные и менее важные ключевые слова. Те ключи, которые «не поместятся» в заголовки, стоит употребить непосредственно в тексте. Пример ТЗ для копирайтера с заголовками, составленными по такому принципу, вы можете увидеть ниже.
Кластер запросов, под которые нужно оптимизировать статью. Во втором столбце записана частота каждого запроса в месяц в поисковой системе Google Украина
Пример страницы из ТЗ для копирайтера со структурой заголовков статьи, составленной на основе поисковых запросов
Важно не «переспамить» заголовки ключевыми словами: желательно, чтобы в пределах одного заголовка каждое ключевое слово встречалось не более одного раза; если же контекст требует употребить его несколько раз, то лучше включать слово в разных словоформах.
Именно из-за того, что теги заголовков имеют важное семантическое значение, не стоит ими пренебрегать и оформлять в виде заголовка обычный текст при помощи стилей, как это иногда делают вебмастера. С другой стороны, не следует использовать теги < h1 > – < h6 >как элементы дизайна, например, выделять этими тегами семантически незначимые элементы страницы: например, ссылку на корзину в интернет-магазине или фразу «Наш блог» в боковой панели товарного каталога.
Следите за тем, чтобы заголовок был релевантным тексту, который следует за ним, а также читабельным и понятным для пользователей. Именно это поможет сделать контент удобнее и полезнее, а значит, и «завоевать доверие» поисковых систем. Порой можно пренебречь некоторыми ключевыми словами в пользу читабельности заголовка и перенести их в текст страницы.
Важно также, по возможности, делать заголовки цепляющими и интригующими – пользователь, прочитав заголовок, должен захотеть прочесть и следующий за ним текст. Это актуально для информационных статей; для коммерческих страниц, в особенности лендингов, заголовок также может мотивировать пользователя совершить целевое действие или ознакомиться с информацией, которая его к этому подтолкнет.
Нужна помощь по 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 > (один на всю страницу или отдельный для каждой секции). Другие заголовки применяйте тогда, когда они действительно нужны, чтобы структурировать контент.
- Используйте в заголовках ключевые слова. Чем выше уровень заголовка, тем более важные и частотные ключевые слова должны в нем фигурировать. Не злоупотребляйте ключевыми словами, чтобы избежать «переоптимизации».
- Следите за релевантностью заголовков: они должны кратко передавать то, о чем пойдет речь в тексте.
- Соблюдайте логическую последовательность тегов заголовков.
- Не используйте заголовки как элементы дизайна.
- Старайтесь делать заголовки цепляющими, чтобы привлечь пользователей.
Узнавайте о важном первыми!
Но если страница предназначена для поиска, если вы ожидаете, что люди могут прийти на нее по каким-то целевым запросам (например, это каталог, в котором собраны товары определенного вида или определенной марки), то все-таки лучше планировать дизайн так, чтобы он включал заголовок. Это сильный сигнал для поисковой системы.