Заголовки h1 - h6 для SEO: подробная инструкция

Александр Овсянников
Обновлено: 30.07.2019
Заголовки h1-h6
5
(32)

Заголовки h1 - h6 - это элементы разметки HTML, которые определяют уровень важности заголовков на странице.

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

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

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

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

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

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

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

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

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

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

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

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

Заголовки h1-h6 в коде

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

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

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

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

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

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

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

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

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

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

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

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

Важно! не рекомендуется использовать заголовок низшего уровня, если вы не использовали в статье заголовок высшего уровня. То есть нельзя использовать заголовок h4, если в вашей статье нет заголовка h3.

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

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

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

заголовки

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

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

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

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

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

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

Пример title
Пример отображения title в поисковой выдаче

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

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

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

А основная задача title - это быть оптимизированным под поисковые запросы. Более подробно про составление title читайте в нашей статье.

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

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

Более подробно про различия h1 и title мы описали в этой статье.

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

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

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

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

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

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

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

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

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

  • "Болит голова? Избавьтесь от головной боли за неделю!"
  • "Можно ли избавиться от головной боли?"

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

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

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

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

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

Метод "экзамена"

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

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

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

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

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

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

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

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

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

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

Как прописывать заголовки h1-h6 в wordpress

WordPress - наиболее распространенная система управления сайтом. Поэтому разберемся с ней более подробно.

Заголовок h1 прописывается в поле над основным содержимым документа:

Добавить заголовок h1 в wordpress

Остальные уровни заголовков h2-h4 оформляются следующим образом. Пишется текст и преобразуется в заголовок:

Wordpress выбор заголовков

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

Wordpress вставка h2-h4

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

Заголовок h2 в коде wordpress

Частые вопросы

Можно ли использовать заголовок h1 несколько раз в HTML 5?

HTML 5 в своих правилах разрешает использовать несколько заголовков h1. Но я специально написал с этим вопросом в службу поддержки Яндекс, на что они мне ответили, что рекомендуется использовать h1 всего один раз, даже в HTML 5.

Обязательно ли использовать заголовок h1 на главной странице?

Не обязательно, если это невозможно осуществить, то можно и не использовать.

Заключение

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

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

Оцените эту статью. Чтобы мы могли делать лучший контент! Напишите в комментариях, что вам понравилось и не понравилось!

Рейтинг статьи: 5 / 5. Кол-во оценок: 32

Пока нет голосов! Будьте первым, кто оценит эту статью.

Александр Овсянников
Занимаюсь продвижением и заработком на сайтах с 2009 года. Владелец партнерки по монетизации PUSH-уведомлений MajorPush.pro. Автор курсов в Академии Вебмастерье по созданию, продвижению и заработку на сайтах. Создатель бесплатной панели для сайтов MajorPanel.ru. Владелец информационных сайтов.
Баннер
Подписаться
Уведомление о
guest
25 Комментарий
Inline Feedbacks
View all comments
Никита
Никита
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

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

Макс
Макс
20.02.2020 12:51

Согласен, что все написано доступно.

Макс
Макс
20.02.2020 12:52

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

Павел
Павел
20.02.2020 13:16

Для меня очень много информации собранно в одном месте мне это очень необходимо я новичок в этом деле. Спасибо за изложенную подробную инструкцию и помощь. Ваша информация очень помогает людям как я и кому это очень необходимо.

radiosana
radiosana
20.02.2020 13:21

Спасибо вам огромное довольно все интересно , особенно для новичков

Елена
Елена
20.02.2020 14:09

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

Ольга
Ольга
20.02.2020 14:17

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

KseniyaGor
KseniyaGor
20.02.2020 14:23

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

Михаил Павлович
Михаил Павлович
20.02.2020 15:13

Всем доброго времени суток! На данный момент занимаюсь изучением данной темы. Огромное спасибо за детализацию заголовков h1-h6. Все подробно и доступно описано. Буду пробовать на практике. Надеюсь можно будет консультироваться в дальнейшем!

Альберт
Альберт
20.02.2020 15:33

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

Анжела
Анжела
20.02.2020 16:06

Я не так давно в этом направлении и не программист. Поэтому мне многое непонятно и трудно читать. Но в целом статья для IT-cпециалистов очень и очень подойдет.

Людмила
Людмила
20.02.2020 16:29

Ёще не раз придётся вернуться к теме, как правильно пользоваться заголовками, пока на познавательном уровне интересно , что есть такие правила.Хочется научиться применять их в дальнейшем, когда буду писать тексты.

Дмитрий
Дмитрий
20.02.2020 16:56

Здравствуйте, Александр! Статья у Вас получилась интересная и написана очень понятно. У меня не появилось ни одного вопроса. Работаю копирайтером 3 с небольшим года. Всегда, когда возможно, выполняю именно эти правила. И получаю хорошие итоги. Стоит только пойти на поводу у Заказчика и нарушить порядок заголовков или "сыпануть ключей поболе" - вся работа насмарку. Это как раз тот случай, когда кашу маслом испортишь. В последнее время меня всё больше тянет заняться SEO. О Вас и проекте "Академия Вебмастерье" сегодня узнал впервые. Первые впечатления весьма хорошие. Обязательно продолжу знакомство с проектом. Я не люблю петь дифирамбы, но, тем не менее думаю,… Подробнее »

Борис
Борис
20.02.2020 17:59

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

Увгения
Увгения
20.02.2020 18:10

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

Trifonov59
Trifonov59
20.02.2020 18:22

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

Сергей
Сергей
20.02.2020 18:59

Спасибо. Статья оказалась для меня очень полезной. Как раз хотел начать заниматься копирайтингом.

Ваха
Ваха
20.02.2020 19:03

Здравствуйте.Статья мне очень понравиласьЯ немного пробую копирайтинг.Думаю мне статья будет полезна.Спсибо все буду изучать.

Мария
Мария
20.02.2020 19:18

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

bembi
bembi
20.02.2020 22:34

В начале не понял а потом дошёл) респект

будь в курсе
Подписывайся и получай заметки о заработке на сайтах, которые не вошли на страницы этого блога. С нами уже более 4000 вебмастеров.
Вконтакте 2k+
Телеграм 2k+
Я уже подписан