Как правильно прописать тег H1

HTML-тег H1 по своей значимости можно сравнить с названием книги, фильма или даже плавсредства. «Как вы яхту назовете, так она и поплывет», — это про H1. Любому автору знакомы муки рождения заголовка: нужно как-то емко, но коротко выразить главную мысль, при этом заинтересовать будущего читателя.

Толстой, например, хотел назвать свою эпопею в духе Островского «Все хорошо, что хорошо кончается», но вовремя передумал и остановился на «Войне и мире». Вместо булгаковских «Мастера и Маргариты» мы могли бы читать роман под странным названием «Копыто инженера», а Джонатан Свифт в духе своего времени пытался впихнуть в заголовок краткое содержание книги: «Путешествия в некоторые отдаленные места мира, в четырех частях. От Лемуэля Гулливера, первого хирурга, а потом капитана нескольких кораблей».

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

H1 и структура текста

H1 и структура текста - картинка

Важный компонент SEO — грамотное прописывание HTML-тегов, передающих краулерам информацию о странице. Теги серии «H» отвечают за структуру контента. Они видны не только ботам, но и пользователям в виде заголовков и подзаголовков, поэтому к их составлению нужно отнестись с максимальным вниманием.

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

Но не только пользователи ценят структурированные тексты. Поисковики научились оценивать качество контента, и один из факторов, указывающих на хороший текст, это прописанные в HTML-коде сайта теги H1, H2, H3. Чем ниже тег в иерархии, тем меньшее влияние он оказывает на ранжирование.

Грамотный ТЗ-мейкер сразу формирует структуру, составляет иерархию заголовков, на которые впоследствии ориентируется автор.

Роль заголовка H1 для продвижения

Роль заголовка H1 для SEO-продвижения - картинка

H1 — это главный заголовок на странице. «H» — это сокращение от англ. «header» (заглавие, заголовок). Визуально он выделен наиболее крупным кеглем шрифта и находится в начале страницы над основным текстом. Какое действие выполняет тег H1 и следующие за ним теги H2–H6?

  • Играют роль визуальных маркеров, разделяющих полотно текста на смысловые части. Это облегчает чтение, поэтому улучшает поведенческие факторы —приоритетные для ранжирования в Яндексе.
  • Помогают поисковым ботам просканировать структуру текста, проанализировать семантику и правильно оценить релевантность страницы запросам пользователей.

Как заполнить тег H1 в HTML

Как заполнить тег H1 в HTML - картинка

В HTML-разметке всего 6 уровней тегов Header, где H-1 — наиболее, а H-6 — наименее значимый. Прописываются они в блоке body, в начале страницы. Все иерархические теги «H» парные, текст заголовка оборачивается тегами по формуле:

<h1>Заголовок первого уровня</h1>
Для тега H1 можно прописать универсальные атрибуты типа style, задающего стиль элемента по правилам CSS, и атрибут align, задающий выравнивание заголовка:
<h1 align="left (по левому краю) | center (по центру) | right (по правому краю) | justify (по ширине)">...</h1>

Для примера заполнения тега H1 в HTML возьмем код одной из статей нашего блога:

Пример заполнения тега H1 в HTML - скриншот

Иерархия заголовков

Иерархия заголовков - картинка

Самое сложное в тегах иерархии не нарушить уровни вложенности. В коде не может быть тега H3, если перед ним нет H2. За этим нужно следить, т.к. это наиболее популярная ошибка в структурировании. Здесь все, как в сказке «Репка»: дедка за репку, бабка за дедку, внучка за бабку, а Жучка за внучку. Нельзя поставить мышку между бабкой и дедкой — это нарушит логическую структуру.

Еще одна сложность: в нашей «Репке» каждой твари должно быть по паре. Если есть один подзаголовок второго уровня, должен быть, как минимум, второй. То есть, репа одна, а дедов, бабок и прочей живности, включая мышей, не меньше двух. Чтобы не запутаться, предлагаем наглядную схему.

H1
H2H2
H3H3H3H3
H4H4H4H4  

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

Поисковики, индексируя страницу, отдают приоритет тегам H1–H3, если в структурной части текста обнаружатся ошибки, это негативно скажется на ранжировании.

Правила составления тега H1

Правила составления тега H1 - картинка

Содержание

H1 должен отражать основную тему текста и вызывать интерес аудитории.

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

Игра слов, перифразы, оксюмороны и прочие литературные изыски не годятся для заголовков первого уровня web-документов: поисковые роботы этого не понимают. Здесь все должно быть четко, по делу и с гармонично вписанным ключом.

Длина

Длина тега заголовка H1 не должна превышать 50–60 символов. Это обусловлено тремя факторами:

  • короткий заголовок удобен для визуального восприятия: идеально, если он вписывается в одну строку на экране десктопной версии сайта;
  • поисковые алгоритмы учитывают ограниченное количество символов в теге;
  • поисковик может подтянуть содержимое тега H1 в сниппет, и, если превысить лимит в 60 символов, фразу обрежут на полуслове.

Если в 60 знаков тема статьи не умещается, можно нарушить это правило — ничего страшного не случится, но основной ключ все же лучше поставить в начало.

Взаимосвязь с Title

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

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

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

Наполнение ключами

В теге H1 нужно прописать наиболее высокочастотный запрос кластера, которому будет соответствовать контент на странице: если вы продвигаетесь по ключу «как открыть кофейню в Москве», то его и надо ставить заголовком. Главное, чтобы содержимое страницы было релевантно запросу в названии.

Допустимо изменять грамматическую форму ключевых слов в заголовке — поисковый бот не обращает внимание на число, падеж и спряжение. А вот части речи из запроса изменять не рекомендуется: для краулера одинаковые по смыслу фразы «открыть кофейню» и «открытие кофейни» — это два разных запроса, т.к. в первой глагол, а во второй, хоть и однокоренное, но существительное.

В тегах H2–H6 можно ставить низко- или среднечастотные запросы, но главное, чтобы подзаголовки отражали суть идущих за ними текстовых блоков. Если прописывать ключи во все теги иерархии, нужно избегать переспама: используйте синонимы, разбивайте фразы.

Количество заголовков H1 на сайте

Количество заголовков H1 на сайте - картинка

На вопрос, сколько может быть заголовков H1 на сайте, у официальных представителей поисковиков нет однозначного ответа. Яндекс просто говорит о соблюдении иерархии: «...следует выделять этими тегами заголовки в соответствии с иерархией документа». Вебмастер. Справка.

Google в лице Джона Мюллера считает, что несколько H1 в одном документе сайта — это не такое уж грубое нарушение, главное, чтобы иерархия не нарушалась.

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

Где не нужен H1

H1 не применяются в элементах интерфейса сайта: меню, сайдбарах, дополнительных панелях и прочих навигационных компонентах.

Визуальные особенности H1

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

Главный заголовок:

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

Чтобы изменить оформление заголовка (шрифт, кегль, цвет, фоновую картинку), нужно вносить правки в стили CSS.

Дополнительные рекомендации

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

Частые ошибки в составлении тега H1

Частые ошибки в составлении тега H1 - картинка

Казалось бы, с тем, как прописывать тег H1, никаких особых сложностей быть не должно. Тем не менее типичные ошибки при его составлении встречаются очень часто:

  • переспам или, наоборот, полное игнорирование ключей;
  • копирование Title;
  • нарушение правил русского языка;
  • слишком длинные заголовки;
  • в документе нет H1;
  • несколько главных заголовков на одну страницу;
  • нарушение иерархии;
  • изменение стиля тегов H1–H6 не в CSS, а с помощью других тегов, типа <strong> или <b>.

Как привлечь пользователя заголовком H1

Как привлечь пользователя заголовком H1 - картинка

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

Проблема — решение

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

Сравните:

  • «Как не ошибиться с выбором вуза: советы преподавателей столичных университетов» — обозначили насущную проблему, предложили авторитетное решение.
  • «Советы по выбору вуза» — нет акцента на проблеме, нет ссылки на авторитет.

Интрига

Люди любопытны, интригующий заголовок может разбудить интерес и заставить прочитать материал.

  • «Какое сливочное пиво пил Гарри Поттер? 3 рецепта из разных времен» — есть интрига и обещание полезной информации.
  • «Рецепты сливочного пива из Гарри Поттера» — стандартный заголовок без интриги.

Цифры

Цифры в заголовке — настоящий магнит для читателя, особенно, если они использованы уместно. Они всегда придают вес, структурируют информацию.

Сравните:

  • «10 лучших провинциальных вузов России» — точная цифра задает структуру текста.
  • «Лучшие вузы за пределами двух столиц» — посыл заголовка слишком размыт.

Позиционирование

Маркеры типа «для чайников», «для профи», «своими руками», «в домашних условиях» недаром так популярны — благодаря позиционированию, вы привлекаете заинтересованных пользователей, на которых рассчитан ваш контент.

  • «Кластеризация семантического ядра: полный гайд для чайников» — из названия понятно, на кого рассчитан материал статьи.
  • «Кластеризация семантического ядра» — без позиционирования тема слишком широка и требует уточнения.

Экзамен

Человек — существо азартное, его легко зацепить, кинув вызов, или взять «на слабо».

  • «Вы уверены, что правильно считаете калории? 5 главных ошибок худеющих» — есть и вызов, и цифры, и интрига.
  • «Ошибки при подсчете калорий» — скучный заголовок без искры.

Проверка H1 в коде

Проверка H1 в коде - картинка

Быстро проверить тег H1(как и любой другой) на сайте можно тремя способами:

  1. Нажмите правую клавишу мыши на исследуемом участке документа, выберите в выпадающем меню пункт «Посмотреть код», «Исследовать», «Проверить объект» — название пункта зависит от браузера. Внизу появится окно с HTML-кодом, где можно изучить свойства выбранного элемента.
  2. То же окно с кодом вызывается комбинацией Ctrl+Shift+C. В строке поиска на панели web-мастера нужно вбить h1 и, если тег прописан, он подсветится синим.
  3. Самый простой способ вызвать панель с кодом — нажать кнопку F12 на клавиатуре. Нужные теги также ищем через поисковую строку.

 

Теги H1 в CMS

Теги H1 в CMS - картинка

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

WordPress

На WordPress основной заголовок прописывается в панели редактирования записей в отдельной верхней строке. Ниже располагается окно для ввода основного текста, там есть панель инструментов для его форматирования, где можно структурировать статью с помощью заголовков 2–6 уровней. Выделите фразу, перейдите во вкладку с заголовками в панели инструментов, выберите нужный уровень. Для тех, кто знаком с Вордом и Гугл доками, процедура не вызовет вопросов.

Чтобы проверить теги в HTML, можно переключиться с текстового редактора на редактор кода.

Bitrix

В Bitrix заголовок H1 можно прописать в визуальном редакторе, так же, как это делается при форматировании в программе Word или в Гугл доках.

Менять метатеги, включая H1, можно в разделе SEO во вкладке «Управление» — «Базовый заголовок страницы (<H1>)».

Joomla

Самый простой способ прописать иерархические заголовки в Joomla — отформатировать их в текстовом редакторе движка или прописать вручную в редакторе HTML-кода в соответствии со стандартным синтаксисом тега.

Вывод

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

Грамотное составление тегов H1—H3 не только улучшает поведенческие факторы, но и сообщает дополнительную информацию поисковым системам, помогая им более точно определять релевантность страниц.

Обсудим сотрудничество?

Какие задачи нужно решить:
Разработка сайта / интернет-магазина
Продвижение (SEO, Директ и т.п.)
Контент-маркетинг
Поддержка сайта (информационная, техническая)
Аудит сайта / интернет-магазина
Консультация
Задать вопрос специалисту
Заполните форму и мы вам быстро ответим

Комментарии

Добавить комментарий

* Поля, обязательные для заполнения
Добавляйся в наши социальны сети:
Каждый день интересные материалы про маркетинг и не только.

Провести бесплатный SEO-аудит вашего сайта?

Провести бесплатный SEO-аудит вашего сайта?

Хочу бесплатный аудит
Заказ сайта
Оставить заявку
Заявка на расчет
Оставить заявку
Оставить заявку
Заказ услуги
Заказ услуги
Заказ работ
Продвижение от 10.000 рублей
Form
X
Хочу быть автором