Заголовки h1-h6: что это такое и как их использовать, чтобы быть лучше 90% сайтов

90% сайтов, которые приходят на продвижение в PROSUVER имеют проблемы с использованием заголовков h1-h6. Для любителей поспорить – это исключительно мой опыт за 15 лет работы, и я не претендую на точность цифр в рамках всего интернета. Но вряд ли они будут далеки от этого.

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

Почему нет? Бюджет же клиентский, а не свой. Зачем работать руками, если можно сделать минимум, а все остальное пытаться компенсировать ссылочным. Не лезет в ТОП? Значит нужно еще больше ссылок… Вот так и живем. А потом еще удивляемся, что клиенты не доверяют SEO-шникам.

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

Что такое заголовки h

Если вы спросите у SEO-специалиста – что такое заголовок h1. Ответ будет примерно таким – это главный заголовок страницы, который обернут в HTML-тег <h1>. В коде страницы выглядит так:

Что такое h2, h3, h4, h5, h6 – это подзаголовки, которые также выделаются соответствующими тегами.

А все вместе – основной заголовок в h1 и подзаголовки h2-h6 – это и есть тот набор HTML-тегов, который позволяет структурировать информацию на странице. Всего их 6 уровней. Поэтому никакого h7 и далее не существует. H1 – наиболее значимый, h6 – наименее.

В целом все достаточно просто. Если вы понимаете, о чем речь. Но попробуйте рассказать это владельцу сайта, который вообще не знал, про какие-то там теги h. Или SEO-специалисту новичку, которого нужно обучить. Количество вопросов только прибавится. Поэтому давайте на примере. Может и не самый удачный, но зато наглядно.

Возьмем любую книгу. Ее название – это заголовок h1. Название глав – заголовки h2. Если внутри глав есть еще подзаголовки – это будут h3. Любой сайт в данном примере – это библиотека. То есть каждая страница на сайте – это книга, у которой свой набор заголовков.

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

Например, для этой страницы заголовок h1 – это название статьи. А «Что такое заголовки h» – это подзаголовок в h2. Дальше по тексту их будет еще несколько. Чтобы вам было удобнее читать эту статью. Но об этом ниже.

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

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

Структурирование информации на странице

Вам будет удобно читать статью на 20 тыс. знаков, без подзаголовков? Просто портянку текста. Нет. А если в ней что-то нужно найти… Как там вообще ориентироваться? Никто не будет такое читать, просто пойдут к конкурентам. То же самое касается интернет-магазинов, сайтов услуг и любых других. Нет нормального структурирования – вы теряете часть клиентов.

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

Мало того, правильное использование заголовков помогает поисковым системам оценить страницу с точки зрения релевантности ее содержимого поисковому запросу. А это прямое влияние на ранжирование. Если все максимально упростить – чем лучше у вас проработана структура, тем больше шансов занять более высокую позицию, при прочих равных.

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

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

Формирование заголовков в результатах поиска

Теги h2-h6, хотя на практике это скорее h2-h3, могут использоваться ПС для формирования заголовка в результатах поиска. H1 тоже входит сюда, но это скорее альтернатива title под общие запросы, а подзаголовки – под более узкие.

Например, сейчас вы читаете статью про заголовки в целом. И теоретически она может ранжироваться по большому количеству поисковых запросов. Но если пользователь вбивает в поисковую строку: «длина h1», а заголовок в результатах поиска сформирован из title и выглядит так: «Заголовки H1-H6: как их писать, чтобы быть лучше 90% сайтов», он может и не перейти на сайт. Ему будет не понятно, найдет ли он там ответ на свой вопрос.

Если же на странице есть подзаголовок, со словами «длина h1», ПС может показать его. В таком случае пользователь скорее всего пойдет к вам на сайт. Но ПС может так сделать, если такой подзаголовок есть. А если его нет, то даже при наличии нужной информации, заголовок в результатах поиска будет прежним. Конечно, так происходит не так уж часто, но что вы теряете, сделав правильную структуру?

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

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

Как их смотреть

Проверку заголовков h1-h6 удобно делать через Seo Meta in 1 Click. Это расширение для Google Chrome, которое вы легко найдете. Оно бесплатное. Вот так выглядит проверка заголовков для одной из страниц сайта PROSUVER:

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

Например, вы можете увидеть, что в структуре страницы есть подзаголовки h2, но напротив них не написано никакого текста. Такое бывает, если в h2 обернута картинка или он просто пустой. Расширение не даст это увидеть. И тогда нужно смотреть исходный код.

Также вы не увидите здесь, совмещение тега h с тегами акцентирования strong или em. Использование стилей для оформления прямо в коде, а не через style.css. И так далее. Все это нужно смотреть в коде.

То есть правильность структуры заголовков и того, что в них написано смотрим через Seo Meta in 1 Click. А все спорные моменты – в исходном коде. Софт и сервисы в этой статье не рассматриваем, хотя интересные решения под разные задачи есть.

Рекомендации для h1

Тег h1 – один из важнейших тегов на странице. Можно считать, что это второй по важности тег после title. Все это очень относительно и на практике много нюансов. Но в любом случае к заголовку страницы нужно отнестись максимально ответственно. Разберем основные критерии, которым он должен соответствовать.

Заголовок h1 должен быть на странице только один

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

Например, представим типичную страницу раздела интернет-магазина. Сверху название раздела. Например «Купить холодильники LG» (слово «купить» здесь лишне, но с ним нагляднее). Это и есть заголовок, который мы поместим в h1. Затем идут карточки товаров, блоки с популярными/акционными моделями, возможно последние отзывы, может еще что-то. А потом внизу страницы – SEO текст. Перед которым есть подзаголовок «Холодильники LG: критерии выбора».

Если второй заголовок также обернуть в h1, получится, что один из них – коммерческий и страницу нужно ранжировать по запросам «купить…», а второй информационный и ее нужно ранжировать запросам вида «критерии выбора…». Это может путать ПС и иметь негативное влияние на позиции.

Должен соответствовать странице

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

Пример 1: страница ИМ на которой продаются кожаные сумки ручной работы.

В данном примере мы видим, как некоторые владельцы сайтов пишут в h1 то, что не соответствует в полной мере товару или услуге. Такими заголовками вы показываете ПС, что у вас намного более широкий ассортимент, чем есть на самом деле. А для магазинов с более широким ассортиментом – там своя выдача.

Пример 2: моя статья https://prosuver.ua/ru/blog/seo/description/.

Посмотрите на ее структуру – что это такое, для чего, длина, как писать, ошибки… Статья достаточно широкого формата. Соответственно заголовок в h1 должен содержать только «мета-тег description», а остальные слова «общие» или перечисление этих подразделов (если не переспамить):

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

То есть, заголовок про то, как его писать, а статья про то, что это вообще такое, для чего он нужен и так далее.

Пример 3: главная страница сайта услуг.

Бывают случаи, когда заголовок h1 на главной странице выглядит так:

А должен так:

Должен располагаться на видном месте

Некоторые владельцы сайтов игнорируют все заголовки на странице, которые стоило бы обернуть в h. Вместо этого ставят вниз страницы SEO текст и заключают в тег h1 заголовок перед ним. Логика простая – в него можно вписать побольше ключей, он же не на виду… Это неправильно.

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

Не должен дублировать title

Здесь не все однозначно. Одинаковыми они могут быть и часто так и бывает. Причины 2:

1. Лень заморачиваться и писать разные.
2. Страница не участвует в поисковом продвижении.

Но для SEO правильнее делать их разными. Title больше ориентирован на ПС и на то, что из него может быть сформирован заголовок на странице результатов поиска. Соответственно его можно более сильно «заточить» под ключевые слова. А также сделать более длинным, что также позволяет вписать больше ключей.

H1 больше ориентирован на пользователей. И в реальной работе часто имеем ситуацию, когда дизайн не позволяет использовать больше 3-4 слов. Много в него впишешь в таком случае? Не особо.

Пример:

Неправильный пример – это реальный пример одной страницы Эпицентра. На самой странице большая часть продукции – это трубы. Title написан правильно, если не придираться к мелочам. А вот h1 только вводит ПС в заблуждение.

Не должен быть слишком длинным

Часто спрашивают – какой должна быть длина заголовка h1? Однозначного ответа на этот вопрос нет. Кто-то приводит цифры в 50-60 символов кто-то допускает до 90-100. Вариантов много. Но все это не больше, чем набор мнений. Каких-то точных рекомендаций со стороны ПС просто не существует.

Поэтому руководствуйтесь здравым смыслом и анализом конкурентов. Минимальная длина может быть всего несколько символов. Например: «Блог». И это нормально для определенного типа страниц. Максимальная зависит от того, что именно представлено на странице. Например, для данной статьи – это более 80 знаков. И это не много, я часто пишу и более длинные заголовки.

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

А вот чего действительно следует избегать – так это включения в h1 блока текста. Это может показаться очевидным, но в реальной работе чего только не увидишь… И весь SEO текст в него оборачивают, и блок текста на первом экране, и блок товаров целиком, и навигационные элементы.

Использование ключевых слов

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

При этом:

• ключевое слово лучше размещать ближе к началу заголовка;
• нельзя допускать переспама.

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

Второй пример – статья про заголовок h1. Как выглядит переспам:

Как выглядит заголовок, в котором ключевое слово вписывают, но не ставят его в начало:

Такой вариант будет работать плохо. Правильно так:

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

Наличие и уникальность

Есть еще 2 распространенные проблемы, с которыми часто приходится сталкиваться. Первая – это отсутствие h1 на странице. Это вообще странно. Почему-то никто не представляет себе книгу или статью в журнале без названия. А на сайте – запросто. Это ошибка. Заголовок должен быть. И все. Особые объяснения здесь не требуются.

Конечно, бывают исключения, но это именно что исключения. И рассматривать их в рамках этой статьи не будем, чтобы не растягивать. Не так уж часто они встречаются.

Что касается уникальности – заголовок h1 должен быть уникальным в пределах сайта. Здесь также могут быть варианты, но стремиться нужно именно к этому. К подзаголовкам h2-h6 это не относится.

Общие рекомендации для h1-h6

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

Соблюдайте иерархию

Если вас просят посчитать до шести: вы же не будете начинать с 3 и заканчивать 1? Вот так и с заголовками – они должны использоваться от большего (от единицы) к меньшему. При этом меньший может быть в коде выше большего только если он вложен в вышестоящий больший. Вот так:

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

Не забывайте про размер шрифта

Если в двух словах – чем выше уровень подзаголовка, тем крупнее должен быть шрифт. А если на практике – вы можете представить себе ситуацию, когда название статьи в журнале будет напечатано двенадцатым непримечательным шрифтом, а подзаголовки в ней – двадцать четвертым, да еще и жирным? Также и с подзаголовками h – самым крупным должен быть h1, самым мелким – h6.

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

Следите за количеством

Всего существует 6 уровней тегов h, но это не значит, что нужно стремиться использовать их на странице сразу все. Больше – не значит лучше. Важно не количество, а уместность. Если для хорошего структурирования достаточно h1, h2, h3, нужно использовать только их, не внедряя искусственно теги h4-h6.

Из моей практики – тегов h1-h4 достаточно как минимум для 95% страниц. Теги h5 и h6 используются действительно очень редко. Мало того, в большинстве случаев достаточно h1, h2 или h1, h2, h3.

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

Используйте текст между ними

Это не правило, а рекомендация. Между двумя соседними тегами h должен быть хотя бы один абзац текста. Иначе можем получить вот такое:

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

Но если ради этого визуального разграничения подзаголовков нужно «налить воды», потому что полезный текст там не сильно уместен, лучше поставить их рядом. При этом нужно смотреть, чтобы в них не оказался вписан один и тот ключ (может выглядеть спамно). И чтобы они вместе смотрелись нормально – не было проблем с отступами, длиной, размером шрифта…

Не спамьте

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

Также не нужно использовать много ключевых слов в одном подзаголовке или использовать их в неправильных формах. Например:

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

Следите за информативностью и читабельностью

Представим типичную страницу сайта производственной компании. На странице есть подзаголовок «Каталог продукции» и после него идет блок с товарными карточками или карточками, ведущими на подразделы, не принципиально. Смысл в том, что это именно продукция. В итоге – и посетитель сайта и поисковая система будут понимать, что после данного подзаголовками расположены ссылки на продукцию. Информативно? Да.

Вторая ситуация – также страница производственной компании и есть подзаголовок в h2: «Откатные ворота». А после него расположены товарные карточки с автоматикой для откатных ворот. И вот здесь уже не информативно и не логично. Пользователь видит такой подзаголовок и ожидает что ниже будут именно ворота и не понимает, почему видит автоматику. А ворота-то где? Аналогично это «не понимает» ПС.

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

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

Уберите лишние символы

Заголовок не должен заканчиваться точкой

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

Знак вопроса в конце заголовка не ставится

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

Точка внутри подзаголовка нежелательна

Вот здесь уже не все так однозначно. Я и сам иногда использую заголовки h1-h2 состоящие из двух предложений. Но очень редко и при условии, что в первом предложении уже «обыграны» все важные для меня ключевые слова. А если рассматривать стандартную практику – теги h1-h6 не должны содержать точку. Можно использовать – тире, двоеточие, многоточие.

Не совмещайте h1-h6 с другими тегами и стилями

Как должно быть:

То есть, в html коде страницы должны быть только: открывающий и закрывающий теги h, а также текст самого заголовка. Иногда может быть указан класс стилей в CSS. Вот так:

И на этом все. А на практике – постоянно приходится исправлять ошибки. 7 из 10 сайтов, приходящих на продвижение в PROSUVER, требуют исправлению ошибок, указанных ниже.

Ошибка 1 – совмещение h с тегами <strong>, <b>, <em>, <i>

Очень часто имеем ситуацию, когда владельцу не нравится внешний вид заголовка и он делает его «жирным». И в большинстве случаев использует для этого тег акцентирования <strong>, а не просто тег <b>. Вот так:

Мало того, бывает и так – пишешь в ТЗ, чтобы убрали тег <strong>, отдаешь правки владельцу, он отдает их своему программисту, последний правит и присылает вот такой вариант:

Ну а что? Убрал же… Так вот – тег h не должен сочетаться с этими тегами вообще. Для оформления внешнего вида есть стили. А акцентировать на что-то в подзаголовке вообще не нужно.

Ошибка 2 – совмещение h с тегом <img>

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

Это также нужно вычищать – убирать тег h2 (если говорить про данный пример).

Ошибка 3 – совмещение h со стилями

Некоторые используют вот такие конструкции:

И все бы ничего, можно и глаза закрыть, если это разово. Но когда подзаголовков на странице 15-20 штук и в каждом одни и те же стили, невольно возникает вопрос – в чем проблема задать оформление через style.css?

Если при проверке подзаголовков видите такую ситуацию – пишите этот пункт в правки. Позже с программистом обсудите. Если возможно – он все это уберет.

Ошибка 4 – совмещение h со ссылками

Очень часто можно увидеть вот такое:

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

Используйте минимум 2 подзаголовка h2-h6

Еще одна очевидная рекомендация. Тем не менее, часто приходится видеть такое:

Вопрос – зачем в данной структуре h3? Если в вышестоящем h2 так много информации, что ее нужно разделать на несколько блоков, тогда этих h3 должно быть тоже несколько. А если он один – значит информации там не много и этот подзаголовок лишний.

Не используйте для навигационных элементов

Теги заголовков h используют для структурирования информации на странице. Именно информации! Они не должны использоваться для навигационных элементов. Если кто-то не понимает, что такое навигационный элемент – вот пример:

Это названия блоков в подвале, сайдбаре или просто на странице. Они не помогают структурировать информацию и не должны оборачиваться в h. Посмотрите на статью, которую вы читаете. Ее название, текст и картинки в тексте – это информация, которую нужно структурировать, чтобы вам было удобно ее читать. А названия любых блоков на странице не имеют к ней отношения и не помогут сделать статью удобнее для чтения. Поэтому заголовки в них не нужны.

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

Как делать проверку

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

Допустим, приходит на продвижение сайт. Семантика собрана, посадочные уже есть, мета-теги написаны, переходим к правкам. Начинаем со сквозных правок. Берем по одной странице каждого типа: главная, раздел, подраздел, товарная страница, страница (О нас, доставка и подобные). Таких страниц будет всего несколько штук и просмотреть их не проблема.

Для каждого типа страниц проверяем:

• h1 – есть ли он вообще на странице, один или несколько;
• располагается на видном месте или нет;
• уникальный в пределах сайта или нет (нужен софт);
• соблюдена ли иерархия h1-h6;
• нет ли проблем с размерами (например h3 сильно больше h2);
• не используются ли заголовки в навигационных элементах.

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

Все остальные моменты – мы анализируем на этапе постраничных правок. Это уже более длительная и кропотливая работа. Причем при написании постраничных правок нужно смотреть не только заголовки, но и много других моментов. Об этом в следующих статьях.

Понравилась статья? Не забудьте проголосовать или поделиться в соц. сетях. Если остались вопросы – пишите в комментариях. У нас они не лишь бы были. Читаем и отвечаем на ваши вопросы.