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