Заголовки h1-h6: как правильно прописать

Теги h1 — h6 служат для обозначения заголовков, которые выстраиваются в соответствующую иерархию по степени значимости. HTML элемент <h1> имеет наивысший приоритет, в то время как <h6> соответствует наименее важному уровню.

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

Разбиение текстового контента на логические блоки с использованием заголовков различных уровней является одним из ключевых аспектов грамотной разметки документа на языке HTML.

Для чего нужны

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

То есть, основное предназначение заголовков — привлечение внимания пользователя.

Но нельзя забывать и о том, что благодаря заголовкам, SEO-специалист и вебмастер создает грамотную иерархию, структуру контента на странице, удобство для потребления контента, что напрямую влияет на SEO-оптимизацию ресурса.

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

Заголовки в статье

Визуально, заголовки в теле документа выглядят следующим образом:

Как выглядит размер заголовков h1-h6 в статье

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

Заголовки в коде

Просматривая документ в формате HTML, такого явного визуального различия между заголовками нет. Выглядит разметка так:

Как выглядят заголовки h1-h6 в коде

Более наглядный пример в коде:

Пример h1 в коде

Тут все понятно и логично: каждый заголовок задается соответствующим HTML-тегом своего уровня.

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

Оформляя страницу сайта, нужно обязательно использовать заголовки. Но делать это нужно логично и обдуманно. Существует строгий порядок расположения тегов h1-h6 в теле документа.

Каждая страница начинается с заголовка h1. Он всегда идет первым и единственным, более не повторяясь в структуре статьи.

Например, на моем сайте на странице с консультацией по SEO он выглядит вот так:

Пример заголовка h1 на сайте

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

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

В моем примере, все на той же странице с моей консультацией по SEO видно, что я для заголовка блока с триггерами использую h2, а для заголовков самих триггеров h3.

Пример заголовков h2 и h3 на сайте

Заголовок h3 используется внутри текста, обозначенного заголовком h2, разделяя контент на дополнительные смысловые разделы.

Важно! Не рекомендуется использовать заголовок низшего уровня, если вы не использовали в статье заголовок высшего уровня. То есть не рекомендуется использовать заголовок h4, если в вашей статье нет заголовка h3. Это не будет грубой ошибкой, но SEO кроется в совокупности таких мелочах. Поэтому лучше следовать этому правилу верстки заголовков.

Как правило, заголовок h4 является крайним в иерархии статьи и используется редко. То есть, можно сказать, что заголовки h5 и h6 не используются вовсе. Но это не значит, что их нельзя использовать. Если есть необходимость, то стоит вспомнить и про них.

Главное — нужно заботиться об удобстве восприятия материала пользователем и поисковых систем.

Для примера приведу правильную иерархию статьи:

Пример иерархии заголовков

Почему h1 самый главный

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

Он является главным, так как именно по нему пользователь судит о содержании статьи и принимает решение, читать ее или нет.

Для того, чтобы составить хороший заголовок h1, который будет передавать суть документа, нужно понимать, чем h1 отличается от title и знать основные требования к его составлению.

Почему h1 должен различаться с Title

Title также является основным заголовком документа, но указывается он не только для посетителей сайта, но и для поисковых роботов. Увидеть title можно на странице поисковой выдачи или во вкладке браузера с открытой страницей сайта. Он может отличаться от H1 и прописывается в специальном мета-теге <title>.

Отображение title в выдаче Яндекс

Заголовок H1 тоже может показываться в выдаче вместо title, если поисковая система его посчитает более полезным для пользователя, чем ваш прописанный title.

Поэтому по-хорошему Title и H1 должны отличаться, потому что у них разная цель.

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

Во вторых. Заголовок h1 указывает поисковым системам на то, что контент, расположенный на этой странице, соответствует вписанному в нее заголовку title, ранее изученному пользователем на странице поисковой выдачи.

А основная задача title — это быть оптимизированным под поисковые запросы.

Самое по себе одинаковый title и h1 не считается за спам. И в некоторых тематиках это оправдано, потому что сложно сделать эти теги разными.

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

Требования к h1

  • Нужно стараться делать заголовок h1 кратким, но в то же время максимально информативным. В идеале не более 5-7 слов.
  • Заголовок h1 не рекомендуется повторять на одной и той же странице несколько раз. Главное правило: одна страница — один заголовок h1.
  • Заголовок размещается вверху всего документа.
  • Перед заголовком h1 не рекомендуется использовать менее приоритетный заголовки h2, h3 и т.д.

Существует негласное мнение, что длина заголовка h1 не должна превышать 50 символов. Но не критично, если этот предел будет превышен. Все индивидуально и зависит от содержимого страницы.

В заголовке h1, как и в title, рекомендуется использовать ключевые слова. Если получается сделать это в точном вхождении запроса — замечательно. Если такой возможности нет, то запрос можно разбавить. Главное, чтобы заголовок был читабельным и понятным для пользователя.

Как сделать заголовок цепляющим

Прежде всего нужно понимать, что человек ищет не какой-либо конкретный товар или услугу, а решение своей проблемы. И заголовок должен быть направлен именно на это.

Существуют множество приемов составления привлекательного заголовка. Рассмотрим некоторые из них.

Решаем проблему пользователя

Например, можно написать два разных заголовка:

  • «Болит голова? Избавьтесь от головной боли за месяц!»
  • «Можно ли избавиться от головной боли?»

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

Интригуем посетителя

Опять, для примера два варианта заголовков:

  • «Делимся самым эффективным методом лечения головной боли!»
  • «Хороший метод лечения головной боли!»

Первый заголовок будет более привлекательным для посетителя.

Метод «экзамена»

Данный способ составления заголовков провоцирует пользователя открыть статью, с целью проверки собственных знаний. Например:

  • «Вы точно знаете, что правильно боретесь с головной болью?»
  • «Все ли вам известно о борьбе с головной болью.»

Первый вариант опять более удачный, нежели второй.

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

Как использовать заголовки h2-h6

  • Необходимо понимать, что наименьший заголовок не рекомендуется использовать в тексте, в котором нет большего заголовка. Например, если в документе прописан заголовок h3, то перед ним рекомендуется поставить заголовок h2.
  • Чем выше приоритетность заголовка, тем больше должен быть размер его шрифта. Во всех известных CMS эта функция, как правило, реализована по умолчанию.
  • Каждый заголовок должен быть емким и информативным, отображающим основную суть материала, последующего за ним.
  • Не нужно спамить в заголовках ключевыми словами. Как правило, запросы используются при составлении title и h1. В заголовках h2-h6 ключи использовать можно, но стоит делать это с осторожностью. Главное — это раскрыть суть информации, которая последует за заголовком. Нужно помнить что в поисковую выдачу Яндекс вместо title могут попадать заголовки h2-h3.

Не нужно пытаться вставить все уровни заголовков в текст, руководствуясь принципом «чтобы было». Если объем информации небольшой, то заголовков h2-h6 может и не быть. В первую очередь, нужно руководствоваться здравым смыслом, ориентируясь на то, насколько удобно читать ваш текст. Ну и, конечно же, необходимо соблюдать иерархию заголовков, о которой мы говорили ранее.

Частые ошибки использования заголовков h1-h6

Зачастую, составляя заголовки h1-h6, SEO-специалисты допускают одни и те же ошибки. Разберем их более подробно.

  • На странице встречаются несколько заголовков h1. Это самая грубая ошибка, которая, как не странно, встречается чаще всего. Главное правило: один документ — один заголовок h1.
  • Не соблюдается иерархия заголовков. Не все понимают этот момент, считая, что вправе оформлять текст так, как заблагорассудится. Поисковые системы считают иначе. Иерархия заголовков должна соблюдаться.
  • Заголовки, составленные из ключевых слов. Использовать ключи в заголовках можно, то только в пределах разумного. Не стоит оформлять в виде заголовка несколько ключей, перечисляемых через запятую. Как правило, заголовки содержат ключи в порядке их приоритетности. То есть, заголовок h1 включает в себя наиболее высокочастотный запрос, а заголовок h3 (если он используется) — низкочастотный запрос.
  • Хоть и поисковая система понимает элементы сайта, но для больше надежности не рекомендуется использовать теги h2-h6 в элементах меню или в других заголовках, которые не относятся к главному контенту страницы.

Использование заголовков в документе позволяет сделать текст более удобным для восприятия пользователя. Составляя заголовки, нужно соблюдать их иерархию и заботиться о привлекательности и емкости текста. Заголовки не должны быть кликбейтными и «желтыми». Каждый заголовок должен соответствовать тексту, который следует после него.

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

Главные выводы

  • Заголовки h1-h6 играют важную роль в SEO и удобстве восприятия материала пользователями.
  • Заголовок h1 является главным и определяет содержание статьи.
  • Title и H1 имеют разные цели и должны отличаться.
  • Заголовок h1 должен быть кратким, информативным и соответствовать ожиданиям пользователя.
  • Заголовки h2-h6 должны быть емкими и информативными, отображающими суть материала.
  • Важно соблюдать иерархию заголовков и избегать кликбейтных и «желтых» заголовков.
  • Правильное оформление материала может улучшить поведенческие факторы сайта и его ранжирование в поисковой выдаче.

Вопросы и ответы про заголовки h1-h6 для SEO

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

Можно ли использовать заголовок h1 несколько раз в HTML 5?
HTML 5 в своих правилах разрешает использовать несколько заголовков h1. Но я специально написал с этим вопросом в службу поддержки Яндекс, на что они мне ответили, что рекомендуется использовать h1 всего один раз, даже в HTML 5.
Обязательно ли использовать заголовок h1 на главной странице?
Не обязательно, если это невозможно осуществить, то можно и не использовать.
Как следует распределять ключевые слова в заголовках h1-h6?
Оптимальной практикой является размещение основного ключевого слова (фразы) в заголовке h1, а релевантных синонимов или родственных слов — в подзаголовках h2-h6. Это позволяет усилить семантическую релевантность страницы по целевой тематике и облегчить ее понимание для роботов поисковых систем.
Стоит ли использовать все уровни заголовков h1-h6 на каждой странице?
В теории это возможно, но на практике вряд ли целесообразно. Для большинства страниц достаточно задействовать 2-4 уровня заголовков (например, h1, h2, h3) для создания логичной иерархии. Злоупотребление всеми уровнями h1-h6 не только усложнит структуру, но и негативно может отразиться на юзабилити страницы.
Можно ли скрывать визуально заголовки h1?
Если это не носить массовый характер, то можно визуально скрывать заголовки H1, но это не рекомендуется делать. Вместо этого лучше использовать H1 таким образом, чтобы он был видимым и релевантным для пользователей. Поисковые системы анализируют контент страницы, чтобы определить его релевантность для пользовательских запросов. Скрытие важных элементов, таких как H1, может привести к снижению ранжирования вашего сайта в результатах поиска. Плюс скрытый контент поисковая система всегда рассматривает, как нежелательный.
Поделиться статьей:
Александр Овсянников
С 2009 года занимаюсь заработком в интернете и пишу об этом в блог. За более чем 14 лет практики, я успел попробовать различные виды онлайн бизнеса. О всех нюансах делюсь в своих статьях и в телеграм канале.

Комментарии

Подписаться
Уведомить о
guest
6 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Никита
Никита
10.08.2019 03:55

Хотел сказать спасибо за отличные статьи! Надеюсь вы не забрасите проект.

Максим
Максим
12.12.2019 04:26

Статья огонь! Спасибо огромное!

Скажите, пожалуйста, как поступить, когда в общей статье нужно кратко описать сопутствующие темы? Например, сайт по грамматике английского языка: у нас есть общая статья про «глагол to be», в ней мне нужно кратко описать «модальную конструкцию be to», «be в прошедшем времени».

Но, «модальная конструкция be to», «be в прошедшем времени» — это тоже две отдельные большие статьи. Просто в общей статье я хочу кратенько о них написать. Соответственно, мне придется использовать заголовки h2 для этих ключевые .

А, когда я буду писать отдельные статьи про «модальная конструкция be to», и «be в прошедшем времени» , то мне придется опять использовать эти ключи в заголовках, которые уже были использованы в общей статье. Помогите, пожалуйста, разобраться.
Как решить этот ребус 🙂

Спасибо большое!

Дима
Дима
18.02.2020 09:24

Статья реально хорошая и очень познавательная, как для сео-аналитиков, так и для верстальщиков и ИП-шников, спасибо.

Алексей
Алексей
20.02.2020 12:44

Очень крутая статья, узнал много нового, спасибо

© 2024