Что такое заголовок первого уровня

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

— . Такие теги являются элементами разметки HTML и служат для определения важности заголовков: чем больше номер, тем ниже важность заголовка. Следовательно, h1 — главный заголовок на странице, который размещают над текстом. А подзаголовки h2-h6 проставляются по принципу вложенности.

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

Главный заголовок

h1 — это обязательный заголовок для всех страниц. Это может быть название страницы, статьи или товара, которое несет конкретную информацию, о чем будет читать пользователь. Важно отметить, что многие путают этот заголовок с (заголовком страницы). Title отображается вверху экрана в браузерной строке, когда открыта страница ресурса. Тег прописывается в шапке страницы между , а теги – указываются в «теле» страницы: .

Как использовать заголовок h1

  • На странице можно использовать только один заголовок первого порядка. Он должен стоять в начале текста, быть видимым пользователю и отражать суть информации.
  • Цель заголовка — побудить читателя открыть страницу и прочитать текст.
  • Тег не заканчивается точкой.
  • Длина заголовка не должна превышать 65 символов.
  • В заголовке старайтесь использовать самое частое слово в тексте.
  • Тег не должен быть ссылкой или картинкой.
  • Перед тем, как вручную прописывать h1, убедитесь, что движок не задает его автоматически;
  • Проверьте, закрыли ли вы заголовок. Если нет, то это может сбить с толку поисковики. Такие страницы рискуют быть понижены в рейтинге.

Заголовок второго порядка

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

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

  • Используйте на странице 2 и более заголовка h2, которые будут отражать суть текста под ним.
  • Тег не должен быть изображением или ссылкой.

Заголовки h3 — h6

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

Как использовать заголовки h3 — h6

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

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

Если не будет выдержана иерархия и четкая структура, заголовки младшего порядка, например, h6, могут слиться с обычным текстом. Размер шрифта идет по убыванию номера заголовков. От h1 — самого крупного до h6 — самого мелкого.

Иерархия заголовков на странице:

Заголовок первого уровня — h1

Заголовок второго уровня — h2

Заголовок третьего уровня — h3

Заголовок четвертого уровня — h4
Заголовок пятого уровня — h5
Заголовок шестого уровня — h6

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

Заголовок

Первый подзаголовок

Параграф текста

Второй подзаголовок

Параграф текста

Заключение

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

Заголовок H1: секреты и правила написания

Проверьте наличие и корректность тега Н1 на любой странице сайта.

Что такое тег H1 и зачем он нужен

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

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

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

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

Основные правила написания заголовка H1

Длина заголовка H1

Рекомендуем использовать текст из 10-60 символов с обязательным вхождением основного ключа страницы. У некоторых CMS существуют специальные плагины, анализирующие контент страницы, с их помощью можно контролировать длину заголовков.

Отличия H1 и Title

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

Важно! Для формирования быстрых ссылок в сниппете стоит сделать H1 и Title одинаковыми, содержащими одно-два слова.

Содержание H1

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

H1 в иерархии заголовков

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

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

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

Ссылки в H1

В заголовке первого уровня не должно быть ссылок. Дело в том, что поисковая система считает не то, что видит пользователь, а код сайта. И все знаки, необходимые для добавления ссылки в текст через HTML, может принять за содержимое заголовка. Допустимо ставить ссылки в заголовки H2-H6, если это оправдано и полезно для внутренней перелинковки. Также нежелательно в вкладывать стили.

Как написать привлекательный заголовок?

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

«Заказ кухни под ключ не выходя из дома» — вариант для H1. УТП можно добавить в H2: «Замерим бесплатно, изготовим за 30 дней».

Если вы пишете заголовки для интернет-магазина, постарайтесь конкретизировать, что продаете. «Каталог» ни о чем не говорит пользователю, лучше написать «Холодильники и морозильные камеры».

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

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

Как правильно написать SEO заголовки h1, h2, h3. Проверка тегов на странице

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

Иерархия заголовков на странице

В языке HTML, на котором создаются web-стрницы, существует 6 уровней заголовков — от тега h1 до h6. Каждый из них в иерархической цепочке подчинен предыдущему. Самый главный заголовок – тег h1, в него вложен подзаголовок h2, соответственно, h3 уже разграничивает текст внутри h2 и т. д.

Пример иерархии с правильной вложенностью тегов:

Как мы видим, в такой иерархии прослеживается логическая последовательность, благодаря которой становится понятно содержание текста и тематика каждого раздела. Недопустимо нарушать иерархию, например, использовать тег Н3 перед Н2 или использовать тег Н6, если на странице нет Н4 и Н5. Как правило, для оформления текста на сайте достаточно тегов Н1 – Н3. Остальные используют в редких случаях.

Пример визуального отображения заголовков в тексте

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

Как заголовки в тексте влияют на продвижение сайтов?

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

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

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

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

Заголовок (тег) h1

Тег h1 – самый главный заголовок на странице. Он считается названием документа и должен отображать суть размещенного контента. Это поможет пользователям и поисковым роботам точно определить назначение страницы.

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

Правила, которые нужно соблюдать при написании Н1

Правильно написанный заголовок уровня Н1:

располагается выше текста и заголовков следующих уровней и пишется шрифтом наибольшего размера;

отражает содержание текста;

присутствует на странице в единственном экземпляре, если иного не требует логическая структура текста;

не совпадает с Тitle (тайтл) или другими тегами;

уникален для каждой страницы;

длина тега имеет значение: не слишком длинный (количество 60-70 символов) — хотя при ранжировании учитывается больше слов, чем выводится на экран, надо учитывать, что чем больше слов в заголовке, тем меньше будет “вес” каждого из них по формуле БМ25;

содержит в себе ключевое слово – это значимый фактор ранжирования для поисковых систем;

не должен быть переоптимизированным;

в конце не ставится точка (при этом может стоять восклицательный или знак вопроса).

Как прописывать ключевые слова в Н1?

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

Ключевое слово должно находиться как можно ближе к началу заголовка.

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

Не обязательно всегда начинать заголовок со слов «купить» или «цена» – это может стать негативным сигналом для поисковых систем.

Употребление заголовков Н1 и Тitle

Н1 не должен совпадать с МЕТА-тегом Тitle — заголовком, который описывает содержимое страницы для поисковых систем, а также отображается во вкладке браузера. Тitle можно увидеть и в качестве заголовка сниппета в поисковой выдаче.

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

Страницы с совпадающими тегами Title и Н1 показывает отчет «Ошибки МЕТА тегов» в разделе «SEO-аудит» сервиса «Лабрика».

Страницы с совпадающими тегами Title и Н1

Сколько раз можно прописать заголовок (тег) Н1 на странице?

Только один! Правилами языка HTML 5 допускается использование нескольких заголовков Н1.

Тег h1 для Google

Согласно нашим исследованиям, Google не считает наличие нескольких заголовков Н1 критической ошибкой. Специалист компании Мэтт Каттс также говорил о возможности размещения на странице нескольких тегов H1 в тех случаях, когда этого требует логическая структура контента. Однако автор рекомендовал не злоупотреблять этим тэгом и не применять его без необходимости. Например, не стоит выделять тэгами заголовка значительные фрагменты текста. Это, как и слишком частое использование заголовков, не соответствующее структуре статьи, может привести к понижению страницы в результатах поисковой выдачи.

Тег h1 для Яндекс

Важно понимать: для Яндекса присутствие нескольких тегов h1 на странице является отрицательным сигналом ранжирования в интернете.

Информацию по наличию на странице нескольких заголовков h1 можно получить с помощью отчета «Ошибки МЕТА тегов» в разделе «Технический аудит» сервиса «Лабрика».

Ошибки МЕТА тегов

Как составить «цепляющий» заголовок?

Создание привлекательных заголовков – сложная работа. Чтобы заголовок привлекал внимание пользователей он должен:

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

«Как писать заголовки в SMM»;

добавлять интригу — обещать какую-либо эксклюзивную, самую полную, самую актуальную информацию:

«Создаем самый надежный пароль и запоминаем его»;

быть понятным и предоставлять точные, конкретные данные в цифрах — это вызовет больше доверия:

«100+ заголовков, привлекающих внимание»;

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

«Как придумать заголовок к статье? Шпаргалка копирайтера»;

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

«Получайте новости о конкурсах и грантах быстрее всех!»;

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

«А вы знаете, как правильно читать книги?».

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

Правила оформления заголовков Н2 — Н6

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

Читайте также:  Что такое завязка в литературе 7 класс кратко

располагаться в строгом соответствии с уровнем иерархии;

раскрывать тематику раздела;

начинаться с новой строки;

отличаться по стилю от основного текста и заголовков других уровней;

Заголовки не должны:

включать ниакие другие теги, например, для дополнительного выделения жирным шрифтом;

использоваться для выделения фраз и предложений, не являющихся заголовками по смыслу;

избыточно наполняться ключевыми словами;

находиться в элементах меню и содержать активные ссылки.

Переспам ключевыми словами и наличие тегов в заголовках Н1, Н2, Н3 можно найти с помощью отчета «Тошнота слов на страницах» в разделе «SEO-аудит» сервиса «Лабрика».

Тошнота слов на страницах

Способы: как сделать заголовок Н1 – Н6 в CMS ?

Обычно в шаблонах систем управления контентом (CMS) заголовок Н1 отображается как название страницы. В других CMS Н1, как и подзаголовки в тексте, нужно вручную добавить в содержимом страницы с помощью редактора. Для этого нужный текст выделяется, а в меню выбирается заголовок соответствующего уровня. Проверьте, как прописываются заголовки в систем управления вашего ресурса.

как сделать заголовок Н1 - Н6

Пример в WordPress:

Спецификация HTML описывает шесть видов заголовков: , , , , и . Число в названии элемента отражает его приоритет. При этом самый общий, а наиболее специфичный.

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

Познание

Прежде чем мы подробно рассмотрим как работают вспомогательные технологии, надо понять причины, по которым СМИ используют главы, разделы, подразделы и параграфы. Дробление контента на отдельные части облегчает его понимание, усвоение, запоминание и работу со ссылками.

Несмотря на то, что интернет не печатное издание, он заимствует у типографики все хорошие практики. Заголовки в HTML аналогичны соглашениям в типографике. Это одна из тех вещей, которую каждый считает чем-то очевидным, но она на самом деле помогают огромному количеству людей. Когнитивные нарушения широко распространены и перевешивают другие виды нарушений. Группировка контента на логические части помогает всем: от людей с патологическим состоянием организма, например, деменцией, до людей с временными ограничениями, такими как бессонница или осваивающими новые навыки.

Навигация с помощью заголовков

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

Создание списков заголовков

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

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

Заголовки первого уровня

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

Алгоритм структуры документа (несуществующий)

К сожалению, существует заблуждение о том, что можно использовать заголовки первого уровня для каждого элемента секционного контента на странице, а браузер дальше сам во всём разберётся с помощью алгоритма построения структуры документа (Document Outline Algorithm). Этот алгоритм спекулятивная фантастика. В момент написания этой статьи алгоритм не поддерживается ни одним браузером. По этой причине мы должны придерживаться подхода «Priority of Constituencies», описанного в спецификации, и использовать другие заголовки.

Другие заголовки

Заголовки от второго до шестого уровней должны последовательно размещаться за первым и описывать основные моменты содержимого страницы.

Например, вот структура этой статьи:

Посмотрев на этот список, вы быстро поняли про что статья. Неплохо, да?

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

Когда вы завершили тему, то можете закрыть вложенные заголовки. Это единственный случай, когда допустимо использовать «пропущенные» уровни: вы закончили описывать конкретную проблему и вернулись к более общей теме.

Этот пример показывает как правильно использовать заголовок пятого уровня («Шеф-повар принца Конде») перед заголовком третьего уровня («18 век»), пока родительские заголовки располагаются последовательно друг за другом. Если бы заголовок третьего уровня шёл перед заголовком пятого, то это было бы уже неправильно.

Избыточная описательность

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

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

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

Другие сервисы

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

Как и скринридеры, сервисы вроде Google Docs и Dropbox Paper могут автоматически создавать перечни заголовков, чтобы помочь вам быстрое понять содержание документа и перемещаться по нему. Многие текстовые редакторы тоже умеют быстро формировать из заголовков динамически обновляемые оглавления, что делать вручную очень утомительно и трудоёмко. И, благодаря совместимости HTML, мы даже можем воссоздать такую навигацию с помощью расширения для браузера!

Стилизация

Все слишком часто забывают, что CSS-классы могут применяться к заголовкам, как к любому другому элементу HTML внутри .

Семантика

Причина, по которой я это упомянул, заключается в том, что элементы заголовков часто используются из-за того, как они выглядят («О, мне нравится цвет и шрифт , использую-ка я его!»), а не из-за того, какой приоритет содержимого они описывают (Бриошь — это вид сдобы). Это распространённая ошибка.

В идеальном академическом мире мы соблюдаем материальную честность (material honesty) заголовков, определяя их размер и стиль в соответствии с тем, какой уровень иерархии они описывают.

Однако мы живём в реальном мире. Современные сайты и веб-приложения — это сложные вещи. Их разрабатывают люди с разным уровнем опыта, интересами, знаниями и возможностями при проектировании и написании кода.

Целесообразность

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

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

Служебные стили

Такие методологии как Utility-First CSS помогают более гибко настраивать внешний вид заголовков:

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

Сброс

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

Этот небольшой пример оборонительного дизайна (defensive design) заставляет задуматься над тем, как структура документа формируется в зависимости от его внешнего вида. Эти стили объявляются после импорта CSS-сброса, так как могут переопределить стили из файла со сбросом.

Именование

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

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

Я также встречал случаи, когда такой подход допускал вообще не использовать для некоторых заголовков семантические теги («А, я могу сделать этот похожим на !»). Не надо так!

Подводя итоги: воспользуйтесь моментом

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

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

Стоит обратить внимание и на то, что заголовки, подобно иерархическим форматам данных, таким как JSON, могут быть вложены в другие, если они логически связаны. Внутри заголовка второго уровня вы можете использовать заголовки третьего. Каждый из этих подзаголовков может, в свою очередь, иметь вложенные подзаголовки четвёртого уровня.

Заголовки h1-h6: детальный обзор, примеры

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

Что такое H1?

H1 – это главный заголовок в статье, заголовок первого уровня. Каждая страница в интернете имеет свою структуру. Заголовки H1-H6 как раз и позволяют правильно структурировать материалы, причем как для поисковиков, так и для пользователей. H1 – главный заголовок, H2-H6 второстепенные, вложенные подзаголовки. В коде заголовки выглядят так:

сам заголовок

, цифра как раз и обозначает уровень заголовка.

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

Условие 1. Ключевые слова в заголовках

Для этого у вас должно быть разработано качественное семантическое ядро – отнеситесь к нему крайне ответственно и помните, что один и тот же ключ вставлять на все страницы сайта нельзя. Релевантность всему голова: нужно соответствовать ожиданиям клиентов и поисковиков. В заголовках главной страницы можно брать среднечастотные и высокочастотные запросы. А на товарных страницах (карточка товара) вполне допустимы заголовки с низкочастотными ключами. Ключ должен вести на конкретную позицию или единицу, быть точным, а не обобщенным.

Размещая ключевые слова, делайте это аккуратно: не злоупотребляйте ключами и не составляйте спамные заголовки (например, купить квартиру Москва, купить сумка холодильник, купить мотоцикл Красноярск цена, моя твоя не понимать и т. д.). Сохраняйте красоту фразы и ее логичность. В великом и могучем русском языке слова спрягаются и склоняются, а роботы сейчас понимают смыл, разбираются в языке не хуже нас с вами! И не частите – спам очевиден всем, а так и до Баден-Бадена рукой подать, ну и не забывайте про Панду от Google.

Пример, где количество ключей зашкаливает, перебор.

переоптимизация текста

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

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

Помните, что текст создается не только для поисковых машин, но и для людей. И вообще роботам нравятся человечные, простые и понятные тексты. Если в заголовке ключевые слова органично встанут в начало предложения, то сработает чуточку лучше. Т.е. с точки зрения оптимизации страницы под ключевое слово “гостиницы Москвы” лучше отработает заголовок “Гостиницы Москвы – официальные сайты, обзоры, фото”, чем “Обзоры, фото и официальные сайты гостиниц Москвы”.

Условие 2. Теги –

Размещая тексты на сайте, не забудьте правильно расставить теги. Теги для заголовков текста определяются следующим HTML-кодом: -. По нашим наблюдениям, вполне хватает двух тегов — -. Сейчас большие тексты люди не читают, и даже исходя из логики вещей, вложенность такого количество заголовков не нужна. Исключение могут составлять страницы, где много видео, картинок, интерактивных элементов и т.д. Но это все же исключение, а не правило.

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

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

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

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

Читайте также:  Что такое заглавная буква в пароле пример и строчная

Наводим порядок. Теги – расставляются по принципу иерархии: тег важнее тега . На деле это выглядит вот так:

правильная иерархия тегов

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

неправильная иерархия тегов

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

Быстрые ссылки – это короткий путь из результатов выдачи к важной информации на вашем сайте. Чтобы сформировать такие ссылки, должно быть вхождение ключа и ссылка с ключевым словом на самом сайте на эту страницу. Быстрые ссылки:

  1. Сокращают путь до целевого действия.
  2. Распределяют трафик и по внутренним страницам сайта.
  3. Делают сниппет ресурса более привлекательным в выдаче.

пример формирования быстрых ссылок

Согласно общим рекомендациям тег должен включать те же ключевые слова, что и Title этой страницы, но при этом теги не должны полностью дублировать друг друга.

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

В идеале, чтобы этот текст совпадал с текстами ссылок, ведущих на эту страницу.

Быстрые ссылки Яндекс позволяет редактировать. Например, убрать один из разделов либо выбрать ему другое имя, более привлекательное для ваших потенциальных клиентов. Сделать это можно в разделе Яндекс.Вебмастер → Информация о сайте → Быстрые ссылки.

управление сформированными быстрыми ссылками

Расставляем приоритеты. Никаких километровых заголовков -: включаем максимально важное. Это некрасиво, сложно и неудобно читается. Маркетинговую составляющую, если она длинная, можно обыграть в качестве подзаголовка.

длинный заголовок h1

Коротко-ясно-понятно: ключевое слово на первом месте, УТП (уникальное торговое предложение) вынесли за пределы главного заголовка, но оставили его вначале для привлечения внимания.

правильная длина заголовка h1

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

Бытует мнение, что на странице H1 можно использовать только один раз! Но это не так. Гипотетически может встречаться несколько раз, если это оправдано. Но в этом случае текста на странице должно быть очень много, в нем должны быть абсолютно не взаимосвязанные по логике блоки. Такое сейчас можно встретить в огромных мануалах или инфостатьях. На среднестатистическом сайте и в текстах на нем несколько употреблять не нужно.

Не шутите с этим, ведь этот тег в плане оптимизации занимает второе место после . Он должен быть самым интересным – ярким и привлекательным (лучше в этом месте использовать оффер) и содержать самое частотное ключевое слово. Ставим его в начало текста – перед ним ничего не пишем, и желательно в начале заголовка использовать ключ – плюсик к оптимизации. Еще примеры неправильного и корректного использования:

повтор заголовка h1

правильная иерархия заголовков

И еще пример, как это выглядит в коде страницы. Запомните, что так делать не рекомендуется. Два H1 без веских на то причин:

два h1 на одной странице

Проверяем написание. Ошибки отпугивают людей, сразу возникает мысль: и какой школьник это писал? Проверяли ли текст? Гораздо опаснее, если роботы вас не поймут и ваш сайт в заветный топ не выведут. Так его никто и не увидит и ошибок не найдет. Вот пример с опечаткой.

опечатка в заголовке h1

Обходимся без сложной структуры. Не стоит вкладывать в теги

– какие-то другие теги (например, так

Купить футболки с надписями

), поскольку ВЕСЬ текст внутри может расцениваться поисковиком как ЗАГОЛОВОК.

Еще нежелательно вкладывать стили (как здесь: Текст), так как код становится более объемным, сложным и длинным. Следовательно, увеличивается время чтения кода роботом, это может затруднить индексацию.

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

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

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

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

А если у вас возникнут сложности – обращайтесь к нашим специалистам, мы готовы проверить, правильно ли прописаны заголовки у вашего сайта, корректно прописать в случае ошибок и ответить на любые вопросы. Составление заголовков для 1 страницы (+подбор 3-х релевантных ключей) – от 450 рублей.

© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна.

H1 — базовый заголовок первого уровня

H1 - базовый заголовок первого уровня

База знаний

Как оптимизировать страницу с помощью html заголовка первого уровня H1? Какая должна быть его длина и сколько тегов H1 можно использовать на странице? Примеры хороших и плохих заголовков. Обо всем подробнее читайте в данной статье.

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

По-умолчанию, стили заголовков отличаются: H1 имеет наибольший размер, далее по нисходящей, соответственно, H6 — наименьший из заголовков. Визуальное отличие в отображении сделано для пользователей, которые посещают web-ресурсы. Для роботов имеет значение синтаксис .

Синтаксис заголовка H1

В Html-коде страницы заголовок H1, как правило, размещается в пределах парного тега body как можно ближе к началу страницы. Выглядит вот так:

Пример использования тега h1 на данной странице:

H1 - базовый заголовок первого уровня

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

и закрывающим тегом

и является заголовком первого уровня. Заголовки H2-H6 имеют аналогичный синтаксис.

Важно! Заголовки H1-H6 должны иметь иерархическую и смысловую последовательность. Заголовок третьего уровня не должен содержать в себе блок с заголовком второго уровня, также как и заголовок четвертого уровня не должен находиться внутри блока с заголовком второго уровня.

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

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

Для чего нужен заголовок H1?

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

Заголовок страницы в отличие от тега meta description виден всем пользователям сайта. H1 является смысловым обобщением содержания web-страницы .

Особенности заголовка H1

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

Что писать в H1?

Как уже говорилось ранее, H1 — это заголовок первого уровня как в визуальном плане, так и в смысловом. Базовый заголовок должен отражать содержание всей страницы, а не отдельных ее частей. H1 не должен дублировать тег title, но также как title и description должен содержать главное ключевое слово страницы. У тега H1 высокая вероятность попасть в заголовок динамического сниппета, поэтому дублирование H1 и title является плохой практикой. Вы таким образом сужаете вариативность и релевантность своего сниппета по низкочастотным запросам.

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

H1 - базовый заголовок первого уровня

Размер и длина заголовка H1

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

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

H1 - базовый заголовок первого уровня

По запросу «Купить мужские джинсы» в ТОП-5 выдачи Яндекс (на момент написания статьи) присутствует один из лидеров E-commerce интернет-магазин Lamoda.ru. На скриншоте видно, что заголовок первого уровня «Мужские джинсы» гораздо меньше по размеру, чем описательный блок , и другие текстовые элементы, размещенные на странице.

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

Длину H1 рекомендуется делать не более 60 символов, так как поисковые системы учитывают их ограниченное количество. Если вы не можете уместиться в этот лимит, не потеряв смысловую нагрузку заголовка, напишите заголовок длиной более 60 символов. В идеале нужно придерживаться данной цифры, так как H1, как говорилось ранее, может быть использован при формировании динамического сниппета. А отображаемая длина заголовка (ссылки) в сниппете ограничена .

Сколько заголовков H1 может быть на странице?

Согласно спецификации HTML 5 количество заголовок первого уровня возможно использовать для каждого тега article или section. Яндекс в разделе представления информации о сайте не упоминает о возможном количестве использования H1, а лишь говорит о том, что должна быть соблюдена иерархия использования заголовков. Официальный представитель Google Джон Мюллер на официальном канале youtube Google Webmasters отмечает, что использование множественных заголовков H1 на одной странице не является проблемой, если это не нарушает иерархию web-документа.

Что говорит практика? На практике подавляющее большинство оптимизаторов, seo-компаний и подрядчиков использует при структуризации страниц только 1 заголовок H1. Заголовок первого уровня также не используется при оформлении элементов интерфейса: меню, сайдбары и т.д. Нет объективных исследований по влиянию количества заголовков H1 на повышение позиций сайта в выдаче или переоптимизацию ресурса, да и согласно официальным данным поисковых систем такие исследования не нужны.

Мы рекомендуем все-таки не отходить от общепринятой практики и использовать только 1 уникальный H1 заголовок на странице. В спецификацию HTML достаточно часто вносятся изменения. Для оптимального построения иерархии и структуризации страниц большинству web-проектов будет достаточно использовать первые три заголовка. Не стоит экспериментировать, так как все необходимые инструменты для создания иерархии у вас уже есть .

Проверить заголовок H1 на странице

Существует 3 простых способа проверить заголовок H1 на странице:

  1. Кликните правой кнопкой мыши на участок текста, и в зависимости от вашего браузера нажмите кнопку «Посмотреть код» (Chrome), «Исследовать элемент» (Mozilla Firefox) или «Проверить объект» (Safari). У вас откроется панель вебмастера как на скриншоте ниже. В html коде страницы вы увидите разметку текста, и поймете какого уровня заголовок перед вами и заголовок ли это вообще.
  2. Сочетание клавиш Ctrl+Shift+C вызывает панель вебмастера. Кликните в любое место представленного html кода. Далее нажмите сочетание клавиш Ctrl+F для поиска по содержимому кода, и вбейте в поисковую строку «h1».
  3. Кнопка F12 вызывает панель разработчика. Поиск элемента H1 делается аналогично предыдущему способу.

H1 - базовый заголовок первого уровня

8 ошибок при написании H1

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

[su_list icon=»icon: minus» icon_color=»#005a8c»]

  • Посторонние элементы. В H1 кроме текста не должно быть ничего. Некоторые вебмастеры думают, что они усилят заголовок, обернув его также в тег strong или b, придав ему жирное начертание, итак заложенное в стилях. Это плохая практика, старайтесь ее избегать. Не рекомендуем также чрезмерно использовать пунктуацию (знаки препинания в заголовках). Старайтесь делать их простыми и лаконичными.
  • Отсутствие или переизбыток ключевых слов. Из крайности в крайность. H1 — это квинтэссенция вашей семантики на странице. Ключевое слово должно присутствовать в заголовке. Отсутствие ключевых слов в главном заголовке страницы поставит под вопрос ее релевантность поисковым запросам.
  • Дублирование. Ошибкой является как дублирование title в H1 и наоборот, так и дублирование H1 на разные страницы сайта. H1 должен быть уникальным для всего сайта. Из 2 страниц с одинаковым контентом в выдачу попадет наиболее релевантная.
  • Длина. Старайтесь укладываться в 60 символов. Заголовки H1 по 300-400 символов можно увидеть на многих ресурсах, не следуйте дурному примеру. Также не стоит составлять базовый заголовок из одного слова, если это не головной раздел сайта или общая категория товаров.
  • Грамматика. Грамматические ошибки сводят на нет всю семантическую значимость вашего заголовка. Старайтесь не допускать ошибки в тексте, а в заголовке — тем более!
  • Больше одного H1. Этот вопрос мы подробнее расписали выше. С натяжкой отнесем данный пункт к ошибкам оптимизации.
  • Отсутствие структуры. H1 должен располагаться в начале страницы. Другие заголовки до этого тега присутствовать не должны.
  • Не заполнение H1. Кто-то опускает момент заполнения H1 вообще. Это грубая ошибка, которую нельзя допускать .

Примеры: Хороший H1 vs Плохой H1

Давайте рассмотрим на паре живых примеров заголовок первого уровня H1

Пример #1

[su_list icon=»icon: plus» icon_color=»#005a8c»]

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

H1 - базовый заголовок первого уровня

[su_list icon=»icon: minus» icon_color=»#005a8c»]

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

H1 - базовый заголовок первого уровня

Пример #2

[su_list icon=»icon: plus» icon_color=»#005a8c»]

  • Хороший заголовок. Лаконичный заголовок первого уровня, находится в начале страницы, характеризует категорию товаров с половой сегментацией, является ключевым словом. У H1 отсутствуют посторонние элементы в коде, грамматические ошибки, он не дублируется.

H1 - базовый заголовок первого уровня

[su_list icon=»icon: minus» icon_color=»#005a8c»]

  • Плохой заголовок. Заголовок данного сайта расположен в шапке. Это значит, что H1 «КУПАЛЬНИКИ» дублируется абсолютно на всех страницах сайта, не отражает семантику страницы. По слову «купальники» невозможно понять, что находится на странице: интернет-магазин, блог о купальниках, размерные сетки купальников или что-то еще. В категориях появляется 2 заголовка H1. Также заголовок состоит из одного слова, и не характеризует половую сегментацию товара.

H1 - базовый заголовок первого уровня

Как вставить тег H1 в популярных CMS?

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

WordPress

В WordPress заголовок первого уровня формируется из текстового поля над постоянной ссылкой записи или страницы. Любую CMS можно кастомизировать на свой вкус. В случае отключения основного заголовка, есть возможность вывода H1 с помощью визуального редактора — выпадающий список со словом «Абзац».

H1 - базовый заголовок первого уровня

Bitrix

В панели управления заголовок H1 по-умолчанию формируется во вкладке «Раздел» или «Элемент» в поле «Название». Либо во вкладке SEO в поле «Заголовок раздела», предварительно установив галочку «Изменить для этого раздела и его подразделов».

H1 - базовый заголовок первого уровня

Joomla

В Joomla аналогично другим системам заголовок H1 формируется очень просто. Текстовое поле Title, либо выпадающий список «Paragraph».

H1 - базовый заголовок первого уровня

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

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

Как правильно составить h1 и подзаголовки страницы

author__photo

Большую роль в продвижении сайта играют мета-теги. Это элементы текстовой разметки, которые формируют внешний облик сайта. H1 — один из важнейших текстовых тегов, помещенный в статье перед остальным текстом. Он выполняет роль своеобразной визитной карточки, поэтому его выделяют крупным форматированием и размером.

Зачем нужны правильные заголовки H1, H2, Hx?

Теги H1 и прочие H(2-6) служат для:

  • Повышения позиций сайта в выдаче;
  • Увеличения трафика;
  • Роста дохода коммерческих проектов, как прямого следствия предыдущего пункта.

Сайту необходима комплексная SEO-стратегия. Одним из центральных её элементов является грамотное использование HTML-тегов при создании материалов сайта. Здесь мы говорим о заголовках (header).

Эпоха семантического поиска уже наступила, и поисковики крайне тщательно анализируют сам контент и его структуру.

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

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

Теперь работает продуманный подход к созданию контента:

  • Поисковики всерьёз анализируют содержание текстов и выявляют в них смысловую нагрузку, лаконичность и в некотором роде натуральность. Высокая оценка этих параметров поможет вывести страницу с материалом и сайт в целом на лучшие позиции. Также анализируется и мета-содержимое, то есть, в том числе, те самые теги и разметка. От того, насколько чёткая у контента структура, зависит общая оценка.
  • Качественные тексты способствуют тому, чтобы пользователи проводили на сайте больше времени, проявляли активность. Соответственно, улучшаются поведенческие факторы: время на сайте, глубина просмотра и другие. Поведенческие факторы — фундаментальных комплекс характеристик, на основе которых поисковые системы ранжируют сайт в выдаче. Привлекая посетителей и захватывая их внимание, вы даёте поисковым алгоритмам понять, что сайт информативный и интересный, его следует предлагать пользователям чаще.

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

Тег H1 и H2 и далее до H6 — это HTML теги, в которые заключается текст статьи или иного материала на сайте для того, чтобы обозначить его в качестве заголовка. Иерархия устанавливается от меньшего к большему: заголовок H1 — верхний, и так далее по уровням вложенности. Html тег H1 — самый заметный, он рассказывает, о чём эта страница. В отличие от мета-тегов, таких как Title, Description и других, каждый тег заголовка предназначен для пользователей и виден для них.

Теги H1 и H2

Header 1 прописывается в коде как

Текст заголовка

. Другие заголовки — по аналогии.

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

Вместе с тем, поисковики дают заголовкам больший вес, считывая смысл статьи или контента в первую очередь через структуру заголовков. Остальной текст также анализируется, но ваши заголовки, теги H1, H2, Hx — это смысловой каркас. Если с ними не всё в порядке, у поисковой системы могут возникнуть сомнения и оценка будет снижена.

Заголовок H1 обязателен. H2-H6 опциональны и нужны для удобной организации контента, навигации пользователя по структуре материала — особенно если он большой.

Тег H3

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

Учтите, что теги — один из большого списка факторов ранжирования. Важно не только расставлять теги H1, но и другие. Например, Title и Description. Обращайте внимание на содержание ключевых слов, на внутреннюю перелинковку сайта и другие факторы.

Маркетинг

Как посмотреть статистику во ВКонтакте и провести анализ страницы

Как посмотреть статистику во ВКонтакте и провести анализ страницы

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

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

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

25% скидка на любой первый заказ для новых клиентов

На что влияет тег H1 на сайте

В индустрии существуют дебаты по поводу использования тегов. Они длятся уже не меньше десятилетия и связаны с тем, что никто доподлинно не знает, на что обращает внимание тот же Google. Действительно ли поисковик учитывает мета-тег H1 — то есть, запрограммирован искать его, или схема более сложная?

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

Даже если есть основания считать, что H2-H6 не учитываются поисковиками, они помогают пользователям в навигации. Заголовок H1 в ряде исследований называется одним из факторов, существенно влияющих на внутренние рейтинги сайта, а следовательно и на отводимый ему трафик по соответствующим запросам. В частности, согласно исследованию на портале SearchEngines.com, грамотное использование тега H1 входит в Топ-4 факторов успешного SEO. Кроме того, неуместное использование тега H1 само по себе способно негативно повлиять на рейтинги и трафик.

  • Для пользователей : заголовки — это якоря в сплошном тексте, позволяющие им ориентироваться на странице, искать то, что нужно, оставаясь на сайте как можно дольше.
  • Для поисковиков : с помощью заголовка H1 и других проще читать, понимать и оценивать контент на сайте, а также рассчитывать поведенческие факторы.

На что влияет тег H1 на сайте

Особенности заголовка H1

H1 отличают следующие особенности:

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

Особенности заголовка H1

Что писать в H1

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

Размер и длина заголовка H1

Размер H1 — это исключительно вопрос удобства. Его нужно настраивать так, чтобы посетителям было комфортно читать, а не чтобы заголовок бросался в глаза, затмевая собой остальное. Длину H1 следует делать около 60 символов, так как поисковики принимают во внимание ограниченное число знаков.

Сколько заголовков H1 может быть на странице

Спецификация HTML 5 указывает, что заголовки первого уровня могут применяться для всех тегов article или section. Яндекс не упоминает допустимое число заголовков, но напоминает о важности соблюдения иерархии. Представители Google отмечают, что H1 может быть представлен на странице в количестве нескольких штук, если подобное форматирование не нарушает структуру сайта. На практике заголовок первого уровня чаще всего используют только один раз.

Сколько заголовков H1 может быть на странице

Как проверить заголовок H1 на странице

Это можно сделать несколькими способами:

  1. На странице кликнуть правой кнопкой мыши на любой текстовый фрагмент и выбрать вариант «Посмотреть код».

Как проверить заголовок H1 на странице

  1. Вызвать специальную панель комбинацией Ctrl+Shift+C. После этого можно кликнуть на любое место кода. Комбинация Ctrl+F включит функцию поиска по содержимому, нужно просто указать в поисковой строке запрос «H1».
  2. Через F12. Таким способом вызывается консоль, на которой можно посмотреть заголовок.

Как сделать правильный тег H1

Чтобы следовать лучшим SEO-практикам, вам нужно обратить внимание на следующие аспекты:

  • Необходимо присваивать каждой странице уникальный заголовок H1, отражающий её содержание, с использованием ключевых слов.
  • Используйте H2-H6 там, где это уместно. Практика показывает, что обычно не имеет смысла уходить дальше H3.
  • В теге H1 следует указывать высокочастотные ключевые слова, имеющие наибольшее число запросов. Рассмотрим запрос « Как выбрать ноутбук ». Согласно статистике, его искали чаще других похожих фраз — например, «Как выбрать компьютер» или «Как выбрать игровой ноутбук». Значит, можно включить данный запрос в заголовок H1 целиком, если статья действительно соответствует его тематике.
  • В H2-H6 можно вписывать менее важные ключи, соответствующие средне- и низкочастотным запросам, а также «хвосты» — например, «Как выбрать ноутбук ACER ».
  • Необходимо помнить, что H2 и остальные заголовки должны быть содержательными и раскрывать какую-то частную тему, а не запутывать читателя кликбейтами.
  • Старайтесь не переспамить заголовки ключами. Не употребляйте одно и то же слово, даже если это, например, главный ключ, в двух заголовках подряд, вне зависимости от их уровня. Более того, не рекомендуется несколько раз употреблять это слово в тексте после переспама в заголовках. Старайтесь заменять повторяющиеся ключи синонимами.
  • Ограничивайте длину тега H1 и других двумя предложениями, не больше. Длина тега H1 с позиций символов — немного короче, чем у тега Title. Не более 50 символов. Хорошо, если вы используете плагин для CMS, который отслеживает качество вашего текста и тегов.
  • Не ставьте в конце заголовка точку. Это не только не соответствует правилам языка и вёрстки, но и может помешать поисковику. Если в заголовке H1 два предложения, то после первого ставится точка, а после второго, если оно тоже повествовательное — нет.
  • Если предложение в заголовке вопросительное или восклицательное, ставить соответствующие знаки можно. Например, Как отказаться от малоэффективных сервисов и перейти на Колтач?
  • Можно менять форму слова, используемого в ключе — в частности, число, время, падеж. Но нельзя менять часть речи — например, анализировать и аналитика — это разные слова как с точки зрения правил русского языка, так и по правилам формирования заголовка H1. Во всяком случае, старайтесь этого не делать, так как точные вхождения ключей оцениваются выше.
  • Также при формировании заголовков из ключей лучше не прерывать полную форму релевантного запроса — Как выбрать лучший коллтрекинг .

Как сделать правильный тег H1

Как изменить H1

В H1 можно не только изменять текст, но также увеличивать или уменьшать шрифт, корректировать цвет. Такие правки вносят в CSS. Для этого нужно:

  • открыть сайт;
  • навести курсор на заголовок первого уровня;
  • кликнуть правой кнопкой мыши на «Просмотр кода»;
  • в появившимся окне отыскать подсвеченный элемент;
  • заменить теги: logo h1 — смена текста заголовка, color — смена цвета, font-family — шрифт.

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

Как вставить тег H1 в популярных CMS

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

WordPress

В этой CMS заголовки H1 вписывают в текстовое поле, которое располагается над постоянной ссылкой записи. Остальные заголовки можно выстроить через вкладку «Заголовки»: выделить текст, кликнуть на кнопку и выбрать нужный вариант.

WordPress

Bitrix

В этой системе написать заголовок можно двумя способами:

  • на панели управления выбрать вкладки «Элемент» и «Раздел», там вписать заголовок первого уровня;
  • разрешить изменения для поля «Заголовок раздела» и внести изменения прямо в нем.

Bitrix

Joomla

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

Маркетинг

Как разработать контент-стратегию

Как разработать контент-стратегию

Распространенные ошибки при написании H1

Чаще всего встречаются ошибки:

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

Теги – неотъмлемая и важная часть SEO-оптимизации. Однако не менее важно не только правильно их использовать, но и видеть результат работы. В системе Calltouch с помощью сквозной аналитики вы можете отслеживать объём трафика и его эффективность в удобных и понятных отчетах.

Ссылка на основную публикацию