Найти тему
FRONTEND FLOW

[HTML] Используйте тег <h1> !

Тег <h1> — это заголовок HTML, используемый для разметки основной темы веб-страницы. В коде веб-страницы вы увидите текст H1, заключенный в теги <h1></h1>.

Вот пример тега H1 в HTML-коде сообщения в блоге и на активной странице:

Пример применения тега <h1>
Пример применения тега <h1>

Почему теги <h1> важны для SEO?

Теги <h1>, хотя и не являются подтвержденным фактором ранжирования, по-прежнему важны для SEO. Вот главные причины почему.

<h1> помогают поисковым системам понять контент

Поисковые системы, как и ваши читатели, просматривают ваши <h1>, чтобы узнать о ваших страницах и их содержании.

Джон Мюллер из Google сказал:

«Если вы пишете контент, который вы хотите ранжировать, то способность лучше понимать этот контент действительно помогает нам».

Чем информативнее ваш H1, тем лучше.

<h1> в этой статье от habr — отличный пример описательного H1.

Пример использования тега <h1>
Пример использования тега <h1>

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

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

<h1> в коде
<h1> в коде

<h> улучшают взаимодействие с пользователем

Теги <h1> улучшают взаимодействие с пользователем (UX), позволяя читателям с первого взгляда узнать, о чем ваша страница. Большинство веб-сайтов отображают <h1> как самый большой текст на странице.

Быстрый просмотр вспомогательных заголовков (таких как <h2> и <h3>) может показать читателям, что они узнают, прежде чем копаться в них. Таким образом, они могут предварительно оценить ценность вашего контента.

Если вы хорошо поработали, ваш <h1> обеспечит иерархию и заверит посетителей, что у вас есть информация, которую они ищут.

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

<h> улучшают доступность

Теги <h1> (и другие заголовки в целом) могут помочь тем, кто использует программы чтения с экрана из-за нарушений зрения, понять содержимое страницы.

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

Отображение заголовков в программе чтения с экрана
Отображение заголовков в программе чтения с экрана

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

В исследовании, проведенном WebAIM, пользователей экранов спросили, как они предпочитают находить информацию на веб-страницах. И 67,5% респондентов высказались за навигацию по заголовкам.

Статья адаптирована с semrush