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

Как оптимизировать страницу с помощью html заголовка первого уровня H1? Какая должна быть его длина и сколько тегов H1 можно использовать на странице? Примеры хороших и плохих заголовков. Обо всем подробнее читайте в данной статье.

H1 — это базовый заголовок страницы первого уровня. В Html разметке существует всего 6 заголовков, показывающих важность блоков стоящих под ними. Наиболее важный заголовок H1, наименее — H6.

По-умолчанию, стили заголовков отличаются: H1 имеет наибольший размер, далее по нисходящей, соответственно, H6 — наименьший из заголовков. Визуальное отличие в отображении сделано для пользователей, которые посещают web-ресурсы. Для роботов имеет значение синтаксис.

Содержание

Синтаксис заголовка H1
Для чего нужен заголовок H1?
Особенности заголовка H1
Что писать в H1?
Размер и длина заголовка H1
Сколько заголовков H1 может быть на странице?
Проверить заголовок H1 на странице
8 ошибок при написании H1
Примеры: Хороший H1 vs Плохой H1
Пример #1
Пример #2
Как вставить тег H1 в популярных CMS?
WordPress
Bitrix
Joomla

Синтаксис заголовка H1

В Html-коде страницы заголовок H1, как правило, размещается в пределах парного тега body как можно ближе к началу страницы. Выглядит вот так:

<h1>H1 — базовый заголовок первого уровня</h1>

Пример использования тега h1 на данной странице:

H1 является парным тегом. Текст расположенный между открывающим тегом <h1> и закрывающим тегом </h1> и является заголовком первого уровня. Заголовки H2-H6 имеют аналогичный синтаксис.

Важно! Заголовки H1-H6 должны иметь иерархическую и смысловую последовательность. Заголовок третьего уровня не должен содержать в себе блок с заголовком второго уровня, также как и заголовок четвертого уровня не должен находиться внутри блока с заголовком второго уровня.

Простой пример правильной иерархической структуры заголовков:

<html>
 <head>
 <title>Популярные породы кошек в России и США</title>
 </head>
 <body>
  <h1>Породы кошек в России и США</h1>
  <p>Вступление</p>
  <h2>Породы кошек в России</h2>
  <p>Текст про породы кошек в России</p>
  <h3>Русская голубая кошка</h3>
  <p>Текст про русскую голубую кошку</p>
  <h3>Сиамская кошка</h3>
  <p>Текст про сиамскую кошку</p>
  <h2>Породы кошек в США</h2>
  <p>Текст про породы кошек в США</p>
  <h3>Мейн-кун</h3>
  <p>Текст про породу Мейн-кун</p>
 </body>
</html>

Более подробно ознакомиться c иерархией и структуризацией страницы с помощью заголовков вы можете в спецификации HTML5.

Для чего нужен заголовок H1?

Заголовки в целом нужны для правильной структуризации документа. Соблюдение структуры web-страницы необходимо как для пользователей, которые визуально воспринимают информацию на сайте, так и для роботов поисковых систем. Для первых понятная структура страницы является залогом простоты восприятия информации, для вторых заголовки и блоки под ними представляют семантическую важность.

Заголовок страницы в отличие от тега meta description виден всем пользователям сайта. H1 является смысловым обобщением содержания web-страницы.

Особенности заголовка H1

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

Что писать в H1?

Как уже говорилось ранее, H1 — это заголовок первого уровня как в визуальном плане, так и в смысловом. Базовый заголовок должен отражать содержание всей страницы, а не отдельных ее частей. H1 не должен дублировать тег title, но также как title и description должен содержать главное ключевое слово страницы. У тега H1 высокая вероятность попасть в заголовок динамического сниппета, поэтому дублирование H1 и title является плохой практикой. Вы таким образом сужаете вариативность и релевантность своего сниппета по низкочастотным запросам.

Главное требование к H1 — это релевантность содержимому страницы. Заголовок помимо наличия ключевого слова должен привлекать внимание и быть интересен пользователю. Пример корректно составленного H1:

Размер и длина заголовка H1

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

Более того, многие начинающие оптимизаторы по ошибке принимают текст самого большого размера за заголовок первого уровня, хотя зачастую это бывает не так. Вот отличный пример:

По запросу «Купить мужские джинсы» в ТОП-5 выдачи Яндекс (на момент написания статьи) присутствует один из лидеров E-commerce интернет-магазин Lamoda.ru. На скриншоте видно, что заголовок первого уровня «Мужские джинсы» гораздо меньше по размеру, чем описательный блок <div>, и другие текстовые элементы, размещенные на странице.

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

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

Сколько заголовков H1 может быть на странице?

Согласно спецификации HTML 5 количество заголовок первого уровня возможно использовать для каждого тега article или section. Яндекс в разделе представления информации о сайте не упоминает о возможном количестве использования H1, а лишь говорит о том, что должна быть соблюдена иерархия использования заголовков. Официальный представитель Google Джон Мюллер на официальном канале youtube Google Webmasters отмечает, что использование множественных заголовков H1 на одной странице не является проблемой, если это не нарушает иерархию web-документа.

Что говорит практика? На практике подавляющее большинство оптимизаторов, seo-компаний и подрядчиков использует при структуризации страниц только 1 заголовок H1. Заголовок первого уровня также не используется при оформлении элементов интерфейса: меню, сайдбары и т.д. Нет объективных исследований по влиянию количества заголовков H1 на повышение позиций сайта в выдаче или переоптимизацию ресурса, да и согласно официальным данным поисковых систем такие исследования не нужны.

Мы рекомендуем все-таки не отходить от общепринятой практики и использовать только 1 уникальный H1 заголовок на странице. В спецификацию HTML достаточно часто вносятся изменения. Для оптимального построения иерархии и структуризации страниц большинству web-проектов будет достаточно использовать первые три заголовка. Не стоит экспериментировать, так как все необходимые инструменты для создания иерархии у вас уже есть.

Проверить заголовок H1 на странице

Существует 3 простых способа проверить заголовок H1 на странице:

Кликните правой кнопкой мыши на участок текста, и в зависимости от вашего браузера нажмите кнопку «Посмотреть код» (Chrome), «Исследовать элемент» (Mozilla Firefox) или «Проверить объект» (Safari). У вас откроется панель вебмастера как на скриншоте ниже. В html коде страницы вы увидите разметку текста, и поймете какого уровня заголовок перед вами и заголовок ли это вообще.
Сочетание клавиш Ctrl+Shift+C вызывает панель вебмастера. Кликните в любое место представленного html кода. Далее нажмите сочетание клавиш Ctrl+F для поиска по содержимому кода, и вбейте в поисковую строку «h1».
Кнопка F12 вызывает панель разработчика. Поиск элемента H1 делается аналогично предыдущему способу.

8 ошибок при написании H1

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

[su_list icon=»icon: minus» icon_color=»#005a8c»]

Посторонние элементы. В H1 кроме текста не должно быть ничего. Некоторые вебмастеры думают, что они усилят заголовок, обернув его также в тег strong или b, придав ему жирное начертание, итак заложенное в стилях. Это плохая практика, старайтесь ее избегать. Не рекомендуем также чрезмерно использовать пунктуацию (знаки препинания в заголовках). Старайтесь делать их простыми и лаконичными.
Отсутствие или переизбыток ключевых слов. Из крайности в крайность. H1 — это квинтэссенция вашей семантики на странице. Ключевое слово должно присутствовать в заголовке. Отсутствие ключевых слов в главном заголовке страницы поставит под вопрос ее релевантность поисковым запросам.
Дублирование. Ошибкой является как дублирование title в H1 и наоборот, так и дублирование H1 на разные страницы сайта. H1 должен быть уникальным для всего сайта. Из 2 страниц с одинаковым контентом в выдачу попадет наиболее релевантная.
Длина. Старайтесь укладываться в 60 символов. Заголовки H1 по 300-400 символов можно увидеть на многих ресурсах, не следуйте дурному примеру. Также не стоит составлять базовый заголовок из одного слова, если это не головной раздел сайта или общая категория товаров.
Грамматика. Грамматические ошибки сводят на нет всю семантическую значимость вашего заголовка. Старайтесь не допускать ошибки в тексте, а в заголовке — тем более!
Больше одного H1. Этот вопрос мы подробнее расписали выше. С натяжкой отнесем данный пункт к ошибкам оптимизации.
Отсутствие структуры. H1 должен располагаться в начале страницы. Другие заголовки до этого тега присутствовать не должны.
Не заполнение H1. Кто-то опускает момент заполнения H1 вообще. Это грубая ошибка, которую нельзя допускать.

Примеры: Хороший H1 vs Плохой H1

Давайте рассмотрим на паре живых примеров заголовок первого уровня H1

Пример #1

[su_list icon=»icon: plus» icon_color=»#005a8c»]

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

[su_list icon=»icon: minus» icon_color=»#005a8c»]

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

Пример #2

[su_list icon=»icon: plus» icon_color=»#005a8c»]

Хороший заголовок. Лаконичный заголовок первого уровня, находится в начале страницы, характеризует категорию товаров с половой сегментацией, является ключевым словом. У H1 отсутствуют посторонние элементы в коде, грамматические ошибки, он не дублируется.

[su_list icon=»icon: minus» icon_color=»#005a8c»]

Плохой заголовок. Заголовок данного сайта расположен в шапке. Это значит, что H1 «КУПАЛЬНИКИ» дублируется абсолютно на всех страницах сайта, не отражает семантику страницы. По слову «купальники» невозможно понять, что находится на странице: интернет-магазин, блог о купальниках, размерные сетки купальников или что-то еще. В категориях появляется 2 заголовка H1. Также заголовок состоит из одного слова, и не характеризует половую сегментацию товара.

Как вставить тег H1 в популярных CMS?

В каждой системе управления сайтом есть встроенный функционал, формирующий H1 для категории, страницы или раздела. Давайте рассмотрим, как вставить заголовок первого уровня в самых популярных системах управления сайтами.

WordPress

В WordPress заголовок первого уровня формируется из текстового поля над постоянной ссылкой записи или страницы. Любую CMS можно кастомизировать на свой вкус. В случае отключения основного заголовка, есть возможность вывода H1 с помощью визуального редактора — выпадающий список со словом «Абзац».

Bitrix

В панели управления заголовок H1 по-умолчанию формируется во вкладке «Раздел» или «Элемент» в поле «Название». Либо во вкладке SEO в поле «Заголовок раздела», предварительно установив галочку «Изменить для этого раздела и его подразделов».

Joomla

В Joomla аналогично другим системам заголовок H1 формируется очень просто. Текстовое поле Title, либо выпадающий список «Paragraph».

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

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