пятница, 29 мая 2015 г.
Микроразметка для улучшения сниппета
Микроразметка для улучшения сниппета
Рис. 1
Рис. 2
Рис. 3
Рис. 4
Рис. 5
Использование микроразметки на сайте – это полезная практика, которая позволяет сделать его содержание более структурированным и понятным для поисковых машин. Стандарт Schema.org был введен в 2011 году гигантом поиска Google при поддержке Yahoo! и Bing и ныне учитывается, в том числе, и Яндексом. Посредством специальных тегов HTML-кода поисковые роботы получают четкое представление о характере контента ресурса, что позволяет строить более релевантную выдачу и повышать качество поиска. Сайт, в свою очередь, получает расширенный привлекательный сниппет и, следовательно, рост числа поискового трафика.
Создаем товарный сниппет
Информацию о товарах и их стоимости, представленную в карточках интернет-магазина или на страницах корпоративного сайта компании, можно транслировать в сниппет для выдачи Google и Яндекса. Чтобы сформировать такое полезное дополнение в описании ссылки, необходимо разметить соответствующие страницы ресурса при помощи стандарта Schema.org.
Привлекательность этого способа для вебмастеров состоит в том, что не нужно создавать различные типы файлов, чтобы предоставить необходимую информацию в разные поисковые машины. Все поисковые роботы понимают данный стандарт и умеют из общего содержимого сайта извлекать конкретные семантические элементы, обозначенные специальными маркерами (атрибутами и тегами).
Для формирования товарного сниппета необходимо использовать соответствующие схемы (Product, Offer, AggregateOffer) и их свойства, описанные в иерархии на сайте Schema.org (прим.: англоязычный ресурс). Следует отметить, что Яндекс учитывает далеко не весь список свойств (к примеру, нет возможности указать информацию о рейтинге продукта), поэтому товарный сниппет в данной поисковой системе выглядит более скромным, нежели в Google.
Рассмотрим пример семантической разметки для карточки товара Iphone 6 интернет-магазина Евросеть. Сниппет данной страницы в Google выглядит следующим образом (Рис.1):
 |
Заглянем в HTML-код страницы, чтобы увидеть правила, посредством которых в сниппет карточки товара транслируются его название, стоимость и рейтинг на основании отзывов покупателей. Атрибут itemscope дает указание поисковому роботу на то, что описывается определенный объект, itemtype называет тип объекта (в нашем случае – Product):
| <span itemscope itemtype="http://schema.org/Product"> |
Атрибут itemprop описывает свойства объекта, в данном примере – это название (name):
<meta content="Apple iPhone 6 16 Гб Space Grey" itemprop="name">
|
Следует подчеркнуть, что весьма кстати здесь можно было бы использовать и свойство объекта «описание» (description) с размещением ключевой информации о товаре.
Следующее правило позволяет отобразить стоимость товара в сниппете:
<span itemscope itemtype="http://schema.org/Offer" itemprop="offers">
<meta content="RUR" itemprop="priceCurrency">
<span class="sum" itemprop="price">46 990</span>
|
И, наконец, указывается тип объекта, обозначающий рейтинг на основании отзывов:
<span itemscope itemtype="http://schema.org/AggregateRating" itemprop="aggregateRating">
<meta content="5" itemprop="ratingValue">
<meta content="2/" itemprop="reviewCount">
</span>
|
В результате несложных преобразований исходного кода страницы удалось получить расширенный товарный сниппет, который визуально выделяется на странице поиска. Аналогичный пример можно привести и для выдачи Яндекса, но с тем отличием, что сниппет здесь содержит более ограниченный набор данных о товаре (Рис.2).
 |
Подробная информация о правилах синтаксиса стандарта Schema.org на русском языке и примеры построения кода представлены в справочной документации Яндекса и в оригинале (прим.: на английском языке) на официальном сайтеSchema.org.
Дополняем сниппет данными о компании
При помощи семантической разметки существует возможность добавить в сниппет информацию об адресах и организациях, в том числе передать данные о компании в Яндекс.Справочник и Граф знаний Google. Впоследствии они могут быть использованы в различных сервисах поисковых систем или в поиске для предоставления пользователям наиболее важных параметров организации. К примеру, в описание ресторана могут быть включены адрес, телефон, часы его работы и отзывы посетителей. Ниже вы можете видеть расширенный сниппет сайта стоматологии в поисковой выдаче Яндекса (Рис.3).
 |
За разметку контента страницы контактов компании отвечают схемы Organization и Place. В поисковой системе Google к тому же реализована возможность размещения логотипа или другого графического элемента, который будет отображаться, к примеру, в сети знаний (справа от результатов поиска) (Рис.4).
 |
Другие области применения
Стандарт Schema.org также очень популярен среди владельцев информационных сайтов и блогов. Неудивительно, что для движка WordPress создан ряд плагинов для автоматической генерации и встраивания микроданных в код страницы. Довольно часто в сниппете можно увидеть графические элементы (фотографии, картинки, видео) или, например, описание искомого фильма, которые привлекают внимание и невольно мотивируют пройти по предлагаемой ссылке.
Такой прием расширения сниппета применяется для следующих ресурсов:
- сайты рецептов (Recipe) (Рис.5);
 |
- сайты с видеопубликациями, видеохостинги (VideoObject);
- новостные порталы, блоги (NewsArticle, BlogPosting);
- сайты мобильных и веб-приложений (SoftwareApplication);
- сайты с каталогами фильмов, книг, рефератов и т.д. (Movie, CreativeWork);
- энциклопедические, словарные ресурсы (ScholarlyArticle);
- сайты-афиши с публикацией событий (Event).
И это лишь малая часть примеров применения семантической разметки. Количество доступных наборов классов Schema.org для описания разного рода объектов и их свойств насчитывает несколько сотен вариантов. Ведущие поисковые системы на текущий момент поддерживают не все доступные типы микроданных, однако постоянно работают над областью их расширения.
0 коммент.:
Отправить комментарий