Последнее обновление: 21 ИЮНЯ 2022 Г.
Коротко о заголовках:
Заголовки дают как вашим посетителям, так и поисковым системам важные подсказки об иерархии контента и его релевантности.
Существует шесть «уровней важности», от самого важного заголовка H1 до наименее важного H6.
Что такое заголовки?
Заголовки — это фразы в начале раздела, объясняющие, о чем он. Выше, кстати, один из них. Правильное использование заголовков на странице обеспечивает иерархию и помогает быстро показать, о чем страница. Они помогают посетителям быстро просмотреть страницу и помогают поисковым системам быстро понять структуру страницы и ее содержание.
Заголовки бывают шести уровней: от H1 до H6, из которых чаще всего используются заголовки H1, H2 и H3. Заголовки определяются в HTML-коде страницы.
Заголовок H1 часто называют «основным заголовком», а H2-H6 называют «подзаголовком», поскольку он указывает на подуровни.
Теги заголовков
Говоря о заголовках, люди часто ссылаются на «теги заголовков».
Чтобы избежать путаницы, давайте возьмем пример и посмотрим на элемент заголовка H1, как он выглядит в исходном коде HTML <h1>Это тег H1</h1>:
<h1>: открывающий тег дляH1Это тег H1: текст, который будет отображаться на экране посетителя в виде тегаH1.</h1>: закрывающий тег дляH1
Теги хэдера
Прежде всего, не путайте теги заголовков с <head>-секцией. Во-вторых, теги заголовков часто неправильно используются для обозначения заголовков.
На самом деле их можно использовать для определения заголовка документа или раздела. Это означает, что они могут быть обернуты вокруг навигации или заголовков . Использовать их необязательно, вот пример:
<html>
<head>
<title>Заголовки H1-H6 и SEO</title>
</head>
<body>
<article>
<header>
<h1>Объяснение тегов заголовков</h1>
<h2>Краткое введение в теги заголовков</h2>
</header>
</article>
</body>
</html>Зачем использовать заголовки?
Заголовки полезны как посетителям, так и поисковым системам:
- Посетители используют заголовки, чтобы быстро просмотреть страницу, чтобы определить, насколько она актуальна для них. Более того, посетители с нарушениями зрения используют программы чтения с экрана для просмотра страниц. Программы чтения с экрана полагаются на заголовки, чтобы «понимать» страницы и помогать своим пользователям перемещаться по ним.
- Поисковые системы используют заголовки, чтобы понять структуру страницы и ее темы. В то время как только небольшой фактор в алгоритмах ранжирования поисковых систем, включая ключевые слова в заголовках, действительно способствует повышению эффективности SEO. Даже если вы не согласны с тем, что заголовки являются небольшим фактором ранжирования, имейте в виду, что все, что вы делаете для улучшения взаимодействия с пользователем, обычно приводит к повышению эффективности SEO.
Заголовки и нулевая выдача
Поисковые системы могут отображать нулевую выдачу, специальные фрагменты, содержащие выдержки со страницы, в своей поисковой выдаче. Им необходимо достаточно хорошо понимать содержание, чтобы уверенно выбирать эти отрывки, и для этого они полагаются на заголовки. Таким образом, разумное и правильное использование заголовков помогает вам появляться в нулевой выдаче, что, в свою очередь, увеличивает вашу видимость в поисковой выдаче и привлекает больше органического трафика на сайт.
Вот пример нулевой выдачи:
Иерархия заголовков
Заголовки должны быть логически структурированы на странице. Страница начинается с H1, за которым следует H2 и — если вам нужен еще один подраздел — за ним может следовать H3. Если вам нужно больше подразделов, вы даже можете добавить H4-H6.
На иллюстрации ниже мы используем три уровня заголовков:
Не пропускайте уровень в иерархии. Например, не переходите от H1 сразу к H3. Между ними должно быть что-то H2 среднее.
Вот хороший пример правильного использования заголовка:
<h1>Это должно описывать тему страницы</h1>
<h2>Это подзаголовок H2</h2>
<h3>Это подзаголовок H3</h3>
<h2>Это еще один подзаголовок H2</h2>
<h3>Это еще один подзаголовок H3</h3>Если вы пишете объемный контент, вы можете использовать много заголовков. У вас может быть такая структура заголовка, как:
<h1>Это должно описывать тему страницы</h1>
<h2>Это подзаголовок H2</h2>
<h2>Это еще один подзаголовок H2</h2>
<h3>Это подзаголовок H3</h3>
<h4>Это подзаголовок H4</h4>
<h5>Это подзаголовок H5</h5>
<h6>Это подзаголовок H6</h6>
<h2>Это еще один подзаголовок H2</h2>
<h3>Это подзаголовок H3</h3>
<h4>Это подзаголовок H4</h4>
<h5>Это подзаголовок H5</h5>
<h6>Это подзаголовок H6</h6>А вот пример иерархии заголовков, которой следует избегать:
<h2>Почему этот H2 вверху?</h2>
<h4>И почему это заголовок H4?</h4>
<h1>Этот заголовок H1 должен был быть вверху</h1>
<h3>А я просто мимо проходил</h3>Размеры заголовков
Чем дальше вы опускаетесь с заголовками, тем меньше они должны становиться. H1 должен быть самым большим заголовком на странице. H2 немного меньше, чем H1, и, в свою очередь H3, меньше, чем H2 и так далее.
Например:
Порядок заголовков в исходном коде
Неважно, в каком порядке заголовки появляются в исходном коде HTML. Порядок, в котором заголовки представлены на экране посетителя (или при отображении страницы поисковыми системами), является главным.
Заголовок H1
H1 описывает основную тему страницы. Он должен быть тесно связан с содержимым страницы, уникальным на вашем сайте, и страница должна содержать только один H1.
Не размещайте H1 вокруг изображения, так как поисковые системы не понимают изображения так же хорошо, как текст. Вы упустите возможность сообщить поисковым системам, о чем страница.
<h1><img src="logo.png"></h1>Ваш заголовок H1 может совпадать с тегом Title, но это не обязательно. Посетители с гораздо большей вероятностью заметят H1, чем Title, поэтому всегда уделяйте первоочередное внимание тому, чтобы ваш заголовок был понятен вашим посетителям.
<title>Что такое заголовки H1-H6?</title>
<h1>Объяснение заголовков H1-H6</h1>Длина заголовка H1
Вы должны избегать делать H1 слишком длинным. Если вы это сделаете, существует большая вероятность того, что ваши посетители не захотят читать ваш текст, что повредит поведенческим факторам. Мы рекомендуем придерживаться максимальной длины в 60 символов, аналогично атрибуту title. Что касается минимальной длины, H1 должен иметь хотя бы минимальный смысл.
Несколько заголовков H1? Даже в HTML5
Когда HTML5 спецификация была впервые введена, была включена поддержка нескольких H1 на странице (каждый в своем собственном элементе раздела). Однако, поскольку браузеры не приняли эту рекомендацию, ее поддержка была прекращена после HTML5.1. Для получения дополнительной информации см. эту ветку W3C.
Другие варианты использования заголовка H1
Если вы не определили заголовок страницы или если поисковые системы не сочли ваш заголовок достаточно релевантным, они могут отобразить H1 страницы в результатах поисковой системы.
Подзаголовки H2-H6
H2-H6 используются для дальнейшей структуризации контента.
Большинству страниц полезно иметь по крайней мере один элемент H2, но если для посетителей это не принесет пользу, вы можете его не использовать.
Используйте H2-H6там, где это имеет смысл, и помните, что нельзя пропускать уровни заголовков.
Часто задаваемые вопросы о заголовках
Действительно ли заголовки улучшают позиции сайта?
Да, они помогают! Даже сегодня заголовки по-прежнему играют важную роль в передаче релевантности ключевых слов поисковым системам.
Хотя роль заголовков в алгоритмах поисковых систем с годами уменьшилась, они посылают поисковым системам четкий сигнал о том, о чем страница.
Могут ли Title и заголовок H1 совпадать?
Да. Но имейте в виду, что всегда следует формировать заголовок H1, наиболее подходящий для ваших посетителей.
Могу ли я иметь несколько заголовков H1 на одной странице?
Рекомендуется использовать только один заголовок H1 на странице. В HTML5 появилось несколько заголовков H1 на странице, но браузеры не поняли эту идею. Начиная с HTML5.1 поддержка нескольких заголовков H1 не поддерживается.
