Новое отношение Яндекс к тегам Section и H1 в HTML 5

сниппет выдачи Яндекс на сайте с HTML 5

Уже давольно давно на смену устаревшему и семантически пустому HTML 4 пришел новый более SEO направленный HTML 5, который изобилует вариантами семантического оснащения контента для лучшего и более правильного распознавания поисковыми системами контента и его последующего представления в виде снипета при поиске. Цель данной статьи рассказать об изменениях отношения поисковой системы Яндекс к контенту размеченному тегами section и h1, а также роль нового тега figure при формировании заголовка и сниппета сайта на посиковой выдаче. Все написанное ниже было экспериментально проверено лично.

Что было раньше при классической div разметке сайта и как формировался сниппет в поисковой выдаче? Раньше было просто - брался тег title и из него формировался заголовок сниппета, но сейчас, с появлением HTML 5 и новыми тегами section Яндекс дает больший простор для фантазии и формирует заголовок сниппета иначе.

Давайте рассмотрим пример такой верстки. Есть абстрактная страница со следующим содержимым:

<!DOCTYPE html>
<html>
<head>
	<title>Калькулятор окон</title>
</head>
<body>
	<main>
		<section id="type-1">
			<h1>Варианты одностворчатых пластиковых окон</h1>
		</section>
 
		<section id="type-2">
			<h1>Варианты двухстворчатых пластиковых окон</h1>
		</section>
	</main>
</body>
</html>

Утрированная web-страница содержит title и два тега section со своими заголовками. Каким же будет сниппет поисковой выдачи Яндекс при такой верстке?

Теперь правила изменились и многие сайты стали Single Pages Application, что говорит о том, что весь контент содержится на одной странице по одному URL и, казалось бы, большого разнообразия тут нет. Однако, если сайт сверстан с помощью тегов section оснащенных своими заголовками h1, то правила формирования сниппета поисковой выдачи приобретают новый характер.

Теперь по запросу к примеру верстки "Одностворчатые пластиковые окна калькулятор" мы будет получать формирование заголовка сниппета по принципу title страницы + разделитель "|" + h1 секции, которая более релевантна запросу. Для примера взгляните на скриншот выдачи.

Теперь не нужно спрашивать о семантической значимости нового HTML 5 и говорить что вам это ни чего не дает. Теперь это реально работает.

Правильной SEO-верстки вам.

Добавить комментарий