Как правильно использовать элементы HTML H1-H6

Теги h1 h2 обозначают заголовки разделов. Хотя порядок и размещение заголовков в HTML DTD не ограничивается, в документе не должны пропускаться уровни (например, от H1 сразу к H3), так как преобразование таких документов в другие представления часто проблематично. W3C


Но для структурирования страниц не обязательно использовать все шесть HTML элементов.

Например:

<h1>Основы разработки сайтов<h1>
<p>Какой-либо текст</p>
<h2>HTML</h2>
<p>Какой-либо текст</p>
<h2>CSS</h2>
<p>Какой-либо текст</p>

Я всегда использую на странице только один элемент H1. Google раньше рекомендовал делать именно так.

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

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

Правильное использование элементов заголовка H1, H2, H3, H4, H5, H6

Я обычно стараюсь задействовать иерархию не ниже уровня H3, так как каждая страница представляет собой краткое изложение одной темы.

Например, здесь, здесь я живу:

<h1>Земля</h1>
<h2>Европа</h2>
<h3>Великобритания</h3>
<h4>Шотландия</h4>
<h5>Ренфрушир</h5>
<h6>Гринок</h6>

Или наоборот.

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

Вы видите, что существует несколько способов задать эти элементы. Мы рекомендуем, чтобы одна страница была по возможности посвящена одной теме, а также:

  • Чтобы на странице содержался один элемент H1;
  • Страница может содержать столько элементов H2, сколько необходимо для обозначения разделов на странице;
  • Рассмотрите возможность использования элементов H3 для групп полезных ссылок на другие релевантные источники. Но недавние рекомендации (2013 год) гласят, что лучше применять заголовки для текста, а не для группы навигации.

SEO элементов заголовков

С помощью исследований было установлено, что Google добавляет некоторый вес элементам H1 (хотя другие исследования утверждают обратное). Джон Мюллер из Google действительно заявлял, что их использование дает «небольшое повышение».

Хотя теоретически считается, что это дает «небольшое повышение», я не уверен, что заголовки H1-H6 улучшают SEO заметным образом (в Google). Я бы не помещал ключевую фразу, по которой продвигаю страницу, в каждый элемент заголовка.

Используйте <h1> для заголовка верхнего уровня

HTML тег h1— это элемент заголовка первого уровня в веб-документе:

Если документ является автономным, например, «Все, что вы хотите знать о SEO«, заголовок верхнего уровня должен быть таким же, как тайтл. Если он является частью серии, например, вводный раздел по «SEO когда-то и сейчас» набора материалов о «поисковой оптимизации«, то заголовок верхнего уровня должен содержать определенное количество дополнительного контекста:

<h1>SEO когда-то и сейчас</h1>

В то время как тайтл должен содержать определенный контекст:

<title>Все, что вы хотите знать о SEO</title>

Часто на практике элемент тайтл повторяется как H1 страницы.

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

Рассмотрите возможность использования CSS, которые разработаны, чтобы задавать размеры шрифтов соответствующих элементов, таких как H1, и т.д.

Google будет рассматривать H1, H2, H3, H4, H5 и H6, как названия для фрагментов страницы

Я провел простой тест, чтобы узнать, будет ли Google рассматривать любой тег H в качестве заголовка страницы, если по какой-то причине ему не нравится элемент тайтл.

Результат был таков: если элемент тайтл выглядит неподходящим, Google может использовать любой доступный заголовок (теги h1 h2 h3) или h6, в качестве тайтла страницы.

Приведенный ниже пример показывает, что Google использовал Н6 в качестве тайтла страницы (в 2012 году):

at-01.56.59

Этот результат сегодня выглядит так:

at-01.19.33

SEO для H1-H6: Сколько ключевых слов я могу использовать?

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

<h1>The Hobo SEO Company, Scotland</h1>

Я до сих пор в основном использую только один тег заголовка <h1> на своих продвигаемых по ключевым словам страницах. Считаю, что это способ соответствует W3C. Я располагаю его в верхней части страницы выше размеченного тега <р>. Он включает в себя ключевые слова для этой страницы.

Я использую столько тегов, сколько необходимо в зависимости от размера страницы, но я использую только h1, h2 и h3.

Сколько слов должно быть в теге H1?

Я стараюсь, чтобы длина тега h1 была максимально короткой. Аарон Уолл из SEOBook рекомендует не делать теги H1 такими же, как тайтлы страниц. Я всегда считал, что это не такая уж большая проблема, с точки зрения правильной оптимизации страницы. Но он приводит четкую причину:

Использование большего количества различных вариаций релевантных ключевых слов = больше трафика.


В 2016 году он дал дополнительные ценные советы:

Каждое дублирование в вашем страничном SEO — это в лучшем случае просто упущенные возможности. Хуже, если вы агрессивно совмещаете тайтлы страниц, заголовки страниц, и тексты анкоров внутренних и внешних ссылок. Так увеличиваются шансы, что страница попадет под фильтр и выпадет из результатов поиска.


Обеспечьте, чтобы ваши теги заголовков были релевантны контенту страницы и не были слишком спамными. В первую очередь сконцентрируйтесь на создании привлекательных текстов страниц.

Перевод статьи «How To Use H1-H6 HTML Elements Properly» был подготовлен дружной командой проекта Сайтостроение от А до Я.