Семантическая верстка в SEO

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

header - верхняя часть страницы
nav - основные навигационные ссылки
main - главное содержимое документа
section - смысловой раздел внутри страницы, обычно с заголовком
article - самостоятельный материал, который имеет смысл отдельно
aside - сайдбар, то есть дополнительное содержимое
footer - нижняя часть страницы

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

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

Вот пример правильно оформленной структуры страницы через семантические теги:

<header>
	<div class="logo">
		<img src="logo.png">
	</div>
	<nav>
		<a href="/catalog">Каталог</a>
		<a href="/delivery">Доставка</a>
	</nav>
	<div class="contacts">
		+7 999 123-45-67
	</div>
</header>

<main>
	<h1>Кофемашины</h1>
	<p>
		Каталог моделей для дома.
	</p>
</main>

<aside>
	<h2>Материалы по теме</h2>
	<a href="/water">Вода для кофе</a>
</aside>

<footer>
	Контакты магазина
</footer>

Важно

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

Практические задачи

Объясните, в чем важность семантической верстки для SEO.

Дана разметка страницы:

<div>
	<div class="logo">
		<img src="logo.png">
	</div>
	<div>
		<a href="/catalog">Каталог</a>
		<a href="/delivery">Доставка</a>
	</div>
	<div class="contacts">
		+7 999 123-45-67
	</div>
</div>

<div>
	<h1>Кофемашины</h1>
	<p>
		В нашем каталоге собраны модели
		для дома: от компактных вариантов
		для одной чашки до автоматических
		машин с капучинатором. Сравните
		характеристики, цены и условия
		доставки.
	</p>
</div>

<div>
	<h2>Материалы по теме</h2>
	<a href="/water">Вода для кофе</a>
</div>

<div>
	Контакты магазина
</div>

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

Дана разметка страницы:

<main>
	<h1>Блог о кофе</h1>
	<p>
		В этом разделе мы рассказываем,
		как выбрать помол для разных
		способов приготовления: от эспрессо
		до френч-пресса. Читайте сравнения,
		советы и рецепты.
	</p>
</main>

<main>
	<h2>Материалы по теме</h2>
	<a href="/water">Вода для кофе</a>
</main>

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