Сколько заголовков h1 может быть на сайте

Кое-что про h1 на одной странице

Кое-что про h1 на одной странице главное изображение

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

Сколько на одной странице я могу поставить?

Предыстория

Совсем недавно натолкнулся на статью The Truth About Multiple H1 Tags in the HTML5 Era , в которой рассказывается, сколько же надо ставить тэгов H1 на странице. Я перевел её и основные моменты выписал ниже.

Сколько же я могу поставить тегов H1?

Независимо от того, являетесь ли вы веб-разработчиком или веб-дизайнером, у вас возникал вопрос: «Сколько тегов я могу использовать на странице и как их реализовать?».

Этот вопрос задают по двум причинам. Первая и самая частая причина — SEO оптимизация: обеспечение наилучшего форматирования содержимого для облегчения индексации поисковыми системами. Вторая — техническая причина: обеспечение написания разметки в соответствии с соответствующей спецификацией W3C.

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

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

Правило одного H1 тега до HTML5

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

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

На примере бизнес-сайта:

На главной странице H1 тег — название компании, а далее — описание компании. Но в отдельной статье на сайте название компании оборачивалось в тег p , а главной темой на странице становилось название статьи, которое мы и оборачиваем в h1 .

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

Пример на бизнес компании

Так будет выглядеть разметка любой другой страницы на данном сайте.

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

Почему заголовки имеют значение: содержание документа

Важность тэгов h1-h6 заключается в том, что они создают контуры документа. Контуры документа — это что-то вроде оглавления веб-сайта. Они автоматически создаются из разметки на любой данной веб-странице.

До HTML5 контуры документа создавались с помощью тегов заголовков h1 до h6. Каждое использование заголовка означало бы начало нового раздела контента.

Проблемы, вызванные структурами документа до HTML5

Этот план документа, хотя он и является лучшим из того, что можно было сделать до HTML5, представляет некоторые серьезные проблемы:

— Обобщенный ярлык для всей страницы снижает релевантность

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

— Отдельные статьи рассматриваются как подразделы одного фрагмента контента

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

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

— Существуют ограничения на характер метки документа/названия сайта

Во многих случаях заголовок сайта (который имеет тенденцию играть роль метки документа даже в HTML5) может не иметь какого-либо значимого отношения к содержимому страницы. Например, я мог бы вести блог с заголовком сайта «Даня говорит», и он мог бы отображать одну статью о кодировании HTML, а другую — о милых щенках. В этом случае было бы нецелесообразно интерпретировать заголовок сайта как представляющий любую из этих статей, поэтому мне пришлось бы изменить имя своего блога. Это может быть проблемой, особенно если сайт хочет присвоить себе имя, которое может быть запоминающимся, но не обязательно значимым.

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

Ключевые аспекты алгоритма описания документа HTML5

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

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

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

— Содержание заголовка : только текстовые метки для разделов содержания. При отсутствии тегов содержимого для разделения наличие тега заголовка все равно будет интерпретироваться как начало нового раздела содержимого.

Заголовок теги: , , , , , .

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

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

Алгоритм схемы документа HTML5 имеет много других аспектов. Подробная информация об этом доступна на W3C .

Новые правила использования HTML5

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

Выводы

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

Можно ли H1 использовать более чем один раз на странице?

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

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

Google о двух и более заголовках H1

Если говорить о Google то известно известно, что эта ПС уж точно не считает наличие нескольких заголовков H1 критической ошибкой, вот что на этот счет говорит Мэтт Катс:

Для тех кто не дружит с буржуйским языком вкратце:

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

Также в одном из экспериментов, проведенным Натальей Митрофановой, который показал, что для Google более привлекателен вариант использования двух заголовков H1, где первый — имя сайта (Гугл старательно вычленяет название веб-проекта, даже если это ссылка на внутреннюю страницу стороннего блога), второй — название статьи. Яндекс как оказалось не очень любит несколько H1 при остальных равных условиях, поэтому для Яши желательно использовать один H1. То есть для Яндекса на Главной H1 — это название сайта, а на внутренних страницах — название внутренних страниц.

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

Несмотря на эксперимент коллеги приведенный выше, официальной информации от Яндекса по этому вопросу нету, но еще в далеком 2010 году в крупнейшем сообществе Searchengines.ru был опубликован пост, в котором автор темы поделился ответом со службы поддержки Яндекса (Платона) по этому вопросу. Вот цитата переписки:

Вопрос:
«Могу ли я на странице разместить 15 тегов?

Ответ:
Здравствуйте, (. )!
Теги h1 Вы можете использовать на свое усмотрение.
С уважением, Платон Щукин
Служба поддержки Яндекса

Вместо вывода

Из вышесказанного можно подвести итог, что один H1 на странице не может считаться железным правилом, а несколько H1 на одной странице не всегда будет ошибкой. Примеров, где сайт более чем с одним H1 на странице находится в топе как Яндекса, так и Google, более чем достаточно, что может говорить о том, что поисковикам важна сама информация, а не оценка сайта по валидности html. Главное правило — использовать заголовки по их назначению, то есть для выделения заголовков страницы и разбивание текста на логические разделы. Это касается всех тегов заголовков, и H1 не исключение. Сколько раз будет повторятся тот или иной тэг заголовка в этом случае второстепенно.

Как говорил Мэтт Каттс о заголовках, что в сети очень много сайтов с «корявыми» страницами, с неправильной структурой заголовков, с невалидным Html, просто уродливыми страницами и.т.д, но это ведь совсем не значит что на таких сайтах не может быть полезного и интересного контента, поэтому мы стараемся не обращать внимания при ранжировании на такие ошибки. Подробнее об этом читайте в статье «Иерархия заголовков H1. H6 на странице».

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

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

1425 просмотров

Можно ли делать более одного

заголовка на странице? Т.е. будет ли это семантически правильно? И не создаст ли это проблем для SEO и индексации сайта в будущем? Просто когда-то давно где-то слышал что

должен быть только 1 на странице.

У меня на сайте pusiki.com выдает 13 страниц с повторяющимся Н1. Вот только как эту проблему убрать я понять не могу, к большому сожалению. Может это в коде нужно исправлять, подскажите.

15 ноя 2019 в 11:38

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

h1 — это элемент верхнего уровня в оглавлении. Т.е. название раздела / главы / чего-нибудь еще.

Нет никаких проблем с несколькими элементами h1 на странице — напротив, увидеть только 1 «главный» заголовок в автоматически построенном оглавлении было бы странно.

Отслеживать
ответ дан 30 июн 2016 в 10:47
Pavel Mayorov Pavel Mayorov
58.4k 7 7 золотых знаков 72 72 серебряных знака 146 146 бронзовых знаков

С логической точки зрения вы правы, но будет ли правильно все так с семантической? Вот к примеру нашел вопрос парня засмеяли SEO-шники за дублирование h1 заголовков

30 июн 2016 в 12:41

@ConstantineShibaev я про семантику и писал. А сеошников шлите сюда — будем смеяться над ними, с пруфами (которые привел автор того вопроса, на который вы сослались).

30 июн 2016 в 12:45

H1 — заголовок первого уровня.

Для поисковых систем несколько H1, всё-равно, что для Вас несколько названий одной статьи.

Правильный ответ: лучше всё-же использовать 1 H1

Отслеживать
ответ дан 30 июн 2016 в 9:11
Виктор Евлампьев Виктор Евлампьев
658 3 3 серебряных знака 13 13 бронзовых знаков

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

30 июн 2016 в 9:14

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

19 авг 2016 в 11:10

Долгое время считалось, что на одной веб-странице можно иметь только один элемент h1. Но в последнем стандарте ХТМЛ5 имеются семантические элементы, с которыми вы можете сегментировать/фрагментировать исходный код вашей страницы. В документации указано, что основные элементы article + section должны иметь какой-то элемент h, но не нет директивы для обязательной последовательности этих элементов. Однако, (Дьявол спрятан в деталях), вы должны понимать, что поисковики и браузеры при сканировании вашей страницы создают объектную модель документа DOM. Из этой документации W3, вы можете видеть, что элемент h1, является одним из основных элементов для создания DOM. При нескольких элементах h1 возможна задержка с определением главенства этих элементов — от какого начинать. Из-за этого может понизиться скорость загрузки веб-страницы, а это в настоящее время один из основных факторов поискового ранжирования. Поисковые системы используют заголовки для индексации структуры и содержания ваших веб-страниц. Статья W3 об этом + *HTML5 Doctor* + статья SearchEngineLand. Мой ответ: можно применять много элементов h1 на одной веб-странице, но корректнее применять только один такой элемент и выдерживать последовательность и вложенность всех элементов h. Для определения структуры сайта с элементами h, я рекомендую вам применять валидатор W3. Выберите фильтр outline и контролируйте структуру вашего сайта/страницы внизу, в секциях Heading-level outline и Structural outline. Пример последовательности элементов h.

Отслеживать
ответ дан 9 окт 2016 в 15:16
2,450 1 1 золотой знак 10 10 серебряных знаков 11 11 бронзовых знаков

вёрстка
seo

Важное на Мете

Связанные

Подписаться на ленту

Лента вопроса

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

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>

Вложенность

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

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
    Похожие публикации: