Что такое тег H1 и как правильно им пользоваться
Что такое тег H1?
H1 — заголовок самого высокого уровня. Он используется в HTML-коде для обозначения названия страницы. Как правило, его выделяют размером, шрифтом или цветом с помощью CSS или других средств разметки.
Тег H1 вписывается в HTML-код страницы. Он имеет открывающую часть <h1> и закрывающую </h1>. Его можно сравнить с названием текстового документа, книги или рекламной брошюры. Для упрощения навигации такой элемент кода используют в самом начале видимой части страницы.
Например: H1-тег этой страницы выделяет заголовок «Что такое тег H1 и как правильно им пользоваться».
Заголовок H1 vs название страницы
Основной заголовок пользователи видят сразу после перехода на сайт. Он прописывается в разделе <body>, поэтому и воспроизводится на экране устройства. Его значение для технической оптимизации относительно небольшое. Однако этот тег часто определяет поведение пользователей. От него зависит, насколько быстро посетители найдут нужную им информацию и сколько из них просто закроют вкладку в браузере. Учитывая, что поисковые системы обращают внимание на UX и bounce rate, заголовок все же имеет значение для ранжирования страницы.
Название страницы прописывается тегом <title>, содержащимся в разделе <head>. Оно не воспроизводится в основном окне сайта, но используется на странице поисковой выдачи и во вкладке браузера. Именно этот тег используется краулерами для сбора информации о странице. Он имеет большее влияние на эффективность оптимизации по сравнению с заголовком, но почти не используется для навигации и не определяет поведение пользователей.
Таким образом, H1 нужен прежде всего для посетителей и только потом для поисковых роботов, Title — наоборот.
Почему теги H1 важны для SEO?
Один из ведущих разработчиков поисковой машины Google Джон Мюллер объяснил, что система тщательно изучает как ключевые слова, так и контекст их употребления. Он отметил особое значение заголовков страницы, которые обозначаются тегами H с номерами от 1 до 6. Разберемся, как именно они влияют на ранжирование сайта.
Помогают поисковому сервису изучать контент на странице
Заголовок H1 говорит роботу: «Смотри, вот о чем дальше пойдет речь». Если он содержит правильно вписанную ключевую фразу, система будет ассоциировать сайт с определенной тематикой. Следовательно, рейтинг страницы повысится даже по смежным запросам. Хотя оптимизация тега H1 имеет не такое большое значение, как работа с Title, он также может стать важным инструментом продвижения.
Улучшают пользовательский опыт (UX)
Текст, отмеченный тегом H1, первым попадет на глаза посетителю сайта. Он сразу же сможет определить, соответствует ли страница его запросу. Если вы смогли заинтересовать пользователя заголовком, это значительно повысит конверсию и улучшит коммерческие показатели.
Еще одно преимущество заголовка H1 — структурирование контента. Исследования показывают, что разбитый на блоки текст с заголовками, списками и другими элементами разметки читается на 33% быстрее и запоминается на 50% лучше. Если хотите, чтобы о вашем предложении вспоминали и после закрытия вкладки, странице нужна упорядоченная структура.
Предоставляют большую инклюзивность
Десятки миллионов пользователей интернета имеют серьезные проблемы со зрением. Для потребления большого объема текстового контента они используют инструменты озвучивания. По результатам опросов, 60% из них ориентируются именно на заголовок H1. Если информация в нем не соответствует ожиданиям, пользователи просто закрывают страницу. Поэтому плохая оптимизация этого элемента может лишить вас большой части потенциальной аудитории.
Как добавить на страницу заголовок H1?
Процедура максимально простая. Даже если вы делаете первые шаги в изучении HTML и CSS, потребуется несколько секунд, чтобы правильно оформить заголовок. Кроме того, большинство систем управления контентом автоматизируют этот процесс — вам достаточно нажать одну кнопку или воспользоваться готовым шаблоном.
В HTML-коде
Найдите раздел <body>, где собрана видимая часть сайта. Вставьте заголовок перед основным текстовым контентом и отделите его тегами <h1></h1>.
Например:
<h1>This is a visible header example</h1>
Your text here
<h2>First text section</h2>…
В WordPress
Большинство тем этой CMS уже имеют заголовки H1. Если вы ошибочно удалили или изменили нужный элемент, его можно легко восстановить:
- Создайте новый текстовый блок и введите необходимые данные.
- Выделите текст — над ним появится контекстное меню.
- Нажмите на кнопку со значком абзаца — «¶» (Pilcrow).
- Выберите пункт «Transform to heading».
- По умолчанию система выберет подзаголовок H2, указанный в контекстном меню.
- Нажмите на кнопку «H2».
- Выберите H1 из выпадающего списка.
В Wix
Как и в других системах управления контентом, тут название страницы или поста автоматически становится основным заголовком. Если вы хотите изменить его, воспользуйтесь простой инструкцией:
- Создайте текстовый блок.
- Выберите его — сверху появится панель инструментов.
- Нажмите кнопку «Edit Text».
- Нажмите кнопку со стрелкой вниз рядом с надписью «Themes».
- Выберите пункт «Heading 1».
В SquareSpace
В большинстве тем достаточно заполнить стандартное поле «Enter your title here». Однако можно создать необходимый заголовок вручную:
- Создайте текстовый блок.
- Наведите на него курсор и кликните, чтобы перейти в режим редактирования.
- Сверху появится панель инструментов — выберите в ней меню «Paragraph».
- Из выпадающего списка выберите «Heading 1».
Как писать теги H1, оптимизированные под SEO?
Главное правило — заголовки должны быть короткими, но емкими. Опишите в них суть контента на странице и дайте читателю мотивацию к его чтению. Но старайтесь избегать откровенного кликбейта и лжи — поисковые системы могут дать бан из-за жалоб пользователей и высокого bounce rate. Мы также поделимся дополнительными советами по оптимизации тегов H1 в SEO.
Используйте только один тег H1 на странице
Вспомните, как организованы разделы в книгах и статьи в журналах. Один раздел — одна тема и один заголовок. Такое решение создает правильную структуру и иерархию. Оно будет актуальным и для веб-сайтов, которые должны подавать информацию кратко, интересно и эффективно.
Если вы добавляете несколько заголовков с тегом H1, это значит, что страница содержит несколько отдельных тем. Она будет негативно восприниматься большинством читателей, ведь они перешли на ваш сайт с конкретной целью и не желают получать дополнительную информацию из другой отрасли.
Создание нескольких основных заголовков негативно сказывается и на технической оптимизации. К примеру, Google видит в этом плохое структурирование и негативный UX. В результате рейтинг сайта в поисковой выдаче снижается даже при идеальном состоянии других SEO-элементов.
Тег H1 должен точно описывать тему страницы
Заголовок — главный инструмент навигации. Перейдя по привлекательной ссылке в поисковой системе, пользователь должен получить исчерпывающую информацию о том, что его ожидает на этой странице. Старайтесь максимально кратко описать весь контент, который вы предлагаете посетителям.
Например:
- 60 способов приготовить лосося.
- Короткий гайд по SEO-оптимизации.
- Дроны: что это такое, для чего нужны, как ими управлять.
И снова совет, который мы никогда не устанем повторять. Пишите правдиво, не вводите пользователя в заблуждение. Откровенное вранье повысит bounce rate и привлечет внимание поисковых краулеров к несоответствию текста и заголовка. Результат — от снижения рейтинга до полного бана.
И не обещайте больше, чем можете дать. Кликбейтные заголовки типа «Раскроем секрет успеха миллиардеров» привлекают внимание сначала, но потом раздражают и разочаровывают. В результате посетитель будет хуже относиться ко всему сайту, даже если его огорчила только гостевая публикация в блоге.
Вписывайте целевую ключевую фразу в заголовок
Поисковая оптимизация не может держаться только на одном H1. Однако хорошо проработанный заголовок может усилить существующую стратегию и улучшить ранжирование. Поэтому стоит использовать наиболее частотный ключ в первой части текстового контента.
Примеры тегов H1, оптимизированных под поисковую систему:
- Авто в Детройте: купить, продать, обменять.
- Как приготовить оленину: 20 эксклюзивных рецептов.
- Выучить HTML за 3 дня: краткий курс для начинающих.
Используйте первый ключ, подобранный с помощью специальных инструментов. Но только один — переспам и повторы автоматически снизят ваш рейтинг. Кроме того, вам сложно будет втиснуть такое количество информации в краткий текстовый фрагмент.
Ориентируйтесь в H1 на намерение пользователя
Google пытается оптимизировать свою поисковую машину именно под желания и ожидания пользователя, а не под алгоритмы роботов. Именно поэтому компания инвестирует миллиарды долларов в развитие искусственного интеллекта, пытаясь воспроизвести образ мышления человека.
Вам также следует учитывать намерения пользователя перед тем, как создавать основной заголовок страницы. Их можно условно разделить на четыре типа:
- Транзакционные. Призывают к конкретному действию. К примеру, «Купить стиральную машину в Лондоне недорого». Подходят для коммерческих страниц — каталогов интернет-магазинов или лендингов. Если на сайте с таким H1 нельзя будет оформить заказ, пользователь останется недоволен.
- Коммерческие. Призывают к сравнению или изучению продукта. Например, «Какой смартфон 2023 года лучше: Samsung или Apple?». Подходит для публикаций в блогах, аналитических материалов и обзоров.
- Інформаційні. Закликають ознайомитись із певними даними. Наприклад, «Короткий гайд із PPC: секрети успішної реклами». Підходить для інструкцій, електронних підручників та статей із порадами. Информационные. Призывают ознакомиться с определенными данными. Например, «Краткий гайд по PPC: секреты успешной рекламы». Подходит для инструкций, электронных учебников и статей с советами.
- Навигационные. Призывают узнать больше о бренде, компании или личности. Например, «Уоррен Баффетт: кто он такой и чем занимается» или «Toyota — символ надежности или серая посредственность?». Подходят для брендовых страниц и PR-материалов.
Убедитесь, что тег H1 воспроизводится
Некоторые системы управления контентом скрывают основной заголовок или уменьшают его размер, чтобы экономить место на странице. Это негативная практика использования тегов H1 в SEO. Если глаз посетителя сначала цепляется за текстовый блок, это дезориентирует и усложняет восприятие информации.
![URLs with “H1 is missing” [Guide on How to Fix It]](https://lh4.googleusercontent.com/AX8fXHnnQbyifI1dCTffsF4jjkJqmPeCwQLQdLuMkXUR5dwSJkKQZGb6YLuqCC91QG3ET4bDghBA1UA9JpR_mKn8o4pPhV0OPDI-hQV71UmETpQhBkEgsBBYHiznKHwd8Ehhpsqs0WyLMGgw94c3pA)
Кроме того, современные алгоритмы поисковых систем рассматривают скрытый заголовок как признак плохого UX. Рейтинг такой страницы сразу снижается — робот считает, что она будет плохо восприниматься пользователями. Поэтому очень важно сохранять традиционную структуру документа не только технически, но и визуально.
Выделите тег H1
Используйте особые стили оформления заголовков. Хорошая практика — выбирать больший размер букв и полужирный шрифт. Можно также попробовать поиграть с цветами, если это допустимо для вашей тематики и структуры страницы.
Заголовок H1 должен привлекать больше внимания, чем H2 и H3. Стоит также выделять его на фоне рисунков и других мультимедийных элементов. Если другой блок будет иметь больший размер или яркую окраску, именно по нему пользователь будет оценивать содержание страницы.
Помните о рекомендованной длине H1
60 символов с пробелами. Именно эта цифра описывает оптимальный размер первого и самого главного заголовка. Этого достаточно, чтобы описать тему статьи или коммерческого предложения. И даже при условии выбора самого большого шрифта вам хватит места для аккуратного размещения всех блоков.
Если тег H1 будет длиннее, вы утомите посетителя. Он бросит чтение, не получив необходимой информации. Есть большая вероятность, что после этого пользователь импульсивно закроет вкладку. Кроме того, длинные заголовки прибавляют работы дизайнерам. А еще они не очень нравятся поисковым роботам, которые могут снижать рейтинг страницы.
Но слишком короткий заголовок длиной до 30 знаков с пробелами не лучше. Во-первых, его так же низко оценят поисковые системы. Во-вторых, маленький текстовый блок просто потеряется на странице, особенно если рядом с ним будет расположено яркое изображение. В-третьих, вам будет сложно передать ключевые тезисы статьи и вызвать интерес.
Тег H1 должен быть подобным Title
Это логично, ведь вы привлекаете внимание пользователя на странице поисковой выдачи и должны оправдать его ожидания. Если заголовок будет сильно отличаться от текста ссылки, это может привести к негативным эмоциям. Однако повторять ту же фразу дважды нет смысла. Мы уже рассказывали, что такое тег H1, — он должен быть более информативным, чем Title.
Например:
Title — What is content marketing and how to make it profitable?
H1 — Content marketing: complete guide with success tips.
Используйте заглавные буквы в тегах H1
Согласно положительной практике в SEO, начинать тег Н1 следует со слова длиннее 4 знаков и с заглавной буквы. Так вы привлечете больше внимания пользователей в поисковой выдаче и на стартовой странице собственного сайта. На первый взгляд это решение может показаться неважным, однако на практике оно значительно повышает коэффициент конверсии. Исключительно строчные буквы обычно используют для публикаций в социальных сетях и на форумах.
Каких распространенных ошибок следует избегать?
Эксперименты ведущих SEO-специалистов мира показывают, что ошибки в разметке почти не влияют на поисковое ранжирование в краткосрочной перспективе. Однако рейтинг плохо организованной страницы снижается с течением времени из-за плохого UX и большого количества посетителей, которые не могут найти нужную им информацию.
Отсутствие тегов
Представьте, что вы заходите на сайт без тега <h1>. Первым вам на глаза попадает текстовый блок, вероятно, с каким-либо коммерческим предложением или описанием преимуществ бизнеса. Что именно вы получите на этой странице? Чтобы узнать, придется пролистать одну или несколько страниц. Причем вы можете встретить блок с дополнительной информацией, которая лишь косвенно касается темы. Скорее всего, при таком сценарии вам захочется закрыть сайт и никогда на него не возвращаться.
Не забывайте об основном заголовке — он должен привлечь внимание пользователя и дать ему четкие элементы навигации.
Дубликаты заголовков
Обратите внимание: тег H1 не должен повторять H2 или следующие уровни дословно. Это дезориентирует пользователя и поисковых роботов. Первый не может определиться, где именно он получит необходимую информацию, а последние снижают рейтинг из-за переспама ключевых слов и других негативных SEO-практик.
Если вам очень хочется акцентировать внимание на определенном подзаголовке, расширяйте его дополнительными словами, например:
H1 — Как навести блеск на металлической поверхности.
H2 — Как навести блеск на металлической поверхности подручными средствами.
Слишком длинные или короткие теги
Помните об оптимальной длине тега H1 для SEO — от 30 до 60 символов с пробелами. Слишком длинные заголовки утомляют пользователей и отпугивают поисковые системы. Слишком короткие визуально теряются на странице со сложной структурой и яркими мультимедийными элементами. Конечно, в некоторых случаях допускаются незначительные нарушения этого правила. Однако стоит объективно оценить окончательный вид сайта и провести тестирование с реальными пользователями.
Повторы тегов H1
Несколько заголовков с маркировкой H1 — плохая практика. Пользователю сложно отделять основную часть текста и воспринимать главную мысль, а роботы считают, что это плохой UX. Опять же, вы получаете двойной удар, способный существенно снизить рейтинг сайта в поисковой выдаче в течение нескольких недель.
Заголовок H1 — не просто визуальный элемент
Разметка веб-страницы — очень важная часть ее оптимизации. Она привлекает внимание пользователя, упрощает восприятие информации и в долгосрочной перспективе повышает рейтинг сайта в поисковой выдаче. Зная, что такое теги H1, вы можете упорядочить текстовый контент с помощью классической структуры, увеличив коэффициент конверсии и улучшив коммерческие показатели бизнеса.
Если вы не уверены в правильности формирования заголовков, советуем воспользоваться специальными диагностическими инструментами. Они есть в панелях управления SEO от Moz, Ahrefs, SEMRush и других лидеров рынка диджитал-маркетинга. Такие сервисы выявляют основные ошибки и подсказывают, как их исправить. Это особенно удобно для начинающих разработчиков и веб-мастеров.
Часто задаваемые вопросы
Какова оптимальная длина текста в теге H1?
От 30 до 60 символов с пробелами. Больший заголовок будет утомлять читателя, а меньший просто потеряется на странице.
Должен ли тег H1 совпадать с Title?
Они должны быть очень похожими, чтобы оправдывать ожидания посетителя. Но H1 лучше сделать более информативным, чтобы дать представление о содержании страницы.
Что такое тег H1?
Разметка <h1></h1> используется для правильного оформления главного заголовка страницы. Он должен кратко и емко характеризовать контент на сайте.
Почему теги H1 имеют значение для SEO?
Эти элементы влияют на пользовательский опыт (UX). Их отсутствие или неправильное употребление дает поисковым машинам сигнал о плохой технической оптимизации сайта. Это может существенно снизить рейтинг в долгосрочной перспективе.
Как писать теги H1, оптимизированные для SEO?
Сделайте их короткими, но емкими. Включайте в них ключевые фразы и учитывайте намерение пользователя. Выделяйте заголовки визуально и начинайте длинные слова с заглавных букв.
