В данной статье разберем как правильно составлять SEO заголовки на страницы сайта. Этот фактор относится к внутренним факторам ранжирования и обязателен при правильной оптимизации контента на страницах сайта.
Ранее я уже сравнивал мета тег title и тег h1 по их важности и роли для SEO. Сегодня подробнее разберем именно теги типа H. Всего существует 6 таких тегов, но в основном используются только первые 3 — теги h1, h2 и h3.
SEO заголовок страницы h1 и его значимость
Самый главный заголовок страницы размечается тегом h1. Это может быть название страницы, статьи или товара. Это обязательный заголовок и он должен присутствовать на всех страницах сайта без исключения.
Очень часто встречаю в самописных сайтах или просто в непрофессионально собранных шаблонах такой момент, что тега h1 просто нет. На месте заголовка страницы заместо h1, находится тег h2. Это еще в лучшем случае — бывает что вообще нет заголовков типа H на странице. А то что выглядит типа заголовка, просто обычный div или span блок с прописанными заранее стилями походящими на заголовок.
Обязательно проверяйте наличие тега h1 на странице в самом начале оптимизации или еще ранее — на этапе проведении seo аудита сайта. К тому же тег h1 должен быть всего 1 на странице.
Опять же частое явление, когда тегов h1 на странице несколько. Это свойственно опять же самописным сайтам или сделанных на конструкторе или с помощью разного рода софта вроде Adobe Muse, об ужасном коде которого я писал ранее.
Последний сайт что я взял на оптимизацию — это как раз таки одностраничный сайт собранный на Muse и когда я заглянул на код сайта обнаружил аж 7 заголовок размеченных тегом h1 — это ужасная ошибка.
Заголовок h2 и его важность для продвижения
Если h1 многие все же придерживаются правил и используют на страницах своего сайта, то тегом h2 многие пренебрегают, а зря! Этим тегом обычно размечаются подразделы статьи, страницы.
Еще на этапе сбора семантического ядра для сайта в целом или для отдельной статьи нужно примерно понимать из каких разделов будет состоять статья. Опишем ли мы подробно преимущества, стоимость или какие-либо другие подробности по теме статьи или по товару.
Рассмотрим пример страницы товара в магазине фототехники — если заголовок h1 страницы имеет вид «Canon 6d Body», то тегом h2 мы будем примерно разбивать на части (подразделы) описание самого товара на странице и иметь вид «Характеристики Canon 6d Body» и «Преимущества фотоаппарата Canon 6d Body».
Тем самым мы за счет заголовков типа h2 захватим важные моменты, которые также могут интересовал посетителя сайта помимо самого названия. Теперь сайт будет конкурировать с остальными не только по запросу по основному «Canon 6d Body», но и по дополнительным запросы касаемо преимуществ и характеристик данной модели фотоаппарата. А охват большего числа запросов в свою очередь — это рост трафика на сайт.
Кстати говоря, замечал и на своем блоге и на клиентских сайта случаи, когда заголовок типа h2 попадал в сниппет результатов поиска. Туда как правило попадает либо h1, либо title — они оба самые сильные по важности заголовки страницы и за ними преимущество, но не исключено и влияние h2 на сниппет.
Например данная статья может с легкостью выйти в ТОП по запросу «Заголовок h2», только потому что эта фраза есть в теге h2.
Пару слов о заголовке h3 и нужен ли о вообще
Я в своих статьях очень редко использую заголовок с тегом h3. В случаях если статья набирает в себе 5000 символов и выше и то не всегда — можно обойтись и разбаить статью на подразделы и разметить их тегом h2.
Все заголовки начинаz с h3 и до h6 несут в себе ту же самую уточняющую и дробящую страницу на подразделы роль, но это используется крайне редко. У вас должна быть просто очень огромная статья, чтобы можно было выстроить такую иерархию из подразделов страницы и задействовать все типы заголовков.
Для примера вложенности подзаголовков я напишу про иерархию заголовков, и размечу заголовок этого раздела тегом h3.
Порядок и иерархия заголовков на странице сайта
Все заголовки должны идти в строгом порядке. Первым на странице всегда идет заголовок типа h1.
Далее за ним разбивая страницу на подразделы идет тег h2 и часто этого более чем достаточно.
Если подразделы для каждого из заголовков h2 получились внушительных размеров и в них затронуты несколько еще более мелких подтем, то внутри каждого или одного отельного подраздела с тегом h2 вы делаете сложенные «мини» подразделы страницы и размечаете их h3.
Не обязательно что все подразделы озаглавленные тегом h2 будут большими и их надо дробить еще на несколько подразделов. Ниже постараюсь наглядно показать как правильно делать вложенность по заголовкам на странице.
Александр, меня очень волнует вопрос по тегам. Пытаюсь правильно и доступно написать о своих услугах. С названием страницы (h1) я все понял, но у меня на этой же странице 12 различных предложений для клиента, напрямую связанные с главной темой страницы. Так вот, могу ли на это странице сделать 12ть заголовков h2? Какое количество текста должно быть под каждым заголовком? И да, я разбавляю их картинками… Заранее спасибо за ответ.
для 12 заголовков и текст должен быть внушительным — тысяч 10 символов. Я так понял это главная страница или страница с услугами и это 12 предложение собственно сами услуги из всего комплекса. Я бы посоветовал сделать их просто текстом без H. Само собой стилем их оформить как заголовки на вид по размеру шрифта и семейству. А вот это самое название услуги, а можно и с картинкой сделать ссылкой на страницы с детальной информацией. Если не планируется вообще детально описывать и это что-то вроде одностраничного сайта — все равно не стоит делать так много h2 только потому что это важные ключи и услуги. Поисковик из найдет и распознает и без h2, если запрос будет напрямую связан с этим.
как будет влиять на ранжирование span внутри h1.
на w3c ошибок много. или лучше сделать ЗАГОЛОВОК
Лучше стараться не использовать такие конструкции. Это не супер критично, но и не желательно. В чем проблема дописать к заголовку класс и оформить его в стилях, не портя код лишними спанами?
Подскажите пожалуйста, что будет если сначала идет h3 а потом h2? У меня магазин на вукомерц и описание товара вот так сделано. Надо ли исправлять? Просто товаров там не мало уже.
Посмотрел Ваш сайт. Там все нормально в плане иерархии — название товара h1, затем вкладка и слово «Описание» в h2 и уже после в самом описании заголовок h3 сделан. Затем фраза похожие товары снова идет в h2.
С другой стороны — то что вукомерц делает такие маловажные слова как описание и похожие товары заголовком — это не совсем удобно. Я бы на Вашем месте залез в код и там, где выводится слово «Описание» и «Похожие товары» убрал вообще заголовок и сделал просто дивом или спаном. А затем сам заголовок в описании товара уже смело можете заключать в h2. Это будет более правильное решение.
А если у меня тег h1 состоит из двух фраз, одна из которых, по задумке дизайнера, сделана другим шифтом. Как тогда обойтись без, скажем, span внутри тега h1?
У CSS просто безграничные возможности. Я точно сейчас не скажу какие стили и как прописать, но можно конкретно для этих заголовков сделать свою стилистику. Вот пример работы с градиентом в пределах строки и текста http://shpargalkablog.ru/2013/11/gradient-text.html, но более чем уверен, что можно сделать и отдельно первое слово допустим нужным цветом.
Александр, подскажите пожалуйста. На сайте по продаже товара, в описании у нас есть и h1 и h2. Вопрос: «Тех. характеристики» и «В комплекте» — можно/нужно ли ставить h3? Думаю это лишнее и лучше обычным жирным шрифтом, верно?
Посмотрел на сайт указанный при комментарии. Да можно сделать просто текстом эти фразы, не надо h3.
Если бы между заголовками было много текста и уникально при этом, то можно было бы и сделать и заголовком только в таком виде «Тех. характеристики Резиновые петли (жгуты) «RUBBER BANDS»», но не стоит этого делать)
Добрый день, Александр. У меня есть 2 вопроса по этой теме:
1. Хочу сделать микроразметку для товаров интернет-магазина и появился вопрос — можно ли использовать такую конструкцию внутри тега h1? Ничего, что в h1 вложено itemprop…?:
Заголовок (title)
.
2.Дизайнер нарисовала название товара, состоящие из двух строк двумя разными шрифтами: Профессиональный фен (1-я строчка) Philips QW-653 (2-я строка). Как тут быть с H1 — использовать его только для второй строки или делать для обеих строк и использовать вложенные теги?
Ну делать br для переноса текста на новую строку (как на сайте waterpik-shop) это странный и крайний вариант для реализации такого. Тем более не вариант делать несколько заголовков или только первую строку в h1. По уму как делается — просто для текста задается фиксированная ширина и что не помещается в первую строку переносится во вторую или третью, если название длинное. А все содержимое блока заголовка просто заключаете в тег h1 если на странице товара и в h2, если в каталоге, например.
По микроразметке.
— кавычки специально заменил т.к. мой блог понимал разметку и делал заголовки.
Обычно все стараясь не испортить ранжирование в теге h1 делают микроразметку в отдельном теге спан, внутри того же заголовка h, но это странное решение.
[h1 class=»heading»][span itemprop=»name»]Название материала>[/span][/h1]
Более правильным решением будет просто тег h1 оставить чистым и добавить вместе с классом тег микроразметки в окружающий тег заголовка блок div, например.
[div class=»heading» itemprop=»name»][h1]Название материала][/h1][div]
Александр, скажите пожалуйста если у нас в карточке товара его название это h1, то это и есть тот нужный один тег , или в описание можно использовать H1? Или там уже лучше h2&
Да все верно — названия товара, статьи или любой другой страницы достаточно иметь в h1. Все остальное можно уже смело разделять на подразделы h2 заголовками, а если текст совсем огромный, то можно каждый подраздел дробить еще и на h3, но это редкое явление — чаще h2 в самом контенте более чем достаточно.
Александр, подскажите пожалуйста. Сделали сайт красивый, но по сео косяков было много. Большинство вроде нашёл и исправил. Озадачен тегами h2-h6 информации конкретно по ним в интернете мало. Должны ли стоять h2 на заголовках товаров и на услугах земляные работы, аренда спецтехники. По идеи не стоит делать т.к. там текста нет. так?
Сколько стоят Ваши почасовые консультации ? skype leo13sky
Обычно заголовки h2 делают именно в теле статьи, страницы с услугой или товаром. Задача h2 разделить текст на логические подтемы и охватить среднечастотные запросы. h3-h6 сравнительно редко использую и опять же в тексте.
список услуг в футере или сайдбаре, типовые и маловажные заголовки в сайдбаре или еще где-то можно делать просто DIVом, а внешне стилями уже можно сделать на вид как угодно.
Спасибо за статью!
Подскажите пожалуйста, с помощью какого инструмента можно найти страницы, на которых более одного заголовка H1?
Вроде у Серпстата был такой функционал при анализе сайтов.
Привет! а сколько раз H2 может встречаться в тексте? Более одного раза может?
Привет. Да конечно можно. Хоть 10 раз — главное чтобы в этом действительно был смысл и контент был соответствующего размера. Должна быть четкая логика — если выделяете в подраздел, то только со смыслом и пользой для вашего читателя.
Здравствуйте, Александр! Появился вопрос по микроразметке, если с h1 всё предельно ясно- это название продукта, h2- это разделы, то к примеру h3- мы можем выделить как подзаголовки? (то что выделено большими буквами на странице сайта) Так же есть мысль, что нужно остановится только на h1 и h2, символов всего около 7300, Вы выше писали, что подобным нужно заниматься, если на странице более 10000 тысяч символов. (адрес сайта https://pro.myseldon.com/ru/promo)
Здравствуйте. По ссылке выше прям перебор с заголовками. Вся страница напичкана заголовками H1 и другими. Все должно быть в меру.
Если так будет проще понять — h1 это самый главный заголовок на 1 экране обычно. В H1 не пихаем все подряд, а только грубо говоря СЧ запросы, которые дополняют и расширяют основной заголовок на странице. H3 используем редко и только в случаях, когда от одного H2 до следующего много текста, то мы просто делим это много на части. И опять же, наобум не надо это делать, только по смыслу и релевантно тематике всего контента на странице.
Демо доступ, Специальное предложение и прочее подобное это нерелевантный мусор, не нужно такое делать заголовками вообще.