Как правильно писать HTML заголовки для сайта

Рейтинг: 4 из 5, голосов 5
++++-
Как правильно писать HTML заголовки для сайта

Правильно расставленные HTML заголовки <h1>, <h2>, <h3> и т.д. - это важный пункт оптимизации страниц для поисковой системы. У вебмастеров есть разные мнение относительно правильности использования HTML заголовков. В этой статье я изложу свою точку зрения как правильно заполнять HTML заголовки для страниц сайта. На мой взгляд такой подход является оптимальным.

Учимся понимать иерархию HTML заголовков

Чтобы визуализировать для себя суть структуры заголовков, представим, что у нас есть книга. Она разделена на 2 раздела, каждый раздел имеет по 3 главы.

Получается такая структура:

Книга
-- Раздел 1
-- -- Глава 1
-- -- Глава 2
-- -- Глава 3
-- Раздел 2
-- -- Глава 4
-- -- Глава 5
-- -- Глава 6

Представление такой структуры в виде иерархии HTML заголовков будет выглядеть следующим образом:

<h1>Книга</h1>
  <h2>Раздел 1</h2>
    <h3>Глава 1</h3>
    <h3>Глава 2</h3>
    <h3>Глава 3</h3>
  <h2>Раздел 2</h2>
    <h3>Глава 4</h3>
    <h3>Глава 5</h3>
    <h3>Глава 6</h3>

Как вы видите, глава имеет меньший охват, чем раздел, соответственно имеет меньший по значимости уровень заголовка. Однако, "Раздел 1" и "Раздел 2" - это две последовательные структуры (Раздел 2 не является подразделом Раздела 1) - соответственно они имеют одинаковый уровень HTML заголовка.

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

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

Правильная структура HTML заголовков страницы

Структура заголовков должна отражать смысл контента в них. Подзаголовки <h3> должны конкретизировать суть обозначенную в HTML заголовке <h2>, а два заголовка одного уровня - продолжать друг друга либо раскрывать другую грань содержимого страницы.

И помните: указание заголовка <h2> после <h3> укажет что предыдущий раздел <h2> закончен и начат новый, а не подчеркнет значимость подраздела.

В глазах поисковой системы заголовки имеют собственный вес в зависимости уровня. Наибольший вес имеет заголовок <h1>, меньше него <h2>, наименьший <h6>. Таким образом, названия разделов имеют больший вес, чем названия подразделов.

Сколько уровней заголовков использовать

Основное, на что нужно ориентироваться - заголовки должны отражать структуру содержимого.

На сколько частей разбивать материал и на сколько подразделов его дробить - решать вам, и во многом это зависит от специфики вашей ниши.

Из практики скажу, что редко когда есть необходимость опускаться ниже третьего уровня. Обычно заголовков <h1>, <h2>, <h3> вполне достаточно, но, повторюсь: на первом месте правильное отражение структуры контента.

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

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

Заголовки дополнительных блоков сайта

Практически все блоги имеют блок ссылок на похожие статьи, блок опроса, подписки; интернет-магазины - блок фильтров, похожих товаров, популярных, ранее просмотренных, хитов продаж... Все это не является основным контентом страницы, но структура у этих блоков также есть. Так что, стоит озаглавливать такие блоки заголовком <h2>, <h3> или каким-то другим?

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

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

Заголовки на сайте интернет-магазина

Со статейными страницами все просто - есть основная статья, у нее есть структура. Но как писать HTML заголовки на сайте интернет-магазина?

Стоит выделить 2 типа страниц: страница каталога и страница товара.

Страница каталога

Что действительно стоит сделать - так это вынести в заголовок <h1> название подборки: "Холодильники SAMSUNG", "Горные велосипеды Ardis", "Все для отдыха", "Женские платья и сарафаны" - это все может быть заголовком <h1>.

Во многих случаях этого будет достаточно. Вам не обязательно использовать несколько уровней HTML заголовков на каждой странице.

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

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

Страница товара

Думаю, ни кого не возникнет сомнений, что заголовок <h1> должен содержать название товара. Хорошей практикой для некоторых ниш является добавление слов, конкретизирующих товар, например, бренда или какой-то характеристики.

У магазина одежды, мало шансов попасть в топ по запросу "Белая футболка", но куда больше по запросу "Белая футболка Trussardi". Если вы продаете телефоны, вместо указания в названии "iPhone 8" и указания вариантов цвета и объема памяти в списке характеристик создайте несколько страниц и сделайте у них <h1>: "iPhone 8 256Gb Белый", "Apple iPhone 8 64Gb Space Gray" и так далее.

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

И в первом и во втором случаях стоит присвоить этим блокам заголовки HTML (обычно <h2>). В данном случае блоки относятся к основному контенту и не являются обверткой, о чем говорили выше.

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

Пример использования заголовка h2 на странице товара

Обратите внимание, вкладка имеет короткое название "Характеристики", при нажатии открывается блок с заголовком <h2>: "Технические характеристики Apple iPhone X 256GB Silver".

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

Выводы. Рекомендации по использованию заголовков HTML

1) На странице должен быть только один заголовок уровня <h1>.

2) Строго сохраняем иерархию: <h2> внутри <h1>, <h3> внутри <h2> и т.д. Никаких <h4> сразу после <h2> и т.п.

3) Заголовки должны передавать смысл содержимого.

4) Не стоит использовать заголовки на постоянно меняющихся / дополнительных элементах страницы.

Оцените, насколько полезна эта статья
++++-
Оставьте комментарий

Отправляя форму, я даю согласие на обработку персональных данных.