Статьи и полезная инфомация

Внедрение микроразметки на страницы сайта

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

Например, мы имеем сайт компании "Рога и копыта". Заголовок гласит "Компания Рога и копыта доставка охлажденного мяса по городу и области по привлекательным ценам". Ниже указано: "мы приобретаем продукцию только у проверенного производителя Колхоз "Заря" ул. Мясная д. 12", а где-нибудь внизу: "Адрес: улица неизвестная дом 5". Задача микроразметки однозначно указать поисковой машине: вот эти три слова ("Рога и копыта") - это название организации, "улица Неизвестная дом 5" - адрес этой организации, а занимается эта организация: "доставка охлажденного мяса по городу и области".

Реализация микроразметки возможна с помощью синтаксисов Microdata, RDFa (RDFa Lite), JSON-LD. В данной статье мы рассмотрим реализацию с помощью HTML Microdata. Спецификация размещена на сайте W3C (www.w3.org/TR/microdata/).

Данной спецификацией определены новые HTML атрибуты для встраивания машиночитаемых данных, которые можно и нужно добавлять к HTML тегам на страницах сайта. Общая идея такова: на нашей странице имеются описания различных предметов и вещей - сущностей (это могут быть организации, книги, услуги и т.п.). Эти описания находится внутри конкретных HTML элементов. Мы берем такой элемент и добавляем к нему атрибут "itemscope", обозначая, что в данном контейнере поисковый робот найдет описание нашей сущности. Далее с помощью атрибута "itemtype='$тип_сущности'" мы указываем, что это за сущность. Затем, в нужных местах к элементам, содержащим текст с описанием значимых свойств сущности мы добавляем атрибут "itemprop='$наименование_свойства'". Текст, содержащийся внутри элемента с атрибутом "itemprop" будет воспринят поисковым роботом, как значение (value) указанного свойства.

Возникает закономерный вопрос: какие типы и свойства можно указывать в качестве значений этих атрибутов? Значением атрибута itemtype является абсолютная ссылка (или ссылки, разделенные пробелом) на специально созданные для этого словари. Самым распространенным в настоящее время является словарь Schema.org, доступный по адресу: Schema.org/docs/schemas.html. Значением атрибута itemprop может быть одно из описанных в словаре свойств конкретной сущности.

Продемонстрируем на примере. Предположим у нас есть контейнер с информацией об организации:

<footer>
	<p>ООО "Рога и копыта"</p>
	<p>Адрес: г. Обычный, ул. Неизвестная, д. 5</p>
	<p>Телефон: 8(777)123-45-67</p>
	<p>Электронная почта: roga@mail.ru</p>
</footer>
			

Заходим на Schema.org/, переходим по вкладке Schemas, и в списке используемых типов выбираем Organization

скриншот сайта schema.org

И видим таблицу с возможными свойствами сущности "Организация"

скриншот сайта schema.org/Organization

Добавим в наш код микроданные

<footer 'itemscope itemtype='http://schema.org/Organization'>
	<p itemprop='name'>ООО "Рога и копыта"</p>
	<p itemprop='address'>Адрес: г. Обычный, ул. Неизвестная, д. 5</p>
	<p itemprop='telephone'>Телефон: 8(777)123-45-67</p>
	<p itemprop='email'>Электронная почта: roga@mail.ru</p>
</footer>
			

Теперь, если мы откроем валидатор микроразметки Yandex и вставим фрагмент нашего кода, то увидим, что Yandex поймет, что речь у нас идет об организации, у нее есть наименование, адрес, телефон и электронная почта. При этом парсер микроразметки воспринимает в качестве значения свойства весь текст, находящийся в контейнере с атрибутом itemprop, что не всегда удобно, если мы решим использовать только существующие элементы. скриншот яндекс вебмастер - валидатор микроразметки скриншот Yandex валидатора микроразметки

Давайте специально создадим элементы <span>

<footer 'itemscope itemtype='http://schema.org/Organization'>
	<p>ООО <span itemprop='name'>"Рога и копыта"</span></p>
	<p>Адрес: <span itemprop='address'>г. Обычный, ул. Неизвестная, д. 5</span></p>
	<p>Телефон: <span itemprop='telephone'>8(777)123-45-67</span></p>
	<p>Электронная почта: <span itemprop='email'>roga@mail.ru</span></p>
</footer>
			

Проверяем скриншот Yandex валидатора микроразметки

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

Например

<body 'itemscope itemtype='http://schema.org/Organization'>
	<img src='/imgs/logotip.png'  alt='Логотип компании Рога и копыта' itemprop='logo'>
	<h1>Компания 
	  <span itemprop='name'>Рога и копыта</span> 
	  <span 'itemprop='makesOffer'  itemscope itemtype='http://schema.org/Offer'>
	    <span 'itemprop='category'>доставка охлажденного мяса по городу и области</span> 
	  по привлекательным ценам</span>
	</h1>
	<div>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
		Architecto dolores error magnam ex, obcaecati sunt ipsam enim vel impedit, eius. 
		Magnam, magni, asperiores. Dolor beatae quis quod cum facilis, nihil veritatis, 
		illum error assumenda culpa excepturi omnis necessitatibus sunt sed vero 
		earum distinctio nam magnam, illo hic!</p>
	</div>
	<div>
		<p>Deserunt deleniti consequatur soluta doloremque atque, 
		aliquam nemo voluptatibus aut ad libero illum, quam omnis sit, tempore 
		laudantium necessitatibus voluptatem quas modi. Cum minima voluptatibus, 
		tenetur inventore asperiores, blanditiis facere molestiae nihil, illum iste 
		quisquam numquam dicta vero. Qui rerum, inventore dolore neque voluptas delectus? 
		Commodi consectetur eaque vel eum rem officiis id.</p>
	</div>
	<footer>
		<p>ООО "Рога и копыта"</span></p>
		<p>Адрес: <span itemprop='address'>г. Обычный, ул. Неизвестная, д. 5</span></p>
		<p>Телефон: <span itemprop='telephone'>8(777)123-45-67</span></p>
		<p>Электронная почта: <span itemprop='email'>roga@mail.ru</span></p>
	</footer>
</body>
			

Скармливаем наш код валидатору скриншот Yandex валидатора микроразметки

Словарь schema.org предоставляет возможность для описания огромного количества сущностей. В электронной коммерции также применяется словарь GoodRelations, расширяющий возможности schema.org. Есть и другие инструменты, о которых, возможно, напишу в дальнейшем.