Как “подружить” сайт с поисковыми роботами с помощью микроразметки? Часть 1

Популярность
1 Star2 Stars3 Stars4 Stars5 Stars
Loading...
Активность 3 108 0
Поделиться с друзьями:
1MicroDataPrev

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

Что такое микроразметка и с чем ее едят?

Информация на страницах сайта часто структурируется с учетом анализа удобства пользования ресурсом, размещается визуально наиболее удобным способом. Так она легко воспринимается пользователем, стимулирует его к определенным действиям. Пользователь легко определяет содержание страницы, номера телефонов и адреса. Но для поисковых роботов это просто набор текста, цифр и картинок, и чтобы помочь им понять смысл всего этого контента — существует микроразметка. Микроданные внедряются в код страницы при помощи HTML5 тегов или JavaScript. Именно микроразметка поможет вам произвести внутреннюю оптимизацию сайта.

На сегодняшний день существует несколько стандартов микроданных, основанных на принципах создания простых и доступных решений структурирования информации, и множество словарей, речь о которых пойдет далее. Первым разработчиком этой структуры был Ян Хиксон, всемирно известный создатель веб спецификаций, HTML5 и CSS, ныне сотрудник GoogleUSA.

Использование микроданных поисковыми системами

Лидеры среди современных поисковых систем используют микроразметку для отображения результатов поисковой выдачи, чтобы пользователи могли быстрее найти интересующие их категории страниц.
Большинство сайтов содержат динамический контент, который отображается на странице после извлечения из базы данных и форматируется в HTML, при этом первоначальная их структура может быть утеряна и некорректно восприниматься поисковой системой. Целенаправленное внедрение структурирования данных на вашей странице позитивно влияет на вид отображения вашего сайта в списке поисковой выдачи. Микроразметка позволяет поисковым движкам, таким как Google, Yandex и другие, правильно воспринимать информацию на страницах и обширнее отображать суть релевантных страниц вашего вебсайта для пользователей. Так, внедряя в формате микроразметки координаты вашего магазина, фотографии товаров, их наличие и цены, вы даете движкам возможность включения ваших страниц в вертикальную выдачу.

Виды микроданных:

1MicroDataIll

OpenGraph – покорение вершин социальных сетей

Напомним, что OpenGraph был представлен компанией Facebook в 2010 году как средство улучшения интеграции с другими веб ресурсами. Этот стандарт позволяет трансформировать ссылки на страницы вебсайтов в объекты функциональных моделей Facebook, что значительно расширило функционал этого сервиса для пользователей.
Именно данные OpenGraph влияют на то, как информация сторонних ресурсов отображается на Facebook, когда пользователи делятся ссылками. Сама микроразметка этого стандарта базируется на RDFa протоколе и внедряется в тег <head> на странице вашего сайта, но ее функционал достаточно ограничен и влияет скорее не на SEOспецифику, а на продвижение вашего ресурса в соц. сетях.

Существует несколько обязательных параметров, которые должны присутствовать для использования этого вида микроданных:
og:title – Заглавие вашей страницы
og:type – Тип объекта, в соответствии с которым будет интерпретироваться информация в социальных сетях (видео, музыка, социальный профиль, вебсайт, книга, статья)
og:image – Адрес картинки, обложки для вашего сайта или изображение товара
og:url – Адрес вашей веб-страницы

Также вы можете использовать дополнительные параметры, для карточки товара например:
og:audio – Ссылка на аудио файл, например для музыкальных игрушек.
og:description – Описание веб-страницы.
og:locale – Локализация вашей страницы в формате язык_ТЕРРИТОРИЯ. По умолчанию en_US.
og:site_name – Название вашего сайта, особенно актуально для брендовых магазинов.
og:video – Ссылка на видео, иллюстрирующее ваш контент, например обзор товара.

Для примера мы используем разметку для карточки товара, в данном случае это сумка. Как видите, мы можем определить ее описание, где поместить условия продажи, понятные пользователям, указать картинку, которая иллюстрирует товар. Если ваш товар относится к категории популярных или новых, или имеет неординарный дизайн, то внедрение этого стандарта микроразметки эффективно повысит количество репостов и лайков на ваш сайт в соц. сетях. 

<html prefix="og: http://ogp.me/ns/website#">
<head>
<title>Louis Vuitton аксессуары в Киеве</title>
<meta property="og:title" content="Сумка Louis Vuitton" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.site.com/Louis-Vuitton-Backpack" />
<meta property="og:image" content="http://www.site.com/images/Louis-Vuitton-Backpack.jpg" />
<meta property="og:site_name" content="LOUISVUITTON Shop" />
<meta property="og:description" content="Сумка Louis Vuitton с доставкой по Киеву, от 6000 грн., возможна оплата картой VISA" />
</head>
</html>

Facebook OpenGraph прекрасно справляется с функцией интеграции в социальных сетях, но не предоставляет достаточно информации для улучшения UX, так как позволяет описывать веб-страницу только как один информационный компонент, в то время как на ней может размещаться множество разных данных. Для более детального описания содержания ваших веб-страниц и их компонентов можно использовать микроразметку от schema.org. Следует упомянуть, что большинство современных словарей легко сочетаются между собой, то есть вы можете использовать несколько стандартов одновременно, например чтобы улучшить и отображение данных в поиске и в то же время повысить популярность в социальных сетях.

1MicroDataInfo

 

Schema.org – обо всем на свете

 

Schema.org была запущена год спустя после выхода OpenGraph. Несколько компаний, а именно Google, Bing и Yahoo начали разработку, с целью создания единого стандарта структурирования данных микроразметки на страницах вебсайтов. Через полгода к разработке присоединился Yandex. Этот стандарт позволяет структурировать информацию о контенте веб-страниц, которая распознается большинством ботов поисковых движков и другими парсерами. Дополнительный бонус этого стандарта — возможность создания описаний информации, которой нет на сайте, то есть добавления дополнительных параметров, которые будут влиять исключительно на поисковую выдачу. Большинство терминов этого вида разметки базируется на более ранних стандартах, таких как: Microformats, FOAF, GoodRelations and OpenCyc.

Для обозначения свойств объектов в синтаксисе используется атрибут itemprop, который может быть применен к любому тегу. Таким образом, вы можете разметить все объекты на своей странице, картинки, видео, статьи – одновременно. И даже больше, вы можете создавать мета-теги с этим атрибутом для добавления невидимой пользователям информации. Ваш дизайн остается понятным и user-friendly, а движок читает данные из мета-тегов.

Сами данные по этому стандарту могут структурироваться с использованием дополнительных свойств, которые выглядят как подкатегории, или дерево HTML тегов. Так у определенного типа объектов могут быть свойства, которые тоже являются объектами. Для отображения таких данных используется атрибут itemscope сразу после определения itemprop.

Самыми популярными типами объектов этого стандарта микроданных являются:
 Творческие работы: книга, фильм, рецепт
 Встроенные не текстовые объекты: аудио, видео, картинки
 Событие
 Организация
 Персонаж
 Место, Малый  бизнес, Ресторан
 Продукт, Предложение
 Отзыв, Рейтинг

Большинство страниц можно структурировать, используя только атрибуты itemscope, itemtype, и itemprop, но иногда для более полного отображения информации нужны дополнительные атрибуты. У стандарта schema.org есть поддержка атрибутов datetime и href, а также meta тегов с атрибутом content, для дополнения неполной информации.

Пример микроразметки schema.org для карточки все того же товара:
<div itemscopeitemtype="http://schema.org/Offer">
<span itemprop="name">Сумка LOUISVUITTON</span>
<span itemprop="price">6000</span>
<span itemprop="priceCurrency">UAH</span>
<link itemprop="availability" href="http://schema.org/InStock"/>Available today!
<meta itemprop="image" content="http://www.site.com/images/Louis-Vuitton-Backpack.jpg"/>
<meta itemprop="availableDeliveryMethod" content="Курьер"/>
<meta itemprop="eligibleRegion" content="Киев, Украина"/>
<div itemprop="acceptedPaymentMethod" itemscope itemtype="http://schema.org/CreditCard">
<span itemprop="name">VISA</span>
</div>
</div>

Как видите, этот стандарт уже более полно отражает структуру информации, позволяет указать цену, регион, условия оплаты и доставки, а параметр в наличии имеет прямое влияние на ранжирование поисковыми системами. Только следует помнить, что этот тип микроразметки не поддерживается Facebook, так что для отображения в соц. сетях вам придется добавлять дополнительное структурирование.

 

RDFa – для тех, кто не любит выбирать

 

Название этого стандарта – аббревиатура Resource Description Framework, что в переводе означает фреймворк описания ресурсов. Он был разработан для чтения и понимания ботами, а не для отображения пользователям и базируется на стандарте XML.

Основные сферы применения RDF:

 Описание характеристик товаров, таких как цена и наличие
 Отображение календаря или графика мероприятий
 Описание информации о веб-страницах, авторе, дате создания и изменениях контента
 Описание контента для ранжирования картинок
 Описание электронных библиотек

Этот стандарт поддерживается большинством популярных сервисов, включая Google, Microsoft, Yahoo, Yandex и Facebook. При помощи RDFa можно совмещать несколько видов разметки, так как этот стандарт интегрируется с schema.org и Facebook OpenGraph Protocol (OGP)
Синтаксис этого стандарта довольно похож на schema.org – необходимо указать словарь, далее атрибут типа данных typeof и атрибут property, который может содержать в своем значении параметры OpenGraph с префиксами.

Таким образом, микроразметка для уже знакомой нам карточки будет выглядеть вот так:

<div vocab=http://schema.org/typeof="Offer">
<span property="name">Сумка LOUISVUITTON</span>
<span property="price">6000</span>
<span property="priceCurrency">UAH</span>
<link property="availability" href="http://schema.org/InStock"/>Available today!
<linkproperty="image" href=http://www.site.com/images/Louis-Vuitton-Backpack.jpg />
<meta property="availableDeliveryMethod" content="Курьер"/>
<meta property="eligibleRegion" content="Киев, Украина"/>
<div property="acceptedPaymentMethod" typeof="CreditCard">
<span property="name">VISA</span>
</div>
</div>
<span prefix="ov: http://ogp.me/ns#" ><meta property="og:description" content="Сумка Louis Vuitton с доставкой по Киеву, от 6000 грн, возможна оплата картой VISA" />
<meta property="og:image " content="http://www.site.com/images/Louis-Vuitton-Backpack.jpg"/>
</span>

Мы получаем описание товара понятное как для поискового движка, так и для соц. сетей. Конечно, подобная интеграция нескольких словарей актуальнее для объектов, которые могут отдельно описываться в нескольких словарях, например — видео или персонаж. Так как класс товара Offer доступен только для schema.org, описание OpenGraph все равно приходиться внедрять в отдельном блоке. Но при помощи RDFa сделать это можно используя один общий синтаксис. Дополнительным плюсом это стандарта является поддержка всех версий HTML, в то время как microdata поддерживается только в HTML5.

В следующей нашей статье мы рассмотрим другие виды микроразметки, которые могут быть полезны для структурирования информации на сайте: Doublin Core, Data Vocabulary, FOAF, Микроформаты. Также, мы рассмотрим процесс тестирования корректности микроразметки. Следите за нашим блогом, и вы получете еще больше информации по продвижению сайта.