Семантическая микроразметка товаров VirtueMart

Опубликовано: 19 Август, 2016
Обновлено: 18 Июнь, 2017
Категория: SEO оптимизация
Комментариев: 66

Что такое микроразметка?

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

Существует несколько словарей микроразметки. В этой статье рассмотрим 2 самых популярных:

  • Schema.org - для расширенных сниппетов в поисковой выдаче
  • Open Graph - для качественного представления сайта в соц. сетях.

Кратко о каждом формате.

Schema.org - словарь, который разрабатывают и рекомендуют использовать сами поисковые системы. Он состоит из разнообразных типов сущностей со своими наборами свойств. Мы будем использовать типы Product и Offer.

Open Graph - словарь, разработанный Facebook. Поддерживается всеми популярными социальными сетями.

JSON-LD - это формат описания контента с помощью объектов словаря связанных данных (Linked Data, LD). Используется по умолчанию в карточке товара в virtuemart версии 3.0.10 и выше. Пока не отображается в результатах поиска Яндекса.

Информации из статьи будет достаточно для внедрения микроразметки на сайт. Для глубокого изучения рекомендую эти ссылки:

Валидаторы микроразметки

Для проверки микроразметки на сайте будем использовать 2 сервиса

Валидатор от Яндекс  Валидатор от Google

Микроразметка schema.org для карточки товара

Начиная с версии virtuemart 3.0.10 микроразметка карточки товара добавлена по умолчанию. Она подключается в конце файла /components/com_virtuemart/views/productdetails/tmpl/default.php

Сам шаблон микроразметки находится в файле /components/com_virtuemart/sublayouts/snippets.php

Чтобы правильно работало округление цены в указанном файле замените

на

Используется синтаксис JSON-LD, который пока не поддерживается поиском Яндекса, поэтому лучше дополнительно добавить микроразметку schema.org.

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

snippet

В самом общем виде шаблон карточки товара от такого вида

Нужно привести к такому виду

Все изменения нужно вносить в файл /components/com_virtuemart/views/productdetails/tmpl/default.php. Чтобы после обновления virtuemart правки сохранились переопределим данный файл в папке шаблона. Для этого скопируем его в папку /templates/имя_шаблона/html/com_virtuemart/productdetails/. Если в папке уже есть файл default.php, то нужно править его.

Схема Product

Заменим

на

Наименование товара

Заменим

на

Картинка товара

В файле /components/com_virtuemart/views/productdetails/tmpl/default_images.php (или в переопределенном файле в папке с шаблоном) заменим

на

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

Схема Offer

Заменим

на

Цена товара

После кода

Вставим

Валюта товара

Под кодом разметки цены добавим

Наличие товара

После кода вывода наличия

Добавим

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

Если в качестве описания выступает подробное описание товара, то заменим

на

Если нужно разметить краткое описание, то заменим

на

После всех этих правок валидатор должен показать следующее

validator

Микроразметка Open Graph для карточки товара

Open Graph разметка позволяет управлять видом превью при публикации ссылки на страницу в социальных сетях. Для вставки разметки в шаблоне карточки товара сразу после строки

Добавим

site.ru замените на адрес вашего сайта.

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

Валидатор должен показать следующее

validator2

Микроразметка schema.org для каталога товаров

Информации по правильной разметке каталога товаров в документации Яндекса нет. В интернете также в основном пишут про разметку карточки товара. Вся информация ниже получена в результате анализа страниц категорий товаров двух сайтов - eldorado.ru и ozon.ru.

В общем виде необходимо привести страницу от такого вида

К такому виду

В virtuemart 2 все правки нужно вносить в файл /components/com_virtuemart/views/category/tmpl/default.php.

В virtuemart 3 вывод товаров на странице категории вынесен в отдельный файл /components/com_virtuemart/sublayouts/products.php. Часть правок будет в нем.

Для сокращения в инструкциях ниже (на примере vm3, для vm2 решение также подойдет) я буду указывать просто имена файлов без полного пути.

По аналогии с шаблоном карточки товара все измененные файлы нужно перенести в папку с шаблона сайта:

  • файл default.php в папку /templates/имя_шаблона/html/com_virtuemart/category/
  • файл products.php в папку /templates/имя_шаблона/html/com_virtuemart/sublayouts/products.php

Схема ItemList

В файле default.php заменим

на

Схема Product

В файле products.php заменим

на

Наименование товара

В файле products.php заменим код вывода названия товара

на

Картинка товара

В файле products.php после кода вывода картинки

добавим

Url товара

В файле products.php заменим код вывода ссылки на товар

на

Схема Offer

В файле products.php начало блока с выводом цены

заменим на

Цена товара

В файле products.php сразу после кода вывода цены

добавим

Валюта товара

В файле products.php под кодом разметки цены добавим

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

В файле products.php блок с вывод описания товара

заменим на

Валидатор должен показать следующее

validator3

Плагин Rich Snippets for VirtueMart

Rich Snippets for VirtueMart - готовое решение для внедрения микроразметки.

Скачать

Плагин автоматически добавляет нужные теги и атрибуты для микроразметки на странице товара. Кроме товаров доступна микроразметка хлебных крошек.

Настройки плагина

easy-rich-snippets

В результате валидатор покажет следующее

validator4

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

Я рекомендую добавлять микроразметку вручную.

 

66 комментариев

    teslalight.com.ua

    По микроразметке хлебных крошек советую плагин mod_microbread
    http://extensions.joomla.org/extension/microbread

      admin

      admin

      Спасибо за дополнение.

    Messir

    Messir

    Во, очень нужная и познавательная статья!!! Еще бы расписать подобное для статей (блога) и было бы просто замечательно!!!...

      admin

      admin

      Да, можно добавить еще информацию по микроразметке контактов и статей. Чуть позже дополню статью.

        Владислав

        очень жду информацию по микроразметке статей

          admin

          admin

          Постараюсь добавить в ближайшее время.

    yrygvay

    День добрый, а что-либо из статьи реализовано в Airshop?

      admin

      admin

      Здравствуйте!
      На этой недели выйдет небольшое обновление шаблона с включенной микроразметкой.

        yrygvay

        День добрый, обновление пока не выходило? верно, что крайняя 1.2?

          admin

          admin

          Обновление вышло, всем покупателям была отправлена ссылка на скачивание и инструкция по обновлению. Если Вам не пришло, то проверьте папку спама, если там нет, то напишите на admin@virtuemart.su.

    Dina

    Браво!!! давно искала такую статью. Все сделала, теперь жду обновления по статьям и контактам! Огромное спасибо автору.
    Протестировала свои товары, все отлично, выдал только 2 ошибки:
    Не удалось нормализовать значение оценки.
    Ваша оценка вне пределов диапазона по умолчанию. Необходимо указать самое высокое и самое низкое значения.
    (слева вот такое: "@type": "AggregateRating",) - это связано с тем, что ни одной оценки у товара нет?

      admin

      admin

      Рад, что статья оказалась полезной.
      Я не указывал микроразметку для рейтинга. Вы ее указали самостоятельно или она уже была в шаблоне?

    Dina

    Ух ты, как я припозднилась с ответом, не видела сообщения.
    Скорее всего была в шаблоне, потому что я ничего не добавляла, просто выполнила все рекомендации из вашей статьи.

    Dina

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

      admin

      admin

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

    Виктор

    Доброго времени. У меня не стандартная ситуация. Можете подсказать как решить или объяснить почему такие ошибки. Уже не первый сайт оформляю с разметкой по вашей статье. И всегда было всё отлично. Спасибо за то что Вы есть!.
    Но тут....
    https://yadi.sk/i/FTzZJ-Q7zvCei

    Совсем все грустно . Пишет нет имени товара но он есть.
    Определил не понятные префиксы:
    smoothMove
    adjustX
    adjustY
    tintOpacity
    zoomWidth
    softFocus

    которые вовсе и не префиксы, а часть атрибута rel

      admin

      admin

      Здравствуйте!
      Судя по сайту у Вас название товара и его изображение выводится внутри схемы Offer

      Внутри должна быть только информация о цене и наличии.
      Немного поправьте верстку. Это должно помочь.

        Виктор

        Огромное спасибо.
        Если пишет "префикс adjustX неизвестен валидатору" это исправлять или пожно проигнорировать?

    Галина

    микроразметка для карточки товара:
    не нашла в коде куда вставить разметку наличие товара и описание товара
    помогите, пжт.

    Галина

    результат моих деяний:
    product
    ОШИБКА: Не выполнено обязательное условие для продуктовых сниппетов: поле name отсутствует или пусто
    ОШИБКА: Не выполнено обязательное условие для продуктовых сниппетов: поле description отсутствует или пусто
    itemType = http://schema.org/Product
    offers
    offer
    itemType = http://schema.org/Offer
    name =
    price = ".$this-
    pricecurrency = RUB

      admin

      admin

      Удалил код карточки из комментария. Пришлите архив с файлом /templates/имя_шаблона/html/com_virtuemart/productdetails/default.php

    OriginalFeel

    отправила архив в своей тебе http://virtuemart.su/forums/topic/kak-realizovat/
    здесь не прикрепить архив

    OriginalFeel

    не получается у меня никак разметку сделать, валидаторы яши и гоши ругаются. все сделала по статье, но...
    product
    ОШИБКА: Не выполнено обязательное условие для продуктовых сниппетов: поле name отсутствует или пусто
    ОШИБКА: Не выполнено обязательное условие для продуктовых сниппетов: поле description отсутствует или пусто
    itemType = http://schema.org/Product
    offers
    offer
    itemType = http://schema.org/Offer
    name =
    description =
    price = ".$this-
    pricecurrency = RUB

      admin

      admin

      Вы правили файлы в папке шаблона /templates/имя_шаблона/html/com_virtuemart/productdetails/?

        OriginalFeel

        да.

          admin

          admin

          Пришлите ссылку на товар и архив с файлом /templates/имя_шаблона/html/com_virtuemart/productdetails/default.php

    Дмитрий

    Добрый день! Подскажите пожалуйста если сделать микроразметку то выскакивает на сайте Яндекс советник , а это означает, что 30% покупателей уходит с вашего сайта. Как можно от него избавиться, чтоб работала микроразметка. Прочитал много форумов пока нечего полезного не нашел.

      admin

      admin

      Много противоречивой информации по этой теме. Попробуйте этот сервис. Если дорого, то нужно смотреть в этой теме. Точного решения не подскажу, не внедрял на сайты.

        RaftermaN

        С вашей ссылки нашел пост, ведущий на гитхаб, проверил - работает. Надо перед /head вставить скрипт

        и нет яндекс советника)

          admin

          admin

          Пришлите ссылку на гитхаб, интересно посмотреть.

            RaftermaN

            https://github.com/SerjoPepper/kick_sovetnik

            admin

            admin

            Спасибо, что поделились.

    KSENIYA

    Добрый день, подскажите пожалуйста сделала микроразметку карточки товара, все ок, если в описание добавить таблицу, то вверху на страничке карточки товара появляется информация данной таблички
    Объем шеи, см 22-27 27-32 32-38 38-44 44-50 Размер 1 (S) 2 (M) 3 (L) 4 (XL) 5 (XXL) " />
    перепробовала много.... не пойму в чем дело ((
    если в "Микроразметка Open Graph" закомментировать эту строчку

    , тогда все ок

    https://yadi.sk/i/uljGTa0x3EhjBT

      admin

      admin

      Здравствуйте!

      Попробуйте заменить

      на

    Gloomer88

    я так понимаю все что есть в этой статье уже внедрено в новой версии?

      admin

      admin

      Да, микроразметка есть во всех шаблонах от virtuemart.su

    RaftermaN

    Для тех у кого поле name пустое или отсутствует, у Вас по разметке name попадает в div, где прописан offers, я сделал так

    где class="costavailability" - несуществует, если его не писать, то яндекс выдает ошибку что offers отсутствует. А так вроде работает, админ, правильно же?

      RaftermaN

      и естественно поле

      переделываем обратно

        RaftermaN

        почему то код не вставился, там абзац про offers из статьи, его надо переделать обратно как был изначально, чтобы offers два раза не был и не захватывал name

      admin

      admin

      Спасибо, что поделились.
      Если валидатор не выдает ошибок, значит все правильно.

    Серега

    Здравствуйте! Спасибо за статейку!
    У меня есть ошибка для каталога товаров
    ************
    microdata
    ОШИБКА: невозможно определить принадлежность данных полей. Возможны две причины: эти поля некорректно размещены, либо указан лишний атрибут itemprop
    itemType =
    itemlistelement
    ************
    Насколько она критична и как ее побороть?

      admin

      admin

      Здравствуйте!
      Судя по ошибке для блока с товаром не указаны атрибуты

      Чтобы ответить точнее пришлите ссылку на сайт.

        Серега

        Указаны... Все сделал как написано, а вообще это критично?

          Серега

          http://assolshop.com.ua/

            admin

            admin

            Не указан атрибут itemtype="http://schema.org/ItemList" itemscope для блока, в который входят все товары.
            Добавьте его.

    Серега

    Спасибо, добавление атрибута в блок решило проблему.
    Но остался еще один ньюанс , сам не могу разобраться. В карточке товара в левом верхнем углу появился фрагмент кода (если это так можно назвать)
    скрин - https://yadi.sk/d/Yxx00L5r3GCnBR

    "это" вызывает строка
    $head .= 'product->images[0]->file_url.'" />';

    И еще вопрос.
    У вас в строке
    $head = 'product->product_name.'" />';
    перед = нет точки, так должно быть?
    В принципе, с точкой или без, разницы я не заметил.

      admin

      admin

      По ошибке. Пришлите исправленный файл карточки товара defaul.php, посмотрим в чем дело.

        Серега

        А куда слать?)

          Серега

          отправил)

    KSENIYA

    доброго дня, прошу помощи-совета, не пойму что не так,
    делаю уже не первый раз микроразметку по вашему уроку, все отлично.
    в данный момент делаю все тоже самое для другого сайта, валидатор показывает что ошибок нет, но при репосте в соц сети в фесбук вообщени ничего не подтягивается кроме доменного имени, а в vk есть название товара и описание, а картинка через раз и берет ее на угад,
    разметка Open Graph есть, не пойму что не так, подскажите пожалуйста
    https://ecobirdcontrol.com/ru/kupit/vizualnye-otpugivateli-ptits/buy-vizualnyj-otpugivatel-ptits-sova

    https://yadi.sk/i/juG6frFI3GVSU7
    https://yadi.sk/i/KMBlodJg3GVSax

      admin

      admin

      Здравствуйте!

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

    Алексей

    Делаю сайт полностью на HTML. На странице будет несколько описаний товаров. Как каталог товаров. Достаточно использовать код который описан у вас в первой схеме-

      admin

      admin

      Если это вопрос, то не важно на чем сделан сайт, логика микроразметки везде одинакова.

    Александр

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

    "position

    Необходимо указать значение для поля position."

    что делать? спс)

      Александр

      почитал в инете, короче это баг валидатора гугла и не стоит на это обращать внимания, position используется только для хлебных крошек!

    Дмитрий

    А вы уверены, что расширенный сниппет у eldorado из-за микроразметки, или это яндекс маркет или яндекс "товары и цены"??? Как правило у яндекса не выводятся расширенные снипетты, только если это не их партнерская программа..

      admin

      admin

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

    Александр

    здравствуйте, а как сделать чтобы в соцсетях можно было делиться с ценой товара?

      admin

      admin

      Здравствуйте!
      Если используется блок поделиться от Яндекса, то можно попробовать использовать его api, например, для добавления цены к названию товара.
      Попробуйте в шаблон карточки товара добавить этот код

    Александр

    *после:

    Александр

    чтото не вставляется код даже с тегами php, в общем я имел ввиду после стандартного кода кнопок

    Александр

    аа я понял, а как тогда отредактировать список соцсетей?

    Александр

    разобрался подсказка в той же справке была, ненужные аргументы удалил и все норм

    Александр

    а возможно ли вместо большой картинки вставлять маленькую картинку этого же товара только брать ее из категории? а то с большой картинкой как-то оно сильно растягивает в соцсетях.. что виден только край картинки или отображение как-то можно отрегулировать?

      admin

      admin

      По этому вопросу, к сожалению, не смогу подсказать.

        Александр

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

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

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

*
Для вставки кода заключите его в теги [php] [/php]
*