Иерархическая структура контента с тегами заголовков Hx

Опубликовано: 2018-01-30

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

1 Что такое заголовки?
2 Используйте важный контент в тегах заголовков Hx
3 Что Google говорит о тегах заголовков Hx?
4 Другая важная информация о заголовках контента

Что такое заголовки?

Теги заголовков используются для представления структуры контента пользователям (в том числе сканерам веб-браузеров). Существует шесть размеров заголовков — от H1 до H6 , хотя первый из них имеет наибольшее значение (это самый важный заголовок), тогда как H5 и H6 используются редко.

Поскольку теги заголовков Hx содержат текст, который (должен быть) значительно больше остального контента , это визуальная подсказка для пользователей, позволяющая им понять, что описывают абзацы под ними. Использование заголовков разного размера для представления иерархической структуры облегчает пользователям восприятие контента.

В синтаксисе HTML мы используем теги в скобках <>:

 <h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>

но на сайте они будут выглядеть, например, так (очевидно, в зависимости от таблицы стилей):

Примеры использования можно найти здесь: https://www.w3schools.com/html/html_headings.asp.

Используйте важный контент в тегах заголовков Hx

Когда почти каждый день появляются новые посты в блоге, новости, гайды или статьи экспертов, стоит привлечь пользователя не только красивой картинкой или броским заголовком, но и структурированным контентом.

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

Не только пользователи могут извлечь выгоду из хорошо структурированного веб-сайта — поисковые роботы также могут это сделать, потому что для них важен текст заголовка. Вот почему так важно, чтобы теги заголовков включали ключевые слова , которые будут связаны с контентом на странице с точки зрения темы. Если мы таргетируем конкретную страницу с определенными ключевыми словами, то их желательно поместить (даже в другой форме) в заголовках; они, естественно, могут быть помещены в текст, но в разумных пределах.

Структура должна быть четко определена, а заголовки должны отличаться друг от друга по размеру. Было бы ошибкой стилизовать их так же, как основной текст, или не различать их по степени важности.

Hx заголовки в статьях

При написании сообщений в блоге мы можем творчески использовать заголовки. Вы должны определить структуру вашей статьи перед ее началом. Заголовки могут быть кросс-заголовками, разделяющими отдельные абзацы (как в этой самой статье), а самый важный из них <h1> может использоваться для описания темы. Он часто определяется автоматически в шаблоне веб-сайта, поэтому, если это не так, стоит внести изменение, обсуждая его с экспертом по SEO и веб-разработчиком.

Хорошо продуманная структура статьи может сделать ее более привлекательной. Интересный контент, помещенный в заголовки, будет четко информировать читателей (и поисковых роботов), что им следует ожидать от данной статьи.

Какие теги заголовков разместить на главной странице сайта?

Домашние страницы (или любые другие страницы, например страницы услуг) также должны иметь иерархическую структуру заголовков. В секции <head> желательно размещать H1, ниже H2, H3 и так далее и тому подобное, хотя максимальное количество тегов заголовков не ограничено. Даже в случае H1 вам не нужно ограничивать себя одним заголовком (как объяснено ниже).

Однако нужно помнить, что такие разделы, как «О нас» или «Подробнее», вынесенные в заголовки, мало что добавляют в плане содержания. Кроме того, использование менее важных заголовков, например, H5–H6, в значительной степени бессмысленно (за исключением аспекта макета статьи).

Одностраничные веб-сайты = один тег заголовка H1?

В случае с одностраничными сайтами это не так очевидно, как для статей в блогах. В спецификациях HTML5 (https://www.w3.org/TR/2014/REC-html5-20141028/sections.html) вы можете найти тег <section> , отвечающий за определение отдельных разделов в HTML-документе. Раздел обычно включает заголовок, поэтому каждый раздел может иметь различную иерархическую структуру, например:

 <идентификатор раздела="о нас">
 <h1>Обо мне</h1>
 <p>Текст обо мне:)</p>
 <h2>Меня зовут Давид...</h2>
 <p>Второй абзац обо мне. лол :)</p>
</раздел>

<идентификатор раздела="портфолио">
 <h1>Мое портфолио</h1>
 <p>Мои последние проекты...</p>
</раздел>

<раздел>
 <h1>Отзывы</h1>
 <p>Мнения довольных клиентов...</p>
 <h2>Последние твиты</h2>
 <p>Твитнуть 1</p>
 <p>Твитнуть 2</p>
</раздел>

<раздел>
 <h1>Контакт</h1>
</раздел>

Как вы можете видеть выше, каждый раздел имеет свой заголовок H1, затем заголовок H2… Хотя вы можете решить использовать один или несколько тегов заголовков H1, а затем H2, H3 и т. д.

Что Google говорит о теге Hx?

Сотрудники Google много говорили о тегах заголовков, но стоит привести их последние мнения. Год назад Джон Меллер написал на форуме Google для веб-мастеров следующее: https://productforums.google.com/forum/#!msg/webmasters/BmyI8YX_25A/81hZNQFJDQA.

«Мы не относимся к HTML5 по-разному, и наличие нескольких тегов H1 на странице — это нормально. Будьте разумны при их использовании, используйте их там, где они имеют смысл. Определенно нет штрафа за использование H1».

Чуть позже, в апреле 2017 года, Джон весьма кратко ответил в Твиттере (https://twitter.com/JohnMu/status/852131231928135680) на вопрос, сколько заголовков H1 можно использовать на одной странице.

Наконец, в рамках серии «SEO Snippets» на YouTube на канале Google для веб-мастеров было загружено краткое руководство по этому вопросу:

Дайте Senuto попробовать Начать бесплатную пробную версию

Другая важная информация о заголовках контента

Несмотря на то, что сотрудники Google предлагают (по крайней мере, в своих официальных заявлениях) гибкий подход к тегам заголовков, есть несколько правил, которым стоит следовать:

Не злоупотребляйте заголовками на странице
Используйте заголовки там, где это имеет смысл, и когда они отражают текст под ними, чтобы помочь пользователям определить, где начинается и заканчивается данный абзац.
Не размещайте целые абзацы (все содержимое) в заголовке
Не используйте только ключевые слова, особенно в неестественной форме.
Не скрывайте заголовки в основном тексте, используя одинаковый размер шрифта для заголовка и основного текста.
Сохраняйте иерархию структуры упорядоченной
Возможно, иногда используйте тег <strong> вместо тега заголовка ????.

При создании контента не оптимизируйте ни чрезмерно, ни недооптимизируйте; вместо этого стремитесь к балансу и сосредоточьтесь на чувствах пользователей, переваривающих контент на вашем веб-сайте, включая статьи, руководства или другие сообщения в блогах. Ведь заголовки являются определяющими факторами ранжирования для поисковой системы Google, поэтому пренебрегать ими нельзя.