Один H1 или несколько - почему правильно именно так?

Странный миф о теге H1 возник непонятно откуда и будоражит воображение сеошников уж который год, хотя представители поисковиков отвечали неоднократно:

• на ранжирование теги H1-H6 не влияют,
• штрафные санкции за наличие нескольких H1 не применяются.

Независимые эксперименты в большинстве своём подтверждали сказанное, оттого представители поиска не стремились объяснять свои ответы в деталях. Например, вспомним какой-нибудь случай из недавних: человек задал вопрос сотруднику Google в Твиттере о том, сколько тегов H1 следует использовать на отдельной странице, и тот просто ответил - сколько вам нужно.

Mathias Sauermann / 12 Apr 2017
    Hello @JohnMu, regarding the use of heading
    tags: How many h1-tags should be used
    on a single webpage? Only one?

John Mueller / 12 Apr 2017
    As many as you want.

Вот ещё один пример из раздела Создавайте корректный и эффективный код HTML в ответах Google для вебмастеров.

Нарушение рекомендаций относительно HTML
не влияет на результаты сканирования
в Google.

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

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

Ну да оставим гипотезы в стороне, вернёмся к нашему разговору. Я вынесу два упомянутых выше ответа в отдельные параграфы и попробую разъяснить. Затем с помощью современных спецификаций покажу, что как применение одного H1, так и применение нескольких H1 на странице - эти два случая верные с точки зрения стандарта.

О не влиянии на ранжирование

Ранжирование документов в интернете - это процесс, выполняемый много позже сканирования и индексирования документов.

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

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

А потом индексатор помещает эти связанные друг с другом "вырезки" в индексный словарь.

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

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

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

Об отсутствии штрафных санкций

Здесь просто следует вспомнить, что техническая спецификация HTML ещё с версии 4.01, которую принял консорциум W3C в декабре 1999 года, интерпретировала теги H1-H6 именно как шесть уровней заголовков для обозначения вложенных разделов (секций) документа.

Подразумевалось, что люди станут обозначать иерархию разделов, соблюдая очерёдность уровней, - то есть без пропуска нумерации, от наивысшего уровня H1 к нижайшему уровню H6. А бок о бок с одним разделом допускался другой раздел с тегом того же уровня. Это же допущение касалось не только тегов H2-H6, но и тега H1.

Давайте посмотрим, как об этом допущении упоминал параграф 7.5.5 Headings: The H1, H2, H3, H4, H5, H6 elements из спецификации стандарта HTML 4.01.

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

Some people consider skipping heading levels to be bad
practice. They accept H1 H2 H1 while they do not accept
H1 H3 H1 since the heading level H2 is skipped.

Некоторые люди считают пропуск уровней заголовка плохой
практикой. Они признают H1 H2 H1 в то время как отвергают
H1 H3 H1, поскольку заголовок уровня H2 пропущен.

Уточню, что к моменту написания моего рассказа актуальной версией стандарта являлся HTML 5.2, который был принят консорциумом W3C в декабре 2017 года и действует уже более 2 лет. Давайте в его рамках пройдём тот же путь логических заключений и убедимся, что возможность написания нескольких H1 сохранена и в новой версии.

Итак...

Семантика HTML

Наверняка вам уже известно, что каждый HTML-тег имеет конкретный смысл и свою область применения согласно этому смыслу. О такой специальной связи нам сообщает параграф 3.2.1. Semantics (семантика) из спецификации для текущей версии стандарта HTML.

Elements, attributes, and attribute values in HTML are defined
(by this specification) to have certain meanings (semantics).
For example, the OL element represents an ordered list, and
the LANG attribute represents the language of the content.

These definitions allow HTML processors, like web browsers
and search engines, to present documents and applications
consistently in different contexts.

Элементы, атрибуты и значения атрибутов в HTML определены
(согласно этой спецификации), чтобы иметь определённые
смыслы (семантику). Например, элемент OL представляет
упорядоченный список, а атрибут LANG представляет язык
содержимого.

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

Чуть ниже на той же странице документа есть следующее предупреждение о необходимости соблюдать семантику.

When the appropriate HTML element or attribute is not used,
it deprives HTML processors of valuable semantic information.

Когда соответствующий HTML-элемент не используется, он
лишает HTML-процессоры ценной семантической информации.

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

К примерам такого дополнения относится технологический стандарт WAI-ARIA - одна из разработок инициативы Web Accessibility, предложенная консорциумом W3C с целью поддержать технологии потребления контента людьми с ограниченными возможностями.

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

К примерам иного типа дополнений относятся такие стандарты, модели представления данных и схемы микроразметки как:

• JSON-LD - сериализация связанных данных на основе текстового формата JavaScript Object Notation.
• HTML+RDFa - разметка структуры данных с помощью дополнительных атрибутов в HTML-тегах документа пренебрегая семантикой этих тегов.
• Schema.org - схема разметки метаданных документа с помощью особых атрибутов, отмечающих очередную порцию информации плюс её назначение.

С точки зрения SEO-мастера, все эти ролевые атрибуты, микроразметки и прочие ухищрения - вполне пригодный способ объяснить поисковому роботу структуру контента в ситуации, когда SEO-мастер вынужден работать с испорченной вёрсткой.

Они позволили искусственно "превратить" любой тег в заголовок типа H1-H6, и не беспокоиться об упоминавшемся выше предупреждении насчёт соблюдения семантики. Ведь подобные уловки предложены были поисковыми гигантами после того, как они увидели масштаб проблемы: существенная доля страниц в интернете была свёрстана вопреки правилам семантической вёрстки.

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

Элемент TITLE

Однако главный значащий тег в документе всё-таки должен быть. Этот тег - TITLE. Именно он интерпретируется стандартом как раз с теми качествами, которыми многие SEO-мастера ошибочно наделяют тег H1. Я процитирую параграф 4.2.2. The TITLE element из спецификации HTML.

The TITLE element represents the document's title or name.
Authors should use titles that identify their documents
even when they are used out of context, for example in
a user's history or bookmarks, or in search results.
The document's title is often different from its first
heading, since the first heading does not have to stand
alone when taken out of context.

There must be no more than one TITLE element per
document.

Элемент TITLE представляет заглавие или название документа.
Авторам следует использовать заглавия, идентифицирующие их
документы, даже когда заглавия используются вне контекста,
например в истории или закладках пользователя, или в результатах
поиска. Заглавие документа часто отличается от его первого
заголовка, потому что этот заголовок не имеет автономности,
когда используется вне контекста.

В документе должно быть не более одного элемента TITLE.

Ещё привлеку ваше внимание к блоку EXAMPLE2 в том же параграфе. Там объясняется, что заголовки H1-H6 могут содержать малозначащий текст, так как эти заголовки не является ключевым элементом по сравнению с тегом TITLE.

Here are some examples of appropriate titles,
contrasted with the top-level headings that
might be used on those same pages.

«title»Introduction to The Mating Rituals of Bees«/title»
...
«h1»Introduction«/h1»

The next page might be a part of the same site.
Note how the title describes the subject matter
unambiguously, while the first heading assumes
the reader knows what the context is and therefore
won't wonder if the dances are Salsa or Waltz:

«title»Dances used during bee mating rituals«/title»
...
«h2»The Dances«/h2»

Вот несколько примеров соответствующих заглавий,
контрастирующих с заголовками верхних уровней,
которые могут использоваться на тех же страницах.

«title»Введение в брачные ритуалы пчёл«/title»
...
«h1»Введение«/h1»

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

«title»Танцы, используемые во время брачных ритуалов«/title»
...
«h2»Танцы«/h2»

То есть согласно стандарту, ни один из тегов H1-H6 не является самодостаточным, чтобы поисковый робот придавал судьбоносное значение тексту тега в отрыве от заглавия документа.

Любопытен ещё один момент. Исходя из официального определения тегов H1-H6, их область действия ограничена так называемым аутлайном - то есть контуром, его ещё называют структурой раздела, в котором тег был использован. Следовательно, нет требований к заголовку быть уникальным в сравнении с другим заголовком того же уровня на других страницах сайта, поскольку его контур лежит внутри его страницы и не пересекается с контурами других страниц.

То есть H1 заголовок "Введение" на странице курсов танца может быть идентичен такому же заголовку "Введение" на странице курсов вязания. Поскольку по-настоящему различает названия этих страниц лишь тег TITLE, играющий в этом смысле роль эдакого воображаемого заголовка нулевого уровня - H0.

Элементы H1-H6

Давайте теперь посмотрим, как стандарт HTML определяет теги H1-H6, для чего заглянем в параграф 4.3.6. The H1, H2, H3, H4, H5, and H6 elements технической спецификации.

These elements represent headings for their sections.
...
NOTE:
The semantics and meaning of the H1–H6 elements are
further detailed in the section on [§4.3.9 Headings
and sections].

Эти элементы представляют заголовки для своих разделов.
...
ПРИМЕЧАНИЕ:
Семантика и значение элементов H1-H6 более подробно
описаны в разделе [§4.3.9 Заголовки и разделы].

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

Примечательно также и то, что некая неуверенность о значимости тегов H1-H6 свойственна и довольно известным справочникам для разработчиков. Например, вот как осторожно даёт заметки о тегах параграф Usage Notes раздела H1...H6: The HTML Section Heading elements из справочника Mozilla Developer Network.

You should only use one H1 per page. Using more
than one will not result in an error, but using
only one is seen as a best practice. It makes
logical sense - H1 is the most important heading,
and tells you what the purpose of the overall
page is. You wouldn't have a book with more than
one title, or a movie with more than one name!
Having a single top-level title is also arguably
better for screenreader users, and SEO.

Вы должны использовать только один H1 на страницу.
Использование более одного не приведёт к ошибке,
но рекомендуется использовать только единственный.
Логично, что тег H1 является наиболее важным
заголовком и говорит вам, какова цель всей
страницы. У вас не было бы книги с более чем
одним оглавлением или фильма с более чем одним
названием! Наличие единственного заголовка
верхнего уровня вероятней всего лучше для
пользователей устройства чтения с экрана и SEO.

Здесь имеются три неточности:

• Во-первых, стандарт HTML не обязывает вас использовать тег H1 строго один раз. Более того, допустимы так называемые уточняющие страницы, особенно в AJAX-овых схемах визуализации контента. Подобные страницы просто преподносят какой-то скрытый фрагмент текста и потому могут вообще не иметь заголовка.
• Во-вторых, тег H1 никогда не являлся важнейшим заголовком страницы. Таким всегда являлся тег TITLE.
• В-третьих, наличие одного или нескольких H1 никогда не имело какого-либо решающего значения для SEO.

Элемент SECTION

Здесь я привлеку ваше внимание к блоку с примером кода, который показан в разделе 4.3.3 The SECTION element из спецификаций, опубликованных на сайте живых (действующих) стандартов Интернета. Поскольку в том примере чётко показано, как допускается использовать теги H1.

In the following example, we see an article
(part of a larger Web page) about apples,
containing two short sections.

«article»
    «hgroup»
        «h1»Apples«/h1»
        «h2»Tasty, delicious fruit!«/h2»
    «/hgroup»
    «p»The apple is the pomaceous fruit of the apple tree.«/p»
    «section»
        «h1»Red Delicious«/h1»
        «p»These bright red apples are the most common found in many supermarkets.«/p»
    «/section»
    «section»
        «h1»Granny Smith«/h1»
        «p»These juicy, green apples make a great filling for apple pies.«/p»
    «/section»
«/article»

Notice how the use of section means that
the author can use h1 elements throughout,
without having to worry about whether
a particular section is at the top level,
the second level, the third level, and so on.

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

«article»
    «hgroup»
        «h1»Яблоки«/h1»
        «h2»Вкусный, восхитительный фрукт!«/h2»
    «/hgroup»
    «p»Яблоко является семечковым плодом яблони.«/p»
    «section»
        «h1»Красные вкусные«/h1»
        «p»Эти ярко-красные яблоки чаще всего встречаются во многих супермаркетах.«/p»
    «/section»
    «section»
        «h1»Сорт Бабушка Смит«/h1»
        «p»Эти сочные зелёные яблоки станут отличной начинкой для яблочных пирогов.«/p»
    «/section»
«/article»

Обратите внимание, что использование тега SECTION
означает, что автор может использовать элементы
H1 повсюду, не беспокоясь о том, находится ли
определённый раздел на верхнем уровне, втором
уровне, третьем уровне и так далее.

Сразу объясню, почему в своих подтверждающих ссылках я вдруг перескочил со спецификаций W3C на спецификации WHATWG. Просто эти ссылки ещё современнее в том смысле, что учитывают уже принятый стандарт плюс новые черновики, готовящиеся перейти в одобренные рекомендации.

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

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

Чтобы после версии HTML 5.02 избежать появления двух несовместимых стандартов, предложенных конкурирующими организациями, оба участника договорились и подписали в апреле-мае 2019 года Memorandum of Understanding Between W3C and WHATWG (меморандум о взаимопонимании между консорциумом и рабочей группой). Это соглашение закрепило за организацией WHATWG роль вырабатывать оговоренные стандарты, позволяя членам W3C тоже участвовать в работе группы, а за организацией W3C закрепило роль утверждать выработанные стандарты как свои рекомендации.

Элемент HGROUP

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

Чтобы понять, как это записывается, давайте снова посмотрим на блок с примером кода из раздела 4.3.7 The HGROUP element.

The following two examples show ways in which
two H1 headings could be used within an HGROUP
element to group the US and UK names for
the same movie.

«hgroup»
    «h1»The Avengers«/h1»
    «h1»Avengers Assemble«/h1»
«/hgroup»
«hgroup»
    «h1»Avengers Assemble«/h1»
    «h1»The Avengers«/h1»
«/hgroup»

В следующих двух примерах показаны способы
применения двух заголовков H1 в элементе
HGROUP для группировки названия одного фильма
в США и Великобритании.

«hgroup»
    «h1»The Avengers«/h1»
    «h1»Avengers Assemble«/h1»
«/hgroup»
«hgroup»
    «h1»Avengers Assemble«/h1»
    «h1»The Avengers«/h1»
«/hgroup»

Заключение

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

• TITLE - как уникальный ключ документа
  • H1-H6 - как неуникальные дополняющие ключи (субключи)
• P, UL/LI, OL/LI, DL/DT/DD, BLOCKQUOTE - как текст хешированный наподобие "#ключ #субключи"
  • STRONG, EM - как неуникальные ключи текста (наподобие внутритекстовых хешей)
  • A - как неуникальные якорные ключи

На всякий случай напомню, эти теги не имеют отношения к ранжированию, на него влияет текст, который вы напишете в тегах.

Что ещё почитать по теме SEO

Вот Развёрнутое исследование вопроса о слеше на конце URL. Там по выдержкам из RFC 1738 объяснены причины, согласно которым написание URL с оконечным слешем или без такого считается в обоих случаях правильным.

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