H1 2020 что означает
Перейти к содержимому

H1 2020 что означает

  • автор:

Что такое тег H1 и требования к его правильному написанию

Что такое тег H1 и требования к его правильному написанию

Сканируйте сайт на наличие технических ошибок и получите список задач с подробными инструкциями по их устранению.

Пример тегов h1 и title в html



Что такое тег H1 и насколько он важен для SEO?

Тег H1: правила написания + пример html кода


Что такое тег h1?

Тег h1 – это заглавие текста (он выполняет ту же функцию, что и название книжки или заголовок газетной статьи). Каждая страница сайта должна содержать только один единственный тег h1.

Заголовок играет первостепенное значение в привлекательности страницы для посетителей сайта. Но для SEO-продвижения, первостепенное значение имеет все-таки мета-тег title.

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

На самом деле, title выступает как в качестве альтернативы заголовка страницы, так и играет роль основного заголовка для html-документа. То есть, если вебмастер не прописал метатег тайтл, то поисковик возьмет в качестве основного тег h1 и выдаст его на странице поиска.

Почему h1 должен отличаться от title?

Еще раз, важно запомнить, что h1 и title – разные заголовки.

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

Требования к длине h1

Сегодня эксперты рекомендуют делать H1 немного короче, чем Title. Длина этого заголовка первого уровня должна вложиться в 50 символов. Но если вы превысили лимит, это не критическая ошибка.

Если вы используете WordPress, то для этой CMS существуют специальные плагины, которые дают возможность проанализировать корректность заполнения всех мета-тегов в статье перед публикацией.

Принципы грамотного составления h1

  • Он должен быть уникальным для всех страниц сайта и легко читаться;
  • Не должен дублировать мета-тег title, но и не должен противоречить ему;
  • Не пишите слишком длинные H1 (используйте больше текста в title);
  • Не используйте этот тег более чем один раз на странице;
  • Он должен соответствовать тексту и отображает его суть в сжатой форме;
  • H1 должен заинтересовать и привлечь внимание пользователей;
  • В конце заголовка не нужно ставить точку, а также необходимо стараться использовать знаки препинания в минимальном количестве.

Использование ключевых слов

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

Теги title и h1 страницы, которую вы сейчас читаете, созданы как раз согласно всем вышеуказанным правилам.

Results-driven Head of SEO with 9 years of experience in the field. Possesses expertise in leading international, multi-language SaaS projects and implementing SEO strategies for them.

Проверьте ваш сайт на ошибки

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

— . Такие теги являются элементами разметки 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

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

Заголовок

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

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

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

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

Заключение

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

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

Эти элементы допускают только глобальные атрибуты.

Примечания по использованию

  • Информация о заголовках может использоваться пользовательскими агентами для автоматического создания оглавления документа.
  • Не используйте элементы заголовков для управления размером шрифта. Для этих целей следует применять CSS-свойство font-size .
  • Не пропускайте уровни заголовков: всегда начинайте с , потом используйте и так далее.

Избегайте использования нескольких элементов на одной странице

Использование нескольких элементов на одной странице разрешено стандартом HTML (если они не вложены друг в друга), но это считается плохой практикой. Хорошо, когда на странице есть единственный элемент , который описывает содержимое этой страницы (по аналогии с элементом ).

Примечание: Использование нескольких элементов во вложенных элементах разделов было разрешено в старых версиях стандарта HTML. Однако это никогда не считалось хорошей практикой, а теперь не соответствует требованиям. Больше информации об этом в статье There Is No Document Outline Algorithm.

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

Примеры

Все заголовки

Следующий код показывает все уровни заголовков в действии.

h1>Заголовок уровня 1h1> h2>Заголовок уровня 2h2> h3>Заголовок уровня 3h3> h4>Заголовок уровня 4h4> h5>Заголовок уровня 5h5> h6>Заголовок уровня 6h6> 

Пример страницы

Следующий код показывает несколько заголовков с содержимым под ними.

h1>Элементы заголовковh1> h2>Краткое содержаниеh2> p>Обычный текст. p> h2>Примерыh2> h3>Пример 1h3> p>Обычный текст. p> h3>Пример 2h3> p>Обычный текст. p> h2>Смотрите такжеh2> p>Обычный текст. p> 

Проблемы доступности

Навигация

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

Неправильно:

h1>Заголовок уровня 1h1> h3>Заголовок уровня 3h3> h4>Заголовок уровня 4h4> 

Правильно:

h1>Заголовок уровня 1h1> h2>Заголовок уровня 2h2> h3>Заголовок уровня 3h3> 
Вложенность

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

  1. h1 Жуки
    1. h2 Этимология
    2. h2 Распределение и разнообразие
    3. h2 Эволюция
      1. h3 Поздний палеозой
      2. h3 Юрский период
      3. h3 Меловой период
      4. h3 Кайнозойский период
      1. h3 Голова
        1. h4 Рот
        1. h4 Переднегрудь
        2. h4 Птероторакс

        Когда заголовки вложены, уровни заголовков могут быть «пропущены» при закрытии подраздела.

        • MDN Understanding WCAG, Guideline 1.3 explanations (en-US)
        • MDN Understanding WCAG, Guideline 2.4 explanations (en-US)
        • Headings • Page Structure • WAI Web Accessibility Tutorials
        • Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
        • Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0
        • Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0
        • Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0

        Маркировка разделов содержимого

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

        Разделы содержимого могут быть размечены с помощью комбинации атрибутов aria-labelledby (en-US) и id , с кратко описывающим назначение раздела значением. Этот метод полезен в ситуациях, когда на одной странице имеется более одного элемента секционирования.

        Примеры секционированного содержимого
        header> nav aria-labelledby="primary-navigation"> h2 id="primary-navigation">Основная навигацияh2> nav> header> footer> nav aria-labelledby="footer-navigation"> h2 id="footer-navigation">Вторичная навигацияh2> nav> footer> 
        • Using the aria-labelledby attribute (en-US)
        • Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials

        Спецификации

        Specification
        HTML Standard
        # the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

        Совместимость с браузерами

        BCD tables only load in the browser

        Тег H1 (заголовок страницы)

        HTML-тег H1 (от англ. headingзаголовок) — контейнер для заголовка 1-го уровня. Является важным фактором текстового ранжирования, непосредственно влияющим на релевантность веб-страницы поисковым запросам.

        Тег H1

        Семантическое значение

        Тег h1 вляется заголовком 1-го уровня — первым в иерархии заголовков (тегов h1 — h6 ) и применяется в качестве заголовка контента веб-страницы. От тега title отличается тем, что указывается в теле веб-страницы (тег body ) и является видимым пользователю в пределах контента.

        Отображение на странице

        Заголовок текста (тег H1)

        Тег h1 является блочным HTML-элементом (отображается во всю ширину родительского элемента) и по умолчанию имеет самый большой размер шрифта:

        HTML-синтаксис

        Значение в SEO

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

        Текст, размещенный в теге

        имеет высокий приоритет для поисковых систем при оценке релевантности.

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

        • Краткий и лаконичный текст Желательно умещать заголовок в пределах одной строки при отображении в полноэкранном режиме.
        • Внутри тега должен быть только текст Внутри тега h1 должен размещаться именно текст заголовка, а не картинки или другие вложенные теги.
        • Использование в качестве заголовка текста Частой ошибкой является использование тега h1 не по назначению: в качестве элемента вёрстки, контейнера для логотипа или заголовка неосновного содержания (например, в боковой панели).
        • Только один на странице Очень серьезной ошибкой в SEO-оптимизации является использование 2-х и более тегов h1 на странице.
        • Размещение в начале контента Заголовок 1-го уровня должен указываться в начале контента и быть видимым пользователю на 1-экране при попадании на страницу.
        • Самый крупный размер шрифта На странице не должно быть элементов с более крупным текстом.
        • Уникальность в пределах сайта Тег h1 не должен повторяться на других страницах сайта.

        Оформление заголовка на странице

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

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

        Способы оформления

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

        • Верхний регистр символов:
          CSS-свойство: text-transform: uppercase
        • Другое начертание:
          CSS-свойства: font-weight: . или font-style: .
        • Выравнивание по центру:
          CSS-свойство: text-align: center
        • Другой тип шрифта:
          CSS-свойство: font-family: .
        • Другой цвет текста:
          CSS-свойство: color: .
        • Нижнее подчеркивание или граница:
          CSS-свойства: text-decoration: underline или border-bottom: .
        • Корректировка значений нижнего и верхнего отступов:
          CSS-свойство: margin: .
        • Стилизация с помощью иконок, фоновых эффектов и т. д.:
          Особенно актуально для лендингов.

        Примеры оформления

        Другой тип шрифта

        Верхний регистр, другой цвет и нижняя граница

        Уникальное оформление

        Часто задаваемые вопросы

        Как прописать тег на странице?

        Разместите текст между соответствующими открывающим и закрывающим HTML-тегами:

        Как заполнять HTML-тег ?

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

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

        Заголовок 1-го уровня в пределах веб-страницы должен быть только один.

        Что, если тег повторяется больше чем один раз?

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

        Могут ли быть другие теги внутри ?

        Это не запрещено спецификацией HTML, но не рекомендуется с точки зрения SEO-оптимизации. По возможности используйте внутри данного тега только текст.

        Может ли повторять тег ?

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

        Ссылки

        Внутренние материалы

        • SEO мета-теги
        • Мета-тег Description (описание документа)
        • Мета-тег Keywords
        • Мета-тег Robots
        • Тег Title (название документа)

        Внешние материалы

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *