Как-то давным-давно слышал фразу, что нужно ставить только один хештег h1 на страницу, но так ли это? Мне попалась статья на эту тему, но, к сожалению, она на английском, попробовал зафиксировать основные моменты той статьи на русском.
Сколько <h1> на одной странице я могу поставить?
Предыстория
Совсем недавно натолкнулся на статью The Truth About Multiple H1 Tags in the HTML5 Era, в которой рассказывается, сколько же надо ставить тэгов H1 на странице. Я перевел её и основные моменты выписал ниже.
Сколько же я могу поставить тегов 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, представляет некоторые серьезные проблемы:
— Обобщенный ярлык для всей страницы снижает релевантность
У нас есть <h1> заголовок с тегом «Блог о бобовой литературе», который служит ярлыком для всей страницы, и, тем не менее, текст этого заголовка дает только общее представление о содержании. Это снижает способность поисковых систем интерпретировать фактический предмет на странице и, в свою очередь, его релевантность для поисковых фраз.
— Отдельные статьи рассматриваются как подразделы одного фрагмента контента
Невозможно различить две статьи на одной странице как одинаково важные и автономные объекты. Они оба рассматриваются как часть единого общего контента, хотя это не так.
— В разных областях сайта требуется разная разметка Если посетитель просматривает одну из статей сам по себе, как это можно сделать в обычном блоге, разметку придется переработать, чтобы <h1> теги применялись к заголовку статьи, а не к заголовку сайта, как я продемонстрировал на своем примере бизнес-сайта. в предыдущем разделе.
— Существуют ограничения на характер метки документа/названия сайта
Во многих случаях заголовок сайта (который имеет тенденцию играть роль метки документа даже в HTML5) может не иметь какого-либо значимого отношения к содержимому страницы. Например, я мог бы вести блог с заголовком сайта «Даня говорит», и он мог бы отображать одну статью о кодировании HTML, а другую — о милых щенках. В этом случае было бы нецелесообразно интерпретировать заголовок сайта как представляющий любую из этих статей, поэтому мне пришлось бы изменить имя своего блога. Это может быть проблемой, особенно если сайт хочет присвоить себе имя, которое может быть запоминающимся, но не обязательно значимым.
Вот где приходит HTML5, чтобы спасти положение и решить каждую из этих проблем.
Ключевые аспекты алгоритма описания документа HTML5
В то время, как структура документа до HTML5 была построена исключительно из тегов заголовков, алгоритм структуры документа HTML5 использует следующие ключевые аспекты:
— Секционирование корня : начиная с <body>, необходимо разделять на секции для лучшего понимания поисковыми машинами.
Секционирование корневых тегов: <body>, <blockquote>, <figure>, <td>, <details>, <dialog>,<fieldset>.
— Разделение контента : каждый корень разделов разбит на серию разделов контента. Эти разделы создаются путем размещения тегов элементов содержимого, разбивающих на разделы, вокруг отдельных частей содержимого. Элементы контента секционирования бывают вложенными и семантическими. Тип, который следует использовать, зависит от характера содержимого, которое он будет содержать.
Секционирование теги контента: <section>, <article>, <nav>,<aside>.
— Содержание заголовка : только текстовые метки для разделов содержания. При отсутствии тегов содержимого для разделения наличие тега заголовка все равно будет интерпретироваться как начало нового раздела содержимого.
Заголовок теги: <h1>, <h2>, <h3>, <h4>, <h5>,<h6>.
Понимание того, как используются эти аспекты HTML5, относительно несложно, и процесс обычно выглядит примерно так:
- Разделительный корень документа формируется его
<body>тегами. - Внутри этого корня разделов документ разбивается на разделы, например, путем заключения статей в
<article>теги. - Теги заголовков помещаются в разделы содержимого по мере необходимости, причем первый тег заголовка в любом разделе действует как метка для этого раздела.
Алгоритм схемы документа HTML5 имеет много других аспектов. Подробная информация об этом доступна на W3C.
Новые правила использования HTML5 <h1>
- Используйте один набор
<h1>тегов для каждого корневого раздела или раздела содержимого. - Между
<h1>открывающим<body>тегом и первым разделом содержимого всегда должен быть заголовок уровня для обозначения всего документа. - Когда
<h1>заголовок уровня должен использоваться для обозначения раздела содержимого, он должен быть первым заголовком, который появляется в разделе, потому что первый заголовок всегда интерпретируется как метка раздела. - Если
<h1>заголовок уровня используется для обозначения раздела содержимого, любые другие заголовки, используемые в этом разделе, должны быть H2 или ниже, чтобы создать точную структуру документа.
Выводы
Эта статья больше напоминает разъяснения спецификации с дополнениями из истории развития спецификации. В любом случае, новые знания, которые я получил от прочтения, я хочу как можно чаще использовать в своей работе.
