Микроразметка интернет магазина

Микроразметка интернет магазина

Микроразметка для интернет-магазина — как сделать?

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

Микроразметка — это стандарт семантической разметки данных на сайте. Весьма сложное определение, которое многие не поймут и не оценят. Говоря проще, это специальные идентификаторы, которые добавляются в исходный код сайта и указывают на определенные элементы. Они позволяют структурировать данные, сделать их более понятными для поисковых систем и других сервисов, которые анализируют содержание сайта.

К примеру, в тег html можно запихнуть что угодно. В тот же тег абзаца «p» можно добавить текст, соответствующий контактам организации, рецепту, содержанию статьи, цене товара и так далее. Микроразметка же позволяет получить совершенно точную информацию.

Данный, полученные поисковыми системами из микроразметки сайта, в дальнейшем могут использоваться сервисами поисковых систем. К примеру, в описании сайта в результатах Яндекс Поиска (расширенный сниппет). Вот так он выглядит для интернет-ресурсов, которые используют микроразметку для рецептов.

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

На данный момент Яндекс поддерживает 14 схем микроразметки. Подробнее о них можно прочитать на сервисе Яндекс Помощь.

Нам же, для интернет-магазина, будут интересны две из них: «адреса и организации» и «товары и цены».

1. Адреса и организации.

Адрес организации обычно присутствует в шапке, подвале и на отдельной странице интернет-магазина (контакты). Я бы посоветовал бы добавить элементы микроразметки во все места. На том же OpenCart сделать это совсем нетрудно, достаточно подкорректировать несколько файлов шаблона.

Как должен выглядеть код, отвечающий за контактные данные организации.

Подробное описание каждого элемента можно найти , но в принце, легко все сделать по аналогии. Просто подставляете свои данные, какие есть. Нет факса? Просто удаляете эту строчку. Главное, что структурированные данные обязательно должны быть в div’е с атрибутами itemscope itemtype=»http://schema.org/Organization».

2. Товары и цены.

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

Пример кода:

<div itemscope itemtype=»http://schema.org/Product»> <div itemprop=»name»><h1>Белое вечернее платье</h1></div> <a itemprop=»image» href=»products_pictures/large_krovat-mellisa-smyagkoispink.jpg»> <img src=»products_pictures/beloe-vechernee-plate.jpg» title=»Белое вечернее платье»> </a> <div itemprop=»offers» itemscope itemtype=»http://schema.org/Offer»> <div>15 150 руб.</div> <meta itemprop=»price» content=»15150.00″> <meta itemprop=»priceCurrency» content=»RUB»> <div>В наличии</div> <link itemprop=»availability» href=»http://schema.org/InStock»> </div> <div itemprop=»description»>Шикарное белое вечернее платье. Есть в наличии в нашем интернет-магазине. Доставка с примеркой осуществляется по всей России.</div> </div>

Подробное описание каждого элемента можно найти в , но как и в прошлый раз вполне можно действовать по наитию. Достаточно открыть шаблон, отвечающий за карточку товара, и к htmlтегам (div, img, a) добавить нужные элементы разметки. Мета данные price (цена) и priceCurrency (валюта) на сайте не выводятся.

3. Хлебные крошки.

Третью схему мы возьмем уже для Гугла — это микроразметка хлебных крошек. Яндекс эту схему не понимает, во всяком случае пока.

Образец кода:

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

Разметка хлебных крошек

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

Данная разметка поможет повысить CTR сайта в выдаче поисковой системы Google, так как такие хлебные крошки смотрятся значительно привлекательнее чем просто url-адрес страницы.

Поисковая система Яндекс учитывает данную разметку, но использует собственные алгоритмы по формированию хлебных крошек в сниппете.

Реализация

Для удобства восприятия информации мы будем везде размечать страницы сайта https://plitka-ot-zavoda.ru/. Там всё это уже реализовано, так что вы можете зайти и посмотреть как это сделано, если возникнут вопросы.

На всех страницах сайта, где есть хлебные крошки, необходимо внедрить разметку, исходя из примера для страницы https://plitka-ot-zavoda.ru/kollektsii-kerama-marazzi/italyanskaya-kollektsiya

Внедрить его нужно на всех страницах сайта в любое удобное место. При корректном размещение в сервисе проверки разметки мы увидим следующее:

Рекомендации

Из расширенных результатов поиска пользователь может получить полезные сведения о товаре (такие как цена, наличие и отзывы). В отношении разметки действуют следующие правила:

  • Размечать следует не категорию или список, а каждый товар в отдельности (например, каждую модель телефона в списке «Наш ассортимент»). Советуем также ознакомиться с нашими правилами в отношении нескольких элементов на одной странице.
  • Нельзя размечать сведения о товарах, предназначенных только для взрослых.
  • В качестве автора отзыва должен быть указан реальный человек или команда, например «Антон Иванов» или «Обозреватели CNET». Имена вроде «Скидка 50 % в третью пятницу месяца» использовать нельзя.

Если вы хотите, чтобы информация о товаре появилась в Google Картинках, разметка должна соответствовать следующим требованиям:

  • Чтобы пользователи видели нужные сведения в обозревателе изображений с расширенными функциями, добавьте свойства name, image, price и priceCurrency.
  • Чтобы пользователи видели нужные сведения в разделе «Сопутствующие товары», укажите свойства name, image, price, priceCurrency и availability.

Определения типов структурированных данных

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

AggregateOffer

Полное описание типа AggregateOffer приведено на странице schema.org/AggregateOffer. AggregateOffer – тип Offer, который представляет собой сравнение нескольких предложений. В разметке AggregateOffer нужно использовать перечисленные ниже свойства.

Обязательные свойства
lowPrice

Самая низкая цена среди всех доступных предложений. Используйте число с плавающей точкой.

priceCurrency

Валюта, в которой указана цена товара. Используйте трехбуквенный формат ISO 4217.

Рекомендуемые свойства
highPrice

Самая высокая цена среди всех доступных предложений. Используйте число с плавающей точкой.

offerCount

Общее количество продавцов, предлагающих этот товар.

Offer

Полное описание типа Offer приведено на странице schema.org/Offer. В разметке Offer нужно использовать перечисленные ниже свойства.

Обязательные свойства
availability

Значение берется из ограниченного списка параметров, выраженных в разметке с помощью URL. Кроме того, Google распознает их короткие названия (например, InStock или OutOfStock). Это свойство является обязательным для раздела «Сопутствующие товары» в Google Картинках и рекомендуемым для Google Поиска.

price

Цена товара. Следуйте инструкциям schema.org.

priceCurrency

Валюта, в которой указана цена товара. Используйте трехбуквенный формат ISO 4217.

Рекомендуемые свойства
itemOffered

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

priceValidUntil

Дата (в формате ISO 8601), после которой цена перестанет действовать. Сведения о товаре могут не появляться, если в свойстве priceValidUtil указана дата, которая уже прошла.

url

URL веб-страницы товара с элементом Offer.

Product

Полное описание типа Product приведено на странице schema.org/Product. В разметке Product нужно использовать перечисленные ниже свойства.

Обязательные свойства
image

Повторяющееся поле ImageObject или URL

URL фотографии товара. Желательно, чтобы товар был максимально четко виден на снимке (например, за счет использования белого фона). Это свойство является обязательным для Google Картинок и рекомендуемым для Google Поиска.

Дополнительные рекомендации для изображений:

  • На каждой странице (с разметкой или без нее) должно присутствовать хотя бы одно изображение. Робот Googlebot выберет лучшее изображение для показа в результатах поиска с учетом соотношения сторон и разрешения.
  • URL изображений должны быть доступны для сканирования и индексирования.
  • Изображения должны соответствовать размеченному контенту.
  • Допустимые форматы изображений: JPG, PNG и GIF.
  • Предоставьте несколько изображений в высоком разрешении (не менее 50 000 пикселей по произведению ширины и высоты) и со следующим соотношением сторон: 16 × 9, 4 × 3 и 1 × 1.

Пример:

«image»:

name

Название товара.

Рекомендуемые свойства
aggregateRating

Вложенный элемент aggregateRating для товара.

brand

Марка товара.

description

Описание товара.

offers

Условия продажи товара. Включает вложенный элемент Offer или AggregateOffer.

review

Вложенный элемент Review для товара. Следуйте этим рекомендациям и ознакомьтесь со списком обязательных и рекомендуемых свойств отзыва.

sku | gtin8 | gtin13 | gtin14 | mpn

Различные свойства, которые используются для идентификации. Они описаны на странице schema.org/Product. Google рекомендует указывать для каждого товара бренд и хотя бы один идентификатор.

В этой статье расскажем, как правильно сделать разметку товаров, чтобы поисковые системы представили их в наиболее выгодном свете.

Как сделать микроразметку товаров

Существует несколько способов микроразметки. Мы будем рассматривать самый распространенный – schema.org. Этот формат понимают все поисковые системы.

Микроразметка карточки товаров

Приведем сначала пример того, как выглядит карточка без разметки. Для простоты понимания здесь убраны лишние детали, которые никак не затрагиваются разметкой.

1 2 3 4 5 6 <h1>Помогатор Helpme 5.7 Pro</h1> <img src=»/help57.png» itemprop=»image»> <div>17 257 руб</div> <div>Помогатор Helpme 5.7 Pro поддерживает 777 видов помощи, в том числе 111 совершенно новых видов, которых не было в предыдущей модели Helpme 5.6.93 Pro.</div> <div>Производитель: FixiikiLtd</div> <div>Артикул: FixiikiLtdHelpme57Pro</div>

Та же самая карточка, но уже с разметкой.

1 2 3 4 5 6 7 8 9 10 11 12 <div itemscope itemtype=»http://schema.org/Product»> <h1 itemprop=»name»> Помогатор Helpme 5.7 Pro</h1> <img src=»/ help57.png» itemprop=»image»> <div itemprop=»offers» itemscope itemtype=»http://schema.org/Offer»> <div>17 257 руб</div> <meta itemprop=»price» content=»17257.00″> <meta itemprop=»priceCurrency» content=»RUB»> </div> <div itemprop=»description»> Помогатор Helpme 5.7 Pro поддерживает 777 видов помощи, в том числе 111 совершенно новых видов, которых не было в предыдущей модели Helpme 5.6.93 Pro. </div> <div>Производитель: <span itemprop=»brand»> FixiikiLtd</span></div> <div>Артикул: <span itemprop=»model»>FixiikiLtdHelpme57Pro</span></div> </div>

В первой строке объявляется использование словаря schema.org, тип разметки – Product. В общем теге Product находится тег типа Offer. Он описывает величину цены и используемую валюту.

Для передачи поисковику полной информации о продукте использованы следующие параметры:

  • name – наименование (параметр обязательный);
  • image – рисунок;
  • price – цена (обязательный);
  • priceCurrency – валюта;
  • description – более подробное описание;
  • brand – производитель, бренд;
  • model – артикул модели.

Существует много других дополнительных параметров. Вот некоторые из них:

  • seller – наименование продавца (обычно применяется в тех интернет-магазинах, где товар предоставляют разные продавцы);
  • availableDeliveryMethod – способы доставки;
  • priceSpecification – цены продукта, налогов и доставки;
  • availability – доступность продукта.

Формат применения последнего параметра следующий.

1 2 3 <div>В наличии</div> <link itemprop=»availability» href=»http://schema.org/InStock»> </div>

Также имеются отдельные атрибуты для маркировки отзывов и рейтингов товаров. Их мы разберем ниже.

Микроразметка рейтинга товаров

Вот как выглядит микроразметка рейтинга товара там, где есть звездочки.

Здесь все понятно.

А вот как размечается рейтинг при оценке пользователя.

Здесь используются следующие атрибуты:

  • worstRating – минимально возможная оценка рейтинга товара;
  • ratingValue – оценка продукта пользователем;
  • bestRating – максимально возможная оценка.

Вот как блок этого рейтинга выглядит внутри отзыва.

Здесь тоже все понятно из контекста.

Микроразметка категории товаров

Формально разметки для категории не существует. Здесь применяют адаптированную разметку карточки продукта.

Новыми здесь являются следующие параметры:

  • offerCount – общее количество продуктов в разделе;
  • lowPrice – самая низкая стоимость в категории;
  • highPrice – самая высокая цена в категории.

Вкратце о микроразметке товаров

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

Когда мы говорим о микроразметке товаров, то имеем ввиду «вспомогательный текст», который помогает поисковой системе распознать название товара, стоимость, краткое описание, цену, изображение, а также ряд других параметров.

В данный момент микроразметку поддерживают практически все популярные поисковые системы, в том числе Яндекс и Google.

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

Размечаем при помощи schema.org

Существует несколько общепринятых форматов (правил) микроразметки. Самый популярный — schema.org. О нем и поговорим.

Разметка товара начинается с контейнера, который представляет из себя слой с определенным атрибутом. В нашем случае это http://schema.org/Product, так как мы размечаем не что иное, как продукт.

<div itemscope itemtype=»http://schema.org/Product»></span> </div>

Внутри данного контейнера будут появляться сущности, которые соответствуют определенным параметрам товара, к примеру, цене или описанию.

<span itemprop=»price»>7 899</span> <span itemprop=»description»>Пиджак Burton Menswear London выполнен из тонкого текстиля, гладкая подкладка. Детали: приталенный крой, застежка на пуговицы, боковые и нагрудный карманы, поролоновые подплечники.</span>

Внутри основного контейнера могут располагаться вложенные, соответствующие определенной группе сущностей. К примеру, http://schema.org/Offer или предложение товара, который будет включать цену, валюту или продавца.

<div itemscope itemtype=»http://schema.org/Product»> <div itemprop=»offers» itemscope itemtype=»http://schema.org/Offer»> </div> </div>

Несмотря на то, что schema.org имеет достаточно простой синтаксис и понятную структуру, иногда появляются ошибки. Проверить их можно при помощи валидатора микроразметки. Это доступный всем бесплатный сервис, который предоставляют сами поисковые системы. От Яндекса — https://webmaster.yandex.ru/tools/microtest/, от Google — https://search.google.com/structured-data/testing-tool?hl=ru;

Микроразметка карточки товара

Теперь приступим к микроразметке конкретной карточки товара. Будем сразу разбирать на примере. Предположим, что у нас имеется вот такая страница с товаром:

Открываем ее исходный код и видим следующее:

(На примере мы сократили код верстки до минимума, чтобы визуально было проще воспринимать разметку).

<h1>Burton Menswear London</h1> <img src=»/photo.jpg» itemprop=»image»> <div>7 899 руб</div> <div>Пиджак Burton Menswear London выполнен из тонкого текстиля, гладкая подкладка. Детали: приталенный крой, застежка на пуговицы, боковые и нагрудный карманы, поролоновые подплечники.</div> <div>Производитель: Burton</div> <div>Модель BU014EMTSC27</div>

Сразу разметим эту карточку по правилам schema.org. Вот, что у нас получилось:

<div itemscope itemtype=»http://schema.org/Product»> <h1 itemprop=»name»>Burton Menswear London</h1> <img src=»/photo.jpg» itemprop=»image»> <div itemprop=»offers» itemscope itemtype=»http://schema.org/Offer»> <div>7 899 руб</div> <meta itemprop=»price» content=»7 899.00″> <meta itemprop=»priceCurrency» content=»RUB»> </div> <div itemprop=»description»>Пиджак Burton Menswear London выполнен из тонкого текстиля, гладкая подкладка. Детали: приталенный крой, застежка на пуговицы, боковые и нагрудный карманы, поролоновые подплечники.</div> <div>Производитель: <span itemprop=»brand»>Burton</span></div> <div>Модель: <span itemprop=»model»>BU014EMTSC27</span></div> </div>

То есть, зная синтаксис schema.org, мы просто разметили (выделили) нужные нам текстовые блоки в карточке товара. Это и есть микроразметка товара — ничего сложного.

Для того, чтобы убедиться в корректности сделанного, проверим ее при помощи валидатора Яндекса. Обратите внимание, что валидатор микроразметки в силах проверить только синтаксис, наличие обязательных полей и пересечения с другими видами разметки. Он не сможет распознать семантические ошибки, поэтому, будьте предельно внимательны и проверяйте каждую строчку.

Ошибок нет, все сделано корректно. Настало время разобрать каждую сущность в отдельности.

Контейнеры — задаем формат разметки

Микроразметка товара заключается в так называемый контейнер, который определяет тип схемы. В нашем случае это Product. Такой формат позволяет понять роботу, что все содержимое внутри данного блока размечено при помощи schema.org и соответствует типу Product.

<div itemscope itemtype=»http://schema.org/Product»> Тут находится размеченный код товара. </div>

Внутри основного контейнера Product находится вложенный — Offer. Видя данный блок индексирующий робот понимает, что внутри находится конкретное предложение, в том числе, цена товара и валюта.

<div itemprop=»offers» itemscope itemtype=»http://schema.org/Offer»> Тут находится размеченное ценовое предложение. </div>

Название «name»

itemprop=»name» — атрибут описывающий текстовое поле содержащее название конкретного товара. Указывается в контейнере Product. Является обязательным элементом при разметке.

Синтаксис: itemprop=»name»

Пример использования:

<h1 itemprop=»name»>Burton Menswear London</h1> <span itemprop=»name»>Burton Menswear London</span>

Цена «price»

itemprop=»price» — атрибут описывающий стоимость товара. Может быть представлен только в виде числа. Является обязательным элементом.

Синтаксис: itemprop=»price»

Пример использования:

<span itemprop=»price»>7 899.00</span> <meta itemprop=»price» content=»7 899.00″>

Валюта «priceCurrency»

itemprop=»priceCurrency» — атрибут описывающий валюту в которой указана стоимость. Является обязательным для заполнения.

Для каждой из существующих официальных валют стандартом Currency codes — ISO 4217 присвоено буквенное обозначение. К примеру, российский рубль — RUB, а американский доллар — USD. Если Вы не знаете нужное обозначение, то можете скачать полный список кодов.

Синтаксис: RUB;

В том случае, если отображение валюты на сайте в подобном виде не приемлемо, возможно использовать данный атрибут для тега ;.

Пример использования:

<span itemprop=»priceCurrency»>RUB</span> <meta itemprop=»priceCurrency» content=»RUB»>

Бренд «brand»

itemprop=»brand» — атрибут описывающий текстовое поле содержащее название фирмы производителя, бренда. Не нужно путать с наименованием товара. Не является обязательным для заполнения.

Синтаксис: itemprop=»brand»

Пример использования:

<span itemprop=»brand»>Burton</span>

Модель «model»

itemprop=»model» — атрибут описывающий текстовое поле, которое содержит модель изделия. Это может быть номер, вид или модификация. Для заполнения не обязательно.

Синтаксис: itemprop=»model»

Пример использования:

<span itemprop=»model»>BU014EMTSC27</span>

Изображение «image»

itemprop=»image» — атрибут, который указывает, что имеющееся изображение является фотографией товара. Прописывается только для тега «img».

Синтаксис: itemprop=»image»

Пример использования:

<img src=»/photo.jpg» itemprop=»image»>

Описание «description»

itemprop=»description» — атрибут задающийся для текстового блока содержащего описание товара. Не является обязательным.

Синтаксис: itemprop=»description»

Пример использования:

<div itemprop=»description»>Пиджак Burton Menswear London выполнен из тонкого текстиля, гладкая подкладка. Детали: приталенный крой, застежка на пуговицы, боковые и нагрудный карманы, поролоновые подплечники.</div>

Продавец товара «seller»

itemprop=»seller» — атрибут, который задается для текстового поля, содержащего название продавца. Не является обязательным. В нашем примере продавец не указан, поэтому данного атрибута нету, однако он достаточно популярен среди Интернет-магазинов.


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

Ваш e-mail не будет опубликован. Обязательные поля помечены *