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

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

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

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

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

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

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

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

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

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

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

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

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

Микроразметка 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

Заменим

на

Цена товара

После кода

Вставим

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

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

Если в магазине основная валюта, например, гривна, то RUB нужно заменить на UAH.

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

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

Добавим

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

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

на

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

на

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

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 под кодом разметки цены добавим

Как и в карточке товара, если в магазине основная валюта, например, гривна, то RUB нужно заменить на UAH.

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

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

заменим на

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

validator3

Плагин Rich Snippets for VirtueMart

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

Скачать

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

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

easy-rich-snippets

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

validator4

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

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

 

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

    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 неизвестен валидатору" это исправлять или пожно проигнорировать?

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

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

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