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

Опубликовано: 19 августа, 2016

Обновлено: 5 февраля, 2023

Категория: SEO оптимизация

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

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

Существует несколько словарей микроразметки. В этой статье рассмотрим 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

if ($this->product->prices['salesPrice'] > 0) {

echo shopFunctionsF::renderVmSubLayout('snippets',array('product'=>$this->product, 'currency'=>$this->currency, 'showRating'=>$this->showRating));

}

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

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

1	$product->prices['salesPrice']

на

1	round($product->prices['salesPrice']);

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

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

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

<h1>Название товара</h1>

</a>

</div>

</div>

<div class="">В наличии</div>

<p>Краткое описание</p>

</div>

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

<h1 itemprop="name">Название товара</h1>

</a>

</div>

</div>

<div class="">В наличии</div>

</div>

<p>Краткое описание</p>

</div>

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

Схема Product

Заменим

1	<div class="productdetails-view productdetails" >

на

1	<div class="productdetails-view productdetails" itemscope itemtype="http://schema.org/Product">

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

Заменим

1	<h1><?php echo $this->product->product_name ?></h1>

на

1	<h1 itemprop="name"><?php echo $this->product->product_name ?></h1>

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

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

1	<?php echo $image->displayMediaFull("",true,"rel='vm-additional-images'"); ?>

на

1	<?php echo $image->displayMediaFull("",true,"rel='vm-additional-images' itemprop='image'"); ?>

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

1	<meta itemprop="image" content="<?php echo JURI::base().$this->product->images[0]->file_url?>"/>

Схема Offer

Заменим

1	<div class="vm-product-details-container">

на

1	<div class="vm-product-details-container" itemprop="offers" itemscope itemtype="http://schema.org/Offer">

Цена товара

После кода

1	echo shopFunctionsF::renderVmSubLayout('prices',array('product'=>$this->product,'currency'=>$this->currency));

Вставим

1	echo "<meta itemprop='price' content='".$this->product->prices['salesPrice']."'>";

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

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

1	echo "<meta itemprop='priceCurrency' content='".$this->currency->_vendorCurrency_code_3."'>";

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

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

1	echo shopFunctionsF::renderVmSubLayout('stockhandle',array('product'=>$this->product));

Добавим

if($this->product->product_in_stock > 0){

echo "<meta itemprop='availability' content='http://schema.org/InStock' />";

} else {

echo "<meta itemprop='availability' content='http://schema.org/OutOfStock' />";

}

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

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

1	<div class="product-description" >

на

1	<div class="product-description" itemprop="description">

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

1	<div class="product-short-description">

на

1	<div class="product-short-description" itemprop="description">

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

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

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

1	defined('_JEXEC') or die('Restricted access');

Добавим

$doc = JFactory::getDocument();

$head = '<meta property="og:title" content="'.$this->product->product_name.'" />';

if (!empty($this->product->product_s_desc)) {

$head .= '<meta property="og:description" content="'.htmlspecialchars(strip_tags($this->product->product_desc)).'" />';

} elseif (!empty($this->product->product_desc)) {

$head .= '<meta property="og:description" content="'.htmlspecialchars(strip_tags($this->product->product_desc)).'"/>';

}

$head .= '<meta property="og:image" content="'.JURI::base().$this->product->images[0]->file_url.'" />';

$head .= '<meta property="og:type" content="website" />';

$head .= '<meta property="og:site_name" content="site.ru"/>';

$head .= '<meta property="og:url" content="'.JFactory::getURI().'" />';

$doc->addCustomTag($head);

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

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

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

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

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

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

</a>

<h2>

<a href="/category/product.html">Название товара</a>

</h2>

<p>Краткое описание товара</p>

</div>

</div>

...

</a>

<h2>

<a href="/category/product.html">Название товара</a>

</h2>

<p>Краткое описание товара</p>

</div>

</div>

К такому виду

</a>

<a href="/category/product.html" itemprop="url">Название товара</a>

</h2>

<p>Краткое описание товара</p>

</div>

</div>

...

</a>

<a href="/category/product.html" itemprop="url">Название товара</a>

</h2>

<p>Краткое описание товара</p>

</div>

</div>

В 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 заменим

1	<div class="category-view">

на

1	<div class="category-view" itemtype="http://schema.org/ItemList" itemscope>

Схема Product

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

1	<div class="product vm-col<?php echo ' vm-col-' . $products_per_row . $show_vertical_separator ?>">

на

1	<div class="product vm-col<?php echo ' vm-col-' . $products_per_row . $show_vertical_separator ?>" itemtype="http://schema.org/Product" itemprop="itemListElement" itemscope>

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

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

1	<h2><?php echo JHtml::link ($product->link.$ItemidStr, $product->product_name); ?></h2>

на

1	<h2 itemprop="name"><?php echo JHtml::link ($product->link.$ItemidStr, $product->product_name); ?></h2>

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

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

<a title="<?php echo $product->product_name ?>" href="<?php echo $product->link.$ItemidStr; ?>">

<?php

echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);

</a>

добавим

1	<meta itemprop="image" content="<?php echo JURI::base().$product->images[0]->file_url?>"/>

Url товара

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

1	<?php echo JHtml::link ($product->link.$ItemidStr, $product->product_name); ?>

на

1	<?php echo JHtml::link ($product->link.$ItemidStr, $product->product_name,' itemprop="url"'); ?>

Схема Offer

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

1	<div class="vm3pr-<?php echo $rowsHeight[$row]['price'] ?>">

заменим на

1	<div class="vm3pr-<?php echo $rowsHeight[$row]['price'] ?>" itemtype="http://schema.org/Offer" itemprop="offers" itemscope>

Цена товара

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

1	echo shopFunctionsF::renderVmSubLayout('prices',array('product'=>$product,'currency'=>$currency));

добавим

1	echo "<meta itemprop='price' content='".$product->prices['salesPrice']."'>";

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

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

1	echo "<meta itemprop='priceCurrency' content='".$currency->_vendorCurrency_code_3."'>";

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

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

1	<p class="product_s_desc">

заменим на

1	<p class="product_s_desc" itemprop="description">

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

Плагин Rich Snippets for VirtueMart

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

Скачать

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

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

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

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

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

teslalight.com.ua

20 августа, 2016 at 10:44

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

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

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

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

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

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

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

Плагин Rich Snippets for VirtueMart

Похожие статьи :

122 комментария

teslalight.com.ua

Messir

Владислав

yrygvay

yrygvay

Dina

OriginalFeel

OriginalFeel

OriginalFeel

RaftermaN

RaftermaN

KSENIYA

Gloomer88

RaftermaN

RaftermaN

RaftermaN

Серега

Серега

Серега

Серега

Серега

Серега

KSENIYA

Александр

Александр

Дмитрий

Александр

Александр

Александр

Александр

Александр

Александр

Александр

Рий

Рий

tony1001

Елена

Александр

Aleks

djumb

Семен

Семен

Alex

swoop

Anatoliy_Spb

Anatoliy_Spb

54DA

54DA

54DA

pizzadox

pizzadox

Spiningist

Spiningist

vmven