Но почему тег H1 важен, как его добавить и какие есть практические рекомендации по его применению?
В этом руководстве вы узнаете ответы на все эти вопросы.
- Почему теги H1 важны для SEO?
- Как добавить тег H1?
- Лучшие практические рекомендации по применению тега H1 в SEO?
По трем причинам:
- Теги H1 помогают поисковым системам понять страницу
- Теги H1 удобны для пользователей
- Теги H1 повышают доступность страниц
Теги H1 помогают поисковым системам понять страницу
Джон Мюллер из Google сказал, что теги H1 помогают Google понимать структуру страницы. Так что, если вы используете H1 для заголовка вашей страницы или заголовка контента, как рекомендует Google, ваш H1 фактически сообщает Google “вот о чем моя страница”.
Теги H1 удобны для пользователей
Теги H1 удобны для пользователей тем, что они являются частью иерархической структуры веб-страницы. H1 — самый заметный заголовок на странице, за ним следует H2, затем H3 и т. д.
Неправильное использование тегов H1 и других заголовков приводит к тому, что страницы становится труднее просматривать и воспринимать.
Теги H1 повышают доступность страниц
Миллионы людей с нарушениями зрения используют программы чтения с экрана для преобразования копий веб-страниц и изображений в аудио. Согласно этому исследованию webAIM, 60% пользователей программ чтения с экрана предпочитают, чтобы только заголовок страницы был тегом H1.
Большинство CMS упрощают добавление тега H1 на вашу страницу. Давайте посмотрим, как это сделать в самых популярных из них.
Как добавить тег H1 в WordPress
Код большинства тем WordPress предусматривает использование заголовка страницы или поста в качестве тега H1.
Как добавить тег H1 в Wix
В большинстве тем Wix один тег H1 на каждой странице. Если вы не знаете, какому тексту он назначен, временно измените стиль тегов H1 в редакторе темы. Так вы выделите тег H1 в компоновщике страниц.
Как добавить тег H1 в Squarespace
В большинстве тем Squarespace тоже один тег H1 на каждой странице. Если вы не уверены, где он находится, просто щелкайте по заметным текстовым полям, пока не увидите поле со стилем “Заголовок 1” (Heading 1).
Как добавить тег H1 в HTML
Используйте открывающий тег H1 (<h1>), введите заголовок страницы, затем добавьте закрывающий тег H1 (</h1>).
Пример:
<h1>Это заголовок с тегом H1</h1>
Прежде чем мы рассмотрим практические рекомендации, важно отметить, что нарушение любой из них крайне маловероятно нанесет ущерб SEO вашего сайта. Так что не паникуйте, если вы не делаете некоторые из этих вещей. Это точно не приведет ни к чему страшному, и тем более к санкциям от Google.
Задача Google — понимать, индексировать и оценивать веб-контент. Это невозможно сделать без механизмов, позволяющих справиться с неидеальными обстоятельствами, такими как страницы без тегов H1.
Тем не менее, в SEO помогает каждая мелочь, поэтому полезно по возможности следовать практическим рекомендациям.
Вот 9 лучших практических рекомендаций по применению тега H1:
- Используйте теги H1 для заголовков страниц
- Если ваша страница на английском языке, используйте заглавные буквы в заголовке H1
- Сопоставьте теги H1 с тегами title
- Используйте тег H1 на каждой важной странице
- Используйте только один тег H1 на странице
- Делайте короткие теги H1
- Стилизуйте заголовки под иерархию
- Включите свое целевое ключевое слово
- Делайте теги H1 убедительными
Используйте теги H1 для заголовков страниц
Google рекомендует: “размещайте заголовок статьи на видном месте над текстом статьи, например, в теге <h1>”.
Хотя многие платформы веб-сайтов и CMS делают это без дополнительных настроек, вы можете изменить это поведение для определенных тем.
Если вам интересно, как справляется ваша тема, можете проверить это щелкнув правой кнопкой мыши заголовок в браузере и выбрав “Просмотреть код”. Если в выделенной части присутствует <h1>, то она заключена в тег H1.
Если вам не нравится HTML, установите SEO Тулбар Ahrefs и посмотрите в бесплатный on-page отчет, чтобы увидеть свои теги заголовков, в том числе H1.
Если вы хотите проверить свои теги H1 сразу для группы страниц:
- Зарегистрируйте бесплатный аккаунт Ahrefs Webmaster Tools
- Просканируйте свой сайт с помощью Аудита сайта
- Затем перейдите в отчет На странице
- Прокрутите до диаграммы “Настройка H1”.
- Щелкните зеленую часть круговой диаграммы
Если ваша страница на английском языке, используйте заглавные буквы в заголовке H1
Эта рекомендация актуальна только для страниц на английском языке.
Все слова, содержащие четыре или более букв, пишутся с заглавной буквы.
Если ваша CMS использует заголовки страниц как для тегов H1, так и для тегов Title, использование регистра заголовка для заголовков страниц помогает сохранить аккуратный вид страницы в результатах поиска. Обычно строчные буквы или формат предложения используются только в постах на форуме.
Сопоставьте теги H1 с тегами Title
Google говорит, что ваш тег Title должен соответствовать вашему тегу H1.
Большинство CMS, таких как WordPress, делают это автоматически, но можно сделать теги Title и H1 разными с помощью SEO-плагина, такого как Yoast.
Наиболее распространенная ситуация, в которой это полезно, — когда заголовок вашей страницы идеально подходит для тега H1, но слишком длинный для тега Title.
Например, в этом посте наши теги H1 и Title немного отличаются:
Если ваши теги H1 и Title немного отличаются, но сделаны по одному шаблону, как в этом случае, это нормально. Если ваш тег Title резко отличается от вашего H1, вероятно, стоит вернуть их в соответствие.
Почему? В поисковой выдаче пользователи обращают внимание в том числе и ваш тег Title. Если на странице их встретит совершенно другой и не связанный с тегом H1 заголовок, они почувствуют себя обманутыми.
Вы можете бесплатно проверить несовпадающие теги H1 и Title в Ahrefs Webmaster Tools.
- Зарегистрируйте аккаунт Ahrefs Webmaster Tools
- Просканируйте свой сайт с помощью Аудита сайта
- Затем перейдите в отчет На странице
- Прокрутите до диаграммы “Настройка H1”.
- Щелкните зеленую область круговой диаграммы
- Ищите существенно отличающиеся теги Title и H1
Вот пример несовпадающих тегов Title и H1 из нашего руководства по тексту анкора:
Тег Title направлен на определение, а H1 — на данные исследования. Возможно, пользователи могут почувствовать себя немного обманутыми или сбитыми с толку после перехода на эту страницу, поэтому, вероятно, имеет смысл унифицировать эти заголовки.
Если на вашем веб-сайте много страниц, отсортируйте отчет в Аудите сайта Ahrefs по органическому трафику, чтобы определить приоритеты для внесения правок. Нет смысла беспокоиться о несовпадающих тегах Title и H1, если ваша страница вообще не получает органического трафика.
Используйте тег H1 на каждой важной странице
Учитывая, что заголовок вашей страницы должен быть заключен в тег H1, само собой разумеется, что вы должны использовать тег H1 на каждой важной странице. В конце концов, у каждой страницы есть заголовок.
Если вы хотите найти страницы с отсутствующими или пустыми тегами H1:
- Зарегистрируйте бесплатный аккаунт Ahrefs Webmaster Tools
- Просканируйте свой сайт с помощью Аудита сайта
- Затем перейдите в отчет На странице
- Прокрутите до диаграммы “Настройка H1”.
- Щелкните красную область круговой диаграммы
Выше вы можете видеть, что на некоторых наших страницах отсутствуют теги H1.
Это хорошая практика? Нет. Но это также вряд ли будет иметь большое значение, потому что эти страницы не особенно важны с точки зрения SEO. Это просто главные страницы блогов и страницы из архивов, которые в любом случае могут привлечь только брендовый трафик.
Так что, хоть наши разработчики и могут “исправить” это за считанные минуты, вероятно, не стоит тратить их время, поскольку страницы выглядят для посетителей идеально — и это все, что имеет значение в этом случае.
Используйте только один тег H1 на странице
Джон Мюллер из Google говорит, что можно использовать несколько тегов H1 на странице.
Если вы используете HTML5, это абсолютно верно. Технически нет ничего неправильного в использовании нескольких тегов H1 в разных разделах.
Например, на этой странице HTML5 целых четыре тега H1 и она технически исправна.
<body>
<h1>Яблоки</h1>
<p>Яблоки — это фрукты.</p>
<section>
<h1>Вкус</h1>
<p>Они очень вкусные.</p>
<section>
<h1>Сладость</h1>
<p>Красные яблоки слаще зеленых.</p>
</section>
</section>
<section>
<h1>Цвет</h1>
<p>Яблоки бывают самых разных цветов.</p>
</section>
</body>
Практически все современные браузеры будут отображать такую структуру, а теги H1 во вложенных элементах <section> в соответствии с их уровнем вложенности. Это означает, что тег H1 в первом блоке <section> будет выглядеть как тег H2, а тег H1, вложенный в другом блоке <section>, будет выглядеть как тег H3 и т. д.
Однако даже с HTML5 W3C рекомендуют использовать “заголовки ранга, соответствующего уровню вложенности раздела”.
Например:
<body>
<h1>Яблоки</h1>
<p>Яблоки — это фрукты.</p>
<section>
<h2>Вкус</h2>
<p>Они очень вкусные.</p>
<section>
<h3>Сладость</h3>
<p>Красные яблоки слаще зеленых.</p>
</section>
</section>
<section>
<h2>Цвет</h2>
<p>Яблоки бывают самых разных цветов.</p>
</section>
</body>
Это связано с тем, что в некоторых устаревших браузерах без явно заданных правил CSS возникают проблемы с правильным отображением такой структуры.
Но что делать, если ваш сайт не использует HTML5?
Джон Мюллер говорит, что несколько тегов H1 все еще можно использовать:
Независимо от того, используете вы HTML5 или нет, наличие нескольких элементов с тегом H1 на странице — это не проблема.
Учитывая, что это не лучшая практика по стандартам W3C, почему Google это советует?
Ответ: потому что они разработали механизмы для решения распространенных проблем, связанных с наличием нескольких тегов H1 на веб-странице.
Поэтому, хоть для SEO, вероятно, не имеет большого значения, используете вы один или несколько тегов H1, мы все же считаем, что это лучший подход для большинства веб-сайтов.
Вы можете бесплатно проверить, есть ли на вашем сайте страницы с несколькими тегами H1, в Ahrefs Webmaster Tools.
- Зарегистрируйте бесплатный аккаунт Ahrefs Webmaster Tools
- Просканируйте свой сайт с помощью Аудита сайта
- Затем перейдите в отчет On-page
- Прокрутите до диаграммы “Настройка H1” (H1 setup).
- Щелкните желтую область круговой диаграммы
Делайте короткие H1 теги
Многие CMS используют один и тот же фрагмент для ваших тегов H1 и Title. Если вы не планируете писать уникальный тег Title для каждой страницы и поста, стоит писать заголовки ваших страниц покороче.
Насколько? Общее правило — не более 70 символов.
Вот страница, которая нарушает это правило:
Тег H1 на этой странице состоит из 80 символов, что отлично смотрится на самой странице. Но поскольку WordPress использует тот же фрагмент для тега Title, он обрезается в поисковой выдаче.
Мы могли бы решить эту проблему, установив в качестве тега Title более короткую версию тега H1. Но если бы мы сразу попытались создать более короткий заголовок, мы бы вообще не столкнулись с этой проблемой.
Стилизуйте заголовки под иерархию
Заголовки используются для создания иерархии на веб-странице. Поскольку тег H1 обычно является самым важным заголовком на странице, ваши стили CSS должны это отражать.
Другими словами, тег H1 должен быть самым заметным тегом на странице.
Это может показаться очевидным, но существует множество веб-сайтов, на которых различия между тегами H1 и H2 минимальны.
Включите свое целевое ключевое слово
Джон Мюллер из Google сказал в 2020 году:
Когда речь заходит о тексте на странице, заголовок является действительно сильным сигналом, говорящим нам, что эта часть страницы посвящена конкретной теме.
Учитывая, что тег H1 обычно обтекает заголовок страницы, это, пожалуй, самый важный заголовок на странице. Поэтому обычно имеет смысл включить в него основное ключевое слово, чтобы сделать тему страницы вдвойне более понятной как для Google, так и для пользователей.
Именно так мы делаем почти для всех наших блог-постов.
Всегда ли это имеет смысл? Конечно, нет.
Иногда для удобства чтения лучше использовать немного измененный вариант вашего целевого ключевого слова.
Например, основное ключевое слово для этого поста — “как получить больше просмотров на YouTube”. Но поскольку мы написали пост-список, использовать его в теге H1 не имело смысла. Поэтому вместо этого мы использовали немного измененный вариант.
Вы также не должны бояться использовать союзы и стоп-слова, чтобы заголовок звучал естественно.
Делайте теги H1 убедительными
Теги H1 должны быть описательными. Это само собой разумеется. Но если вы пишете заголовки для блог-постов, они также должны быть достаточно убедительными, чтобы привлекать клики.
Как создать убедительный заголовок для поста?
Прежде чем вы решите использовать один из генераторов заголовков блог-постов из сети, подумайте о цели вашего поста. Если он служит для привлечения органического трафика из поисковых систем, и ваша CMS использует заголовки страниц для заполнения тегов H1 и Title, заголовок поста должен быть ориентирован на пользователей поисковых систем.
Как узнать, что им нужно?
Почерпните вдохновение из результатов в топе по вашему целевому ключевому слову.
Например, если мы посмотрим на страницы в топе по запросу “методы SEO”, станет ясно, что пользователи ищут действенные и эффективные методы SEO, которые помогут им получить больше трафика из поиска.
Мы можем использовать эту информацию, чтобы создать убедительный заголовок страницы (H1) для нашего поста.
В мире SEO это называется оптимизацией по поисковому намерению (интенту).
Вопросы-ответы
Давайте закончим этот пост, ответив на несколько общих вопросов о тегах H1.
Какой длины должен быть тег H1?
Теги H1 могут быть любой длины, но поскольку большинство CMS используют заголовок страницы как для тега H1, так и для тега Title, лучше всего делать заголовки страниц короткими (не более 70 символов), чтобы избежать усечения тега Title.
Могу ли я иметь больше одного тега H1 на странице?
Если вы используете HTML5, да. Если вы не используете HTML5, такой подход не рекомендуется, но в любом случае это вряд ли будет иметь большое значение.
Могу ли я использовать изображение в теге H1?
Да. Например, W3C сделали именно так.
Заключение
Теги H1, бесспорно, менее важны, чем были раньше. У Google есть механизмы, позволяющие понимать ваш контент, даже если вы используете теги H1 не идеально.
Тем не менее, следовать передовым методам несложно, так что это будет не лишним. По крайней мере, это делает ваши страницы более удобными для пользователей.
Есть вопросы? Напишите мне в Твиттере.
Перевела Олеся Коробка, владелец Fajela.com
