Заголовки на странице помогают читателю ориентироваться в тексте, а также являются важным элементом для SEO оптимизации страницы. В этой статье вы найдете подробное руководство, как правильно заполнять заголовки, а также научитесь использовать заголовки H1, H2, H3 и т.д. для продвижения страниц.

Что такое заголовки на странице

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

То, что вы видите на примере выше, оформлено тегами <H>, что расшифровывается как “Header” (Заголовок). В коде подобное выглядит следующим образом:

H1 – это HTML-тег для заголовка первого уровня, все последующие (H2, H3 и т.д.) – подзаголовки. Как правило, используют вложенность до шестого уровня, то есть до <H6>. То, как именно текст выглядит на странице, зависит от стилей вашего шаблона, но зачастую заголовки существенно крупней основного текста и уменьшаются от H1 до H6. 

Помимо <H> существует еще один тип заголовков – <Title>. В русском языке возникает путаница, так как для “Header” и “Title” используется одинаковый термин “Заголовок”. Но “Title” является заглавием или названием страницы, и используется в браузере, а также для формирования сниппета в выдаче. Например, Title на этой странице – “Файл Robots.txt – что это и как настроить – Гвоздь – Нестандартные решения”:

Посетитель не видит заголовок “Title” на  самой странице, эта информация видна лишь в окне браузера, например:

Информация в этой статье касается только заголовков <H>, то есть текста, который виден пользователю на странице. Правила для формирования <Title> отличаются. 

Заголовки “H” используются не только в статьях, но и в других форматах на странице. Например, на лендинге вы можете использовать заголовки H для выделения основных блоков. По ним будут ориентироваться и посетители, и поисковые системы. Например, на этом экране заголовок сделан не просто стилем, а выделен тегом <H1>:

Зачем добавлять заголовки <H> на страницу

Читая эту статью, вы можете легко ориентироваться в контексте, так как все смысловые блоки разбиты заголовками. И это первая причина, зачем заполнять <H>, но не единственная.

Из заголовков можно удобно создать оглавление или структуру статьи, например:

Оглавление удобно для навигации по странице, и может помочь, в том числе с поведенческими факторами. Наличие оглавления необязательно, но, если ваш сайт преимущественно состоит из “лонгридов”, оглавление желательно. Реализовать оглавление можно и другими способами, но по названиям смысловых блоков – проще и логичней. 

Текст в теге <H> также оценивается поисковыми системами иначе, нежели обычный текст страницы. Слова, используемые в заголовках, могут выше оцениваться поисковыми ботами, а в некоторых случаях из заголовка <H> может быть сформирован сниппет.

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

Как заполнять заголовки

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

Правила заполнения <H1>

Заголовок H1 желателен на всех страницах. Это “гигиенический минимум”, как <title> и <description>. Страница без H1 может существовать, но, если у вас есть возможность добавить тег H1, то стоит это сделать. На страницах со статьями проще всего это сделать с использованием тега в названии статьи, то есть обрамить название в <H1>.

Наличие H1 – хорошо, но лучше, если заголовок составлен правильно:

• Только один на странице – не стоит делать два и более H1 на одной странице
• Не длинней 70 символов с пробелами
• Не дублирует заголовок <title>
• Главный ключ размещен максимально близко к началу
• Не состоит только из ключевых слов

Чтобы эффективно использовать заголовок вы можете отказаться от знаков препинания в конце заголовка. Но сам заголовок должен быть составлен грамматически корректно – это важно и для поисковых систем, и для читателя, так как информацию в тегах <H> читатель видит на странице. 

Правила других заголовков <H>

При заполнении тегов <H2>, <H3> и т.д. необходимо руководствоваться теми же принципами составления, но самое главное – соблюдать иерархию в использовании. Все теги <H> размещаются на странице иерархично, то есть <H1> → <H2> →  <H3> → <H4> и так далее. В иерархии можно делать “шаг назад”, то есть размещать H2 после H3, если это логически оправдано. Разберем на примере кода:

<H1>Название статьи</H1>

<p>Вступительный текст</p>

<H2>Заголовок первого блока информации</H2>

<p>Текст</p>

<H3>Подзаголовок первого блока информации</H2>

<p>Текст</p>

<H3>Второй подзаголовок первого блока информации</H2>

<p>Текст</p>

<H2>Заголовок второго блока информации</H2>

<p>Текст</p>

<H2>Заголовок заключения</H2>

<p>Текст</p>

То есть внутри блока <H1> может быть несколько <H2>, а после <H3> может идти снова <H2>, если в тексте начинается новый блок информации, иерархично “выше” чем предыдущий.

Маниакально гнаться за использованием всех ключей внутри тега <H> не стоит. Заголовок в первую очередь делается для читателя, а также раскрывает суть информации. Если у вас есть шанс органично использовать ключ – используйте, но, если ключ неуместен, можете опустить и сделать информацию соответствующей реальному содержанию текстового блока.

Как добавить заголовки на страницу

Техническая реализация максимально простая, нужный блок текста обрамляется открывающим тегом <h> и закрывающим тегом </h> соответствующим иерархии вложенности, например:

<h1>Это пример главного заголовка</h1>

Аналогичным образом вы можете добавить тег <H> в любом месте вашей страницы, включая заголовки в дизайне, если это оправдано, а не только в статьях. 

Если вы используете CMS, то добавить заголовок внутри статьи чаще всего можно с помощью визуального редактора, например, в WordPress заголовок добавляется максимально просто:

Распространенные ошибки

Добавлять заголовки на страницы – это просто, но есть ряд распространенных ошибок, которые лучше избежать:

1. Неиспользование тегов <H> – имитация заголовков другими решениями в коде, например, стилями или выделением <strong> или тегом <b>, не равноценно использованию корректного тега. Даже если страница выглядит аналогично, но отсутствие тегов <H>  затрудняет, в том числе оценку контента поисковым роботам. 
2. Выделение текста с помощью тега <H> – обратная ситуация от первой ошибки, когда теги <H> используются для выделения блока текста. Тег <H> не создан для выделения текста, он существует только для заголовков. Некоторые вебмастера используют H2 или другой уровень для выделения крупного куска текста на странице – это ошибка. Используйте “H” только для заголовков, а для выделения текста используйте стили или тег <strong>, делающий текст заметным.
3. Иерархия заголовков – важно соблюдать логику размещения, H3 должен быть “внутри” блока H2 и т.д. То есть не стоит начинать статью с заголовка H4, затем использовать H1, а сразу после H3, важно логически использовать заголовки. Использовать сразу все варианта тоже не требуется, если вам достаточно только H1 и H2 – можете на этом остановиться, делать глубокую вложенность не обязательно.
4. Заголовки у неправильных блоков – заголовки делят контент на странице на смысловые блоки, и если в статье это логично, то оформлять названия виджетов в сайдбаре или футере в тег “H” – нелогично. Зачастую эта ошибка встречается в шаблонах для WordPress, где названия технических блоков сверстаны тегами <H>, в итоге на странице со статьей есть не только заголовки из статьи, но и заголовки в дизайне (виджет, футер и т.д.) что не имеет практического смысла, а также может путать поисковых роботов.
5. Переспам ключевыми словами – несмотря на то, что заголовки полезны для SEO оптимизации, а в H1 желательно использовать основной ключ, не стоит злоупотреблять ключевыми словами. Если ключ неуместен, формируйте заголовок без него, так как главный “потребитель” этой информации – посетитель вашего сайта.

Стоит ли использовать заголовки на сайте

То, что заголовки должны быть – это бесспорно. Невозможно представить пример, когда наличие осмысленного заголовка помешало бы восприятию текста или индексации страницы. Заголовки – полезно для читателя и поискового работа, а значит и для вас, как владельца сайта.

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

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