Иерархия заголовков в SEO

Мы уже разобрали title, description и h1. Тайтл и метаописание помогают пользователю перейти на страницу из поиска, а h1 называет саму страницу. Но на этом работа с заголовками не заканчивается.

Внутри страницы тоже нужна структура. Ее задают заголовки h1–h6. Уровень заголовка обозначает место раздела в структуре, а не размер текста. Пользователи просматривают по заголовкам страницу, а скринридеры могут использовать их для быстрой навигации.

Вот пример хорошо оформленной структуры страницы:

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

<h2>Полив</h2>
<p>
	Полив - самое важное в уходе
	за растениями. Большинство из них
	не любят переувлажнения, поэтому
	поливать нужно только тогда, когда
	верхний слой почвы подсох.
</p>

<h3>Как часто поливать</h3>
<p>
	Частота полива зависит от вида
	растения, времени года и влажности
	в комнате. Летом поливают чаще,
	зимой - реже.
</p>

<h3>Какая вода подходит</h3>
<p>
	Для полива лучше использовать
	отстоянную воду комнатной
	температуры. Холодная вода
	из-под крана может навредить
	корням.
</p>

<h2>Освещение</h2>
<p>
	Свет нужен растениям для роста.
	Но разным видам требуется разное
	количество света: одни любят
	солнце, другие предпочитают
	полутень.
</p>

Ошибка 1

Частая ошибка - выбирать заголовок по размеру шрифта. Например, взять h3 только потому, что он выглядит подходяще в макете, или сделать все заголовки h1, чтобы текст был крупным.

Так делать нельзя. Уровень заголовка - это смысл, а не оформление. Если раздел вложен в другой раздел, он должен быть ниже по уровню. Если текст не является заголовком, это не заголовок, даже если он крупный и жирный.

Ошибка 2

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

Вот как выглядит такая ошибка:

<p><b>Полив</b></p>
<p>
	Полив - самое важное в уходе
	за комнатными растениями.
</p>

<p><b>Как часто поливать</b></p>
<p>
	Частота полива зависит от вида
	растения и времени года.
</p>

<p><b>Какая вода подходит</b></p>
<p>
	Для полива лучше использовать
	отстоянную воду комнатной
	температуры.
</p>

Дана верстка:

<h1>SEO для разработчиков</h1>
<p>
	Поисковая оптимизация - это работа
	над сайтом, чтобы он попадал в топ
	поисковиков по нужным запросам.
</p>

<h1>Метаданные</h1>
<p>
	Метаданные помогают поисковику
	понять, о чем страница, и показать
	ее пользователю в результатах поиска.
</p>

<h1>Название страницы</h1>
<p>
	Тег title задает название страницы,
	которое видно во вкладке браузера
	и в результатах поиска.
</p>

<h1>Метаописание</h1>
<p>
	Метаописание кратко рассказывает,
	что находится на странице, и помогает
	пользователю решить, переходить ли по ссылке.
</p>

<h1>Структура содержимого</h1>
<p>
	Заголовки задают структуру страницы
	и помогают пользователю быстро
	находить нужные разделы.
</p>

Объясните, в чем ошибка и исправьте ее.

Дана верстка:

<h1>SEO для разработчиков</h1>
<p>
	Поисковая оптимизация - это работа
	над сайтом, чтобы он попадал в топ
	поисковиков по нужным запросам.
</p>

<h2>Метаданные</h2>
<p>
	Метаданные помогают поисковику
	понять, о чем страница, и показать
	ее пользователю в результатах поиска.
</p>

<h3>Название страницы</h3>
<p>
	Тег title задает название страницы,
	которое видно во вкладке браузера
	и в результатах поиска.
</p>

<h3>Метаописание</h3>
<p>
	Метаописание кратко рассказывает,
	что находится на странице, и помогает
	пользователю решить, переходить ли по ссылке.
</p>

<h2>Структура содержимого</h2>
<p>
	Заголовки задают структуру страницы
	и помогают пользователю быстро
	находить нужные разделы.
</p>

<h4>Заголовки</h4>
<p>
	Заголовки бывают шести уровней,
	от h1 до h6, и выстраиваются
	в последовательную иерархию.
</p>

Объясните, в чем ошибка и исправьте ее.

Дана верстка:

<p><b>SEO для разработчиков</b></p>
<p>
	Поисковая оптимизация - это работа
	над сайтом, чтобы он попадал в топ
	поисковиков по нужным запросам.
</p>

<p><b>Метаданные</b></p>
<p>
	Метаданные помогают поисковику
	понять, о чем страница, и показать
	ее пользователю в результатах поиска.
</p>

<p>
	Тег title задает название страницы,
	которое видно во вкладке браузера
	и в результатах поиска.
</p>

<p>
	Метаописание кратко рассказывает,
	что находится на странице, и помогает
	пользователю решить, переходить ли по ссылке.
</p>

<p><b>Структура содержимого</b></p>
<p>
	Заголовки задают структуру страницы
	и помогают пользователю быстро
	находить нужные разделы.
</p>

Объясните, в чем ошибка и исправьте ее.

Дана верстка:

<h1>Поход в горы</h1>
<p>
	Горный поход требует подготовки
	и правильно подобранного снаряжения.
</p>

<h3>Подготовка к походу</h3>
<p>
	Перед походом нужно изучить маршрут
	и проверить прогноз погоды.
</p>

<h4>Маршрут</h4>
<p>
	Маршрут лучше заранее сохранить
	на карте и показать его группе.
</p>

<h4>Погода</h4>
<p>
	Погоду проверяют за несколько дней
	до выхода и в день похода.
</p>

<h3>Снаряжение</h3>
<p>
	Без нужного снаряжения поход
	может стать опасным.
</p>

<h4>Рюкзак</h4>
<p>
	Рюкзак должен быть удобным
	и вмещать все необходимое.
</p>

<h4>Обувь</h4>
<p>
	Обувь выбирают с учетом рельефа
	и длины маршрута.
</p>

Объясните, в чем ошибка и исправьте ее.