зачем нужна разметка тегов h1 h2 h3 в тексте
Заголовки (теги h1, h2, h3) в HTML5 и SEO заблуждения
Первый заголовок, на который часто посетитель сайта не обращает внимание — тот, который показан на вкладке браузера (подробнее про тег title ). Для поисковой системы он самый главный, так как именно его Яндекс, Google и др. чаще всего (см. исключения) используют в качестве заголовка сниппета.
Проверить h1 страницы
Сейчас фразу в любом теге можно сделать заголовком с помощью стилей CSS: увеличить шрифт и/или размер текста. Для того, чтобы проверить количество тегов h1 и их содержимое, достаточно посмотреть код страницы сайта с помощью браузера, никаких дополнительных расширений не требуется. Такой инструмент, можно вывести, если нажать клавишу : 
Один h1 на странице (версия HTML4)
Пример вёрстки HTML5
Оптимизация структуры заголовков и подзаголовков веб-страницы
Также в алгоритм поисковиков может быть заложено удобство пользования сайтом, например, более эстетично и естественно, когда часть заголовка не является ссылкой.
SEO заголовок по итогам эксперимента
Эксперимент 1: «Оптимальное количество h1 »
6-5-7 лет [yandex.ru]. В Яндексе h1 должен быть единственным. То есть на Главной h1 — это название сайта, а на внутренних страницах — название внутренних страниц.
Примечание: в Гугле индексация молниеносна, поэтому тут было проверено и отсутствие влияния алгоритма «Google Fresh». Позиции сменились после того, как страницы были добавлены в Г+. То есть да, есть разница один h1 или несколько, но этому поисковики придают очень маленькое значение.
Эксперимент 2: «Есть ли толк от h3 »
SEO советы
Утверждение 1: заголовок верхнего уровня должен содержать ключевые фразы, но при этом не быть спамным, то есть слова внутри него должны склонятся согласно правилам русского языка. Плохой пример: «Одежда оптом от производителя недорого».
Утверждение 2: чтобы не писать несколько одинаковых по смыслу статей, в заголовки меньшего уровня желательно включить похожие запросы и синонимы. В большинстве случаев для их нахождения достаточно фантазии, wordstat.yandex.ru и поисковых подсказок. То, что менее востребовано и не помещается в заголовки, можно упоминуть в тексте.
Важно: нет необходимости впихнуть весь перечень wordstat. Текст должен быть интересным, читаемым и «без воды». 
В примере с судоку люди ищут одно и тоже, но называют это по разному: «методы», «алгоритм», «способы», «правила», «методика», «приёмы», «секреты», «принципы», «примеры».
Заблуждение 2: в заголовке не должно быть картинки. Две записи равнозначны для w3.org, Google, но не для Яндекса (не индексирует атрибут alt ):
Заблуждение 3: не стоит заключать заголовки в дополнительные контейнеры. Откуда ноги растут у этих утверждений? Нужно, например, выравнять заголовок по вертикали:
Утверждение 1: заголовок страницы или его часть не должны быть ссылкой (см. здравый смысл и справка Новости.Google). Отсюда следствие: название веб-проекта на Главной также не должно быть ссылкой. В целом не нужно чтобы страница ссылалась сама на себя (искл. ссылки к определённому участку страницы, так называемые хэш-ссылки). А вот так допустимо (на Авито на странице объявления каждой похожей записи дан h3 ):
Утверждение 2: есть небольшая разница в том как располагать ссылку: внутри тега h или тег h внутри ссылки. И она заключается в том, что в первом случае ссылкой является только текст, а во-втором — весь блок.
«Различный title и h1 полезны для SEO?» — да, полезны. В рассматриваемые теги можно добавить дополнительные ключевые слова, чтобы увеличить хвост запросов, по которым приходят на сайт. Или чтобы сделать более привлекательный сниппет, в title внести, скажем, название компании, коли фирма на слуху, или номер телефона (для такси, например).
Примечание: для того, чтобы страница могла присутствовать в Новостях Google [support.google.com] или быстрых ссылках Яндекса [help.yandex.ru], основная часть title и h1 должны совпадать. Это может быть вызвано тем, что посетители ожидают увидеть на странице сайта тот же заголовок, что в выдаче поисковиков. На данный момент стоит обратить внимание информационным сайтам.
Заголовки h1-h6
Заголовок в тексте — это инструмент, который делает информацию удобной для читателей и структурирует ее для поисковых систем. При правильном оформлении тегов H1–H6 страницу сайта будет проще вывести на лидирующие позиции в выдаче.
Именно по seo заголовкам Google и Яндекс определяют, насколько тематика Вашей страницы совпадает с запросами, которые вводят пользователи. Иными словами, насколько релевантна данная страница. Релевантность страниц – один из главных факторов seo продвижения.
h1 – главный подзаголовок в статье, который обычно размещен над текстом.
h2-h6 — маленькие подзаголовки, которые проставляются по принципу вложенности.
Главный заголовок h1
Самый главный заголовок страницы размечается тегом h1. Это может быть название страницы, статьи или товара. Это обязательный заголовок и он должен присутствовать на всех страницах сайта без исключения. Очень часто встречаю, что тега h1 просто нет или их несколько. На месте заголовка страницы заместо h1, находится тег h2. Это еще в лучшем случае – бывает что вообще нет заголовков типа H на странице. А то что выглядит типа заголовка, просто обычный div или span блок с прописанными заранее стилями подходящими на заголовок.
Каждая страница вашего сайта несет в себе какую-то конкретную информацию (во всяком случае, должна нести). Основную суть информации вы и будете размещать в заголовке. Например, если вы продаете 3D-телевизоры, значит заголовок страницы должен выглядеть как основной запрос и выделяться в html коде страницы тегом h1.
Основные требования к h1
Заголовок h2
Если h1 многие все же придерживаются правил и используют на страницах своего сайта, то тегом h2 многие пренебрегают, а зря! Этим тегом обычно размечаются подразделы статьи, страницы.
Еще на этапе сбора семантического ядра для сайта в целом или для отдельной статьи нужно примерно понимать из каких разделов будет состоять статья. Опишем ли мы подробно преимущества, стоимость или какие-либо другие подробности по теме статьи или по товару.
Например, страницы товара в магазине телевизоров – если заголовок h1 страницы имеет вид «Телевизор Panasonic TX-75EXR780», то тегом h2 мы будем примерно разбивать на части (подразделы) описание самого товара на странице и иметь вид «Характеристики телевизора Panasonic TX-75EXR780» и «Преимущества телевизора Panasonic TX-75EXR780».
Тем самым мы за счет заголовков типа h2 захватим важные моменты, которые также могут интересовал посетителя сайта помимо самого названия. Теперь сайт будет конкурировать с остальными не только по запросу по основному “Panasonic TX-75EXR780”, но и по дополнительным запросы касаемо преимуществ и характеристик данной модели телевизора. А охват большего числа запросов в свою очередь – это рост трафика на сайт.
Иногда заголовок типа h2 попадал в сниппет результатов поиска. Туда как правило попадает либо h1, либо title – они оба самые сильные по важности заголовки страницы и за ними преимущество, но не исключено и влияние h2 на сниппет.
Основные требования к h2
Заголовки h3-h6
Все заголовки начинаz с h3 и до h6 несут в себе уточняющую и дробящую страницу на подразделы роль, но это используется крайне редко. У вас должна быть просто очень огромная статья, чтобы можно было выстроить такую иерархию из подразделов страницы и задействовать все типы заголовков.
Основные требования к h3-h6
Иерархия заголовков
Все заголовки должны идти в строгом порядке. Первым на странице всегда идет заголовок типа h1.
Далее за ним разбивая страницу на подразделы идет тег h2 и часто этого более чем достаточно.
Если подразделы для каждого из заголовков h2 получились внушительных размеров и в них затронуты несколько еще более мелких подтем, то внутри каждого или одного отельного подраздела с тегом h2 вы делаете сложенные “мини” подразделы страницы и размечаете их h3.
Не обязательно что все подразделы озаглавленные тегом h2 будут большими и их надо дробить еще на несколько подразделов.
Вот пример хорошей иерархии заголовков из статьи по продвижению сайта на WordPress:
Как заполнять h-теги в WordPress
h1 по умолчанию заполняется в поле над статьей:
Чтобы сделать подзаголовки h2-h6, надо выделить необходимый элемент или поставить курсор на нужную строку и, наведя курсор на вкладку «заголовки», выбрать нужный, кликнув по нему.
Есть еще более простой способ – можно набрать текст в Ворде, используя нужные разметки и просто копипастом перенести статью в редактор вордпресса. Выделенные в Word заголовки автоматически отобразятся в нужных размерах. При необходимости можно подправить их, используя инструменты редактора CMS WordPress.
Правильная расстановка заголовков в тегах h1, h2, h3, h4, h5, h6 может дать отличный результат для SEO сайта. По этому, не жалейте времени на настройку.
h1-h6 заголовки имеют чрезвычайно важное значение. Не стоит ими пренебрегать, но и злоупотреблять тоже не стоит. Заголовки могут как поднять, так и опустить сайт.
Заголовки в дизайне (h1, h2, h3)
3 основных уровня иерархии текста, которые позволяют дизайнеру привлечь внимание и направить пользователя к дальнейшему чтению.
Уровни типографической иерархии
Дизайн заголовков и подзаголовков является очень важной составляющей любого интерфейса. Заголовки и подзаголовки позволяют создавать визуальную иерархию, привлекать внимание к основному контенту, подталкивать читателя к дальнейшему чтению.
Можно выделить три основных уровня типографической иерархии:
Первый уровень (заголовок)
Основная цель первого уровня — это привлечь читателей и мотивировать их продолжить (начать) чтение нашего текста. Читать большие блоки текста достаточно трудно и затратно по времени, поэтому нужно предложить читателю выгоду в заголовке.
В среднем 8 из 10 человек прочитают ваш заголовок, и только 2 из 10 прочитают остальной текст. Поэтому для заголовка важна максимальная информативность.
Заголовок должен быть наиболее визуально выделенным элементом на странице. Обычно, главный заголовок заключается в тег H1.
Для выделения заголовка, можно воспользоваться стандартными приемами визуального выделения:
Второй уровень (подзаголовок)
У подзаголовка похожая с заголовком цель, только в меньших масштабах. Подзаголовки также используются, чтобы направить читателя к дальнейшему чтению текста и позволяют удерживать внимание, которое привлекает заголовок.
Подзаголовок, совместно с другими второстепенными элементами, должен поддерживать интерес и вызывать желание у читателя ознакомиться с текстом более детально.
Также, подзаголовки позволяют структурировать текст и создать иерархию на странице. Они позволяют понять человеку, где он может начать чтение, а где закончить, чтобы взять для себя максимальное количество полезной информации.
Для выделения подзаголовков необходимо использовать те же способы, что и для выделения заголовков. Но при этом, нужно помнить, что подзаголовок на уровень ниже, чем заголовок, и на уровень выше, чем простой текст. Нужно визуально этому соответствовать. Подзаголовок не должен выделяться больше, чем заголовок или менее, чем обычный текст.
При создании подзаголовков рекомендуется заключать их в теги H2 и H3. Тег H2 использовать для основного подзаголовка, а H3 использовать как заголовок в подзаголовке.
Третий уровень
Обычно на этом уровне представлено много информации (тело вашей информации), поэтому он должен быть максимально читабельным и не отвлекающим. Вы должны дать возможность читателю сконцентрироваться на чтении текста и не мешать ему.
Основные рекомендации для третьего уровня:
Что еще почитать?
Зачем нужны заголовки
Зачем нужны заголовки и какие теги для них использовать?
Этот вопрос нам задают чаще всего.
Когда много лет назад придумали HTML, мир был совсем другим. Авторы спецификации вдохновлялись текстовыми документами, где в одном потоке подряд шли абзацы, списки, таблицы, картинки и, конечно, заголовки. Прямо как в ваших рефератах и курсовых: самый большой заголовок — название, заголовки поменьше — части или главы.
. Они озаглавливают всё, что за ними следует и образуют неявные секции. Такие логические части страницы. Неявные они потому, что закрываются только когда появляется следующий заголовок.
Из-за такой системы неявных секций, спецификация настойчиво рекомендует не использовать элементы для подписей под заголовками. Это обычный параграф, а заголовок должен обозначать отдельную часть содержимого. В спецификации есть глава с примерами разметки сложных элементов: подписи, крошки, диалоги — почитайте.
Ладно! Раз у нас есть явные секции, то по вложенности легко определить отношение частей. Так может браузеры сами догадаются какого уровня заголовки нужны? А то считать:
, аш… сбился. Так было бы удобнее менять части кода местами.
Такая же идея пришла в голову авторам HTML5 и они описали в спецификации алгоритм аутлайна. Он разрешает использовать на странице только
Разработчикам идея очень понравилась, многие даже бросились её внедрять. Но вот беда: алгоритм аутлайна до сих не внедрил ни один браузер, читалка или поисковик. На таких страницах все заголовки кричат, что они №1 и самые важные. Но если важно всё, то уже ничего не важно.
Не надо так делать, об этом теперь пишет сама спецификация. За уровнем заголовков нужно следить самим. На самом деле, это не так сложно: на типичной странице вряд ли наберётся структурных частей больше, чем на 3 уровня. Так что не ленитесь.
Нет, погоди. Я ставлю класс на
Вы конечно правы, стили создают визуальную модель важности: крупный чёрный текст важнее, меленький серенький вообще не важен. Но только если вы смотрите на такую страницу.
Есть две важные группы пользователей, которые читают вашу страницу по тегам разметки. Они не смотрят насколько крупный и чёрный ваш
. Это читалки и роботы. С роботами всё понятно: это поисковики, которым нужно помогать понимать ваши страницы.
Читалками или скринридерами пользуются люди, которые плохо или совсем не видят ваши интерфейсы, или не могут управлять браузером привычным образом. VoiceOver, NVDA, JAWS читают содержимое вслух и ориентируются только по значимым тегам. Элементы div и span не значат ни-че-го, какие бы классы и стили вы не накрутили. Такой сайт — как газета без заголовков, просто месиво текста.
Да какая газета! Очнись, 2017 на дворе, я изоморфное одностраничное приложение делаю, а не стенгазету. У меня тут стейты компонентов — нафига семантика там, где нет текста? Очень хороший вопрос.
Все читалки идут по странице тег за тегом, от первого к последнему. И читают подряд всё, что внутри. Крайне неэффективно: каждая страница начинается с шапки и пока её пройдёшь, забудешь за чем шёл. Поэтому у читалок есть специальные режимы, показывающие только важные части страницы. Структурные элементы header, nav, main и другие, все ссылки, все заголовки.
Если вывести все заголовки и прочитать их, можно составить ментальную, а не визуальную модель страницы. А потом взять и сразу перейти к нужной секции, выбрав её заголовок. Меню, поиск, каталог, настройки, логин — все эти части вашего приложения можно озаглавить, чтобы упростить доступ к ним.
Думайте не только о том, как выглядит ваша вёрстка, но и о том, насколько логично организована разметка. Не забывайте о заголовках: пусть стили показывают, а заголовки рассказывают о ваших страницах или приложениях.
Заголовки h1, h2, h3: как правильно написать SEO-теги на сайте?
Зачем нужны заголовки H1 — H6
Заголовки необходимы, чтобы коротко описать основную тематику текста на странице, грамотно его структурировать, выделить разделы, показать их иерархию. С помощью заголовков пользователю будет намного проще ориентироваться в контенте и находить нужный ему материал.
Иерархия заголовков на странице
Пример иерархии с правильной вложенностью:
Пример визуального отображения заголовков в тексте:
Как заголовки в тексте влияют на продвижение?
Правильно оформленные заголовки помогают пользователю ориентироваться на странице. Текст с удобной структурой и интересными заголовками привлекает посетителей и побуждает их дольше оставаться на странице. Это положительно отражается на поведенческих характеристиках сайта и способствует росту его позиций в результатах поиска.
Яндекс и Google рекомендуют использовать заголовки и подзаголовки для удобства пользователей.
Заголовки помогают и поисковым роботам быстрее разобраться со структурой документа, определить характер и качество контента. Содержимое заголовков учитывается поисковыми системами для определения релевантности страницы поисковому запросу.
Слова, размещенные в заголовке Н1, получают больший вес, чем остальной текст на странице.
Заголовок H1
Неправильное употребление данного заголовка может негативно сказаться на ранжировании станицы, именно поэтому его написанию и оптимизации следует уделить особое внимание.
Правила, которые нужно соблюдать при написании Н1
Правильно написанный заголовок Н1:
располагается выше текста и заголовков следующих уровней и пишется шрифтом наибольшего размера;
отражает содержание текста;
присутствует на странице в единственном экземпляре, если иного не требует логическая структура текста;
не совпадает с Тitle или другими тегами;
уникален для каждой страницы;
не слишком длинный (60-70 символов) — хотя при ранжировании учитывается больше слов, чем выводится на экран, надо учитывать, что чем больше слов в заголовке, тем меньше будет «вес» каждого из них по формуле БМ25;
не должен быть переоптимизированным;
Как прописывать ключевые слова в Н1?
Заголовок на главной странице должен содержать в себе релевантные запросы. Это значимый фактор ранжирования для поисковых систем. На страницах с описанием конкретных товаров можно использовать заголовки с низкочастотными ключевыми словами.
Ключевое слово должно находиться как можно ближе к началу заголовка.
Избегайте переспама в Н1. Не стоит употреблять слишком много ключевых слов и включать фразы в прямом вхождении, если они звучат неестественно. Используйте разные словоформы и разбавленные вхождения.
Употребление заголовков Н1 и Тitle
Н1 не должен совпадать с МЕТА-тегом Тitle — заголовком, который описывает содержимое страницы для поисковых систем, а также отображается во вкладке браузера. Тitle можно увидеть и в качестве заголовка сниппета в поисковой выдаче.
Использование одинаковые ключевых слов в МЕТА-теге Тitle и заголовке H1 создает угрозу наложения санкций со стороны поисковых систем. Поскольку Тitle и H1 имеют большое значение для ранжирования сайта в результатах поиска, то написание одних и тех же ключевых слов в данных элементах может быть расценено как попытка искусственного увеличения их веса.
Страницы с совпадающими Title и Н1 показывает отчет «Ошибки МЕТА тегов» в разделе «SEO-аудит» сервиса «Лабрика».
Сколько раз можно использовать заголовок Н1 на странице?
Правилами языка HTML 5 допускается использование нескольких заголовков Н1.
Согласно нашим исследованиям, Google не считает наличие нескольких заголовков Н1 критической ошибкой. Специалист компании Мэтт Каттс также говорил о возможности размещения на странице нескольких тегов H1 в тех случаях, когда этого требует логическая структура контента. Однако он рекомендовал не злоупотреблять этим тэгом и не применять его без необходимости. Например, не стоит выделять тэгами заголовка значительные фрагменты текста. Это, как и слишком частое использование заголовков, не соответствующее структуре статьи, может привести к понижению страницы в результатах поиска.
Яндекс
Для Яндекса присутствие нескольких Н1 на странице является отрицательным сигналом ранжирования.
Наличие на странице нескольких заголовков Н1 можно обнаружить с помощью отчета «Ошибки МЕТА тегов» в разделе «Технический аудит» сервиса «Лабрика».
Как написать «цепляющий» заголовок?
Чтобы заголовок привлекал внимание пользователей он должен:
сразу показать читателю полезность данного контента — например, предложить решение проблемы, получение какой-либо выгоды и т. п.:
«Как писать заголовки в SMM»;
добавлять интригу — обещать какую-либо эксклюзивную, самую полную, самую актуальную информацию:
«Создаем самый надежный пароль и запоминаем его»;
предоставлять точные, конкретные данные в цифрах — это вызовет больше доверия:
«100+ заголовков, привлекающих внимание»;
обозначать целевую аудиторию, то есть указывать, для кого предназначен контент страницы:
«Как придумать заголовок к статье? Шпаргалка копирайтера»;
«Получайте новости о конкурсах и грантах быстрее всех!»;
бросать читателю вызов, предлагать ему проверить свои знания:
«А вы знаете, как правильно читать книги?».
Помните, что заголовок должен соответствовать контенту страницы. Если вы обманете ожидания читателя, вызванные заголовком, то потеряете доверие к следующим своим текстам.
Правила оформления заголовков Н2 — Н6
располагаться в строгом соответствии с уровнем иерархии;
раскрывать тематику раздела;
начинаться с новой строки;
отличаться по стилю от основного текста и заголовков других уровней;
Заголовки не должны:
включать другие теги, например, для дополнительного выделения жирным шрифтом;
использоваться для выделения фраз и предложений, не являющихся заголовками по смыслу;
избыточно наполняться ключевыми словами;
находиться в элементах меню и содержать активные ссылки.
Переспам ключевыми словами и наличие тегов в заголовках Н1, Н2, Н3 можно найти с помощью отчета «Тошнота слов на страницах» в разделе «SEO-аудит» сервиса «Лабрика».
В шаблонах многих систем управления контентом (CMS) заголовок Н1 отображается как название страницы. В других CMS Н1, как и подзаголовки в тексте, нужно вручную прописывать в содержимом страницы с помощью редактора. Для этого нужный текст выделяется, а в меню выбирается заголовок соответствующего уровня. Проверьте, как прописываются заголовки в систем управления вашего сайта.
Пример заполнения заголовков в WordPress:
