В свете последних тенденций продвижения, поведенческие факторы играют все больше и больше роли при ранжировании. Одним из поведенческих факторов является CTR вашего сайта в выдаче. Google rich snippets или «структурированные данные» очень сильно помогают в этом.
Сравните
Два разных сайта по одному запросу, на какой из них хочется нажать? Ответ очевиден. Помимо улучшения поведенческих факторов вы так же получите больше посетителей с органической выдачи.
И так, что нам нужно, чтобы интегрировать Расширенный сниппет для наших товарных карточек?
Во-первых, следует прочитать информацию о них на самом сайте Google.
Во-вторых вам нужно зайти через FTP на ваш сайт, зайти в папку с темой и открыть файл товарной карточки , путь до неё будет выглядеть примерно так /themes/defaut/product.tpl
Внимание: редактировать нужно в режиме UTF-8, иначе при использовании кириллицы могут быть проблемы с кодировкой.
Данный пример подходит для версии 1.4 и 1.5 на стандартной теме и большинстве покупных, на версии 1.6 инструкция не тестировалась.
Заявляем о том, что используем расширенные данные
Нам нужно найти следующий код
<div id="primary_block" class="clearfix"></div> |
и заменить на
<div id="primary_block" class="clearfix" itemscope itemtype="http://schema.org/Product"> |
Данный код заявит о том что указанный HTML-контейнер содержит в себе структурированную информацию.
Добавим название товара, картинку и описание
Для начала нам нужно название товара, которое как правило находится в контейнере h1
<h1>{$product->name|escape:'htmlall':'UTF-8'}</h1> |
и заменить на
<h1><span itemprop="name">{$product->name|escape:'htmlall':'UTF-8'}</span></h1> |
После чего переходим к добавлению краткого описания:
<div id="short_description_content" class="rte align_justify">{$product->description_short}</div> |
заменяем на
<div id="short_description_content" class="rte align_justify" itemprop="description">{$product->description_short}</div> |
Далее переходим к картинкам, находим строчку
{if $have_image} <span id="view_full_size"> <img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}" {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox_default')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}" /> |
В ней тэг img заменяем на
<img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}" {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox_default')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}" /> |
Добавление информации о производителе актуально не для всех, но для тех кому нужно:
Нам нужно добавить обернуть имя производителя тэгом:
<span itemprop="brand" itemscope itemtype="http://schema.org/Organization"> <span itemprop="name">{$product->manufacturer_name}</span></span> |
Редактируем цену
Самый не простой момент с добавлением цены, дело в том, что гугл принимает только числовые значения. В Prestashop же они идут сразу с указанием знака валюты.
Нам нужна строка:
<p class="our_price_display"> {if $priceDisplay >= 0 && $priceDisplay <= 2} <span id="our_price_display">{convertPrice price=$productPrice}</span> <!--{if $tax_enabled && ((isset($display_tax_label) && $display_tax_label == 1) OR !isset($display_tax_label))} {if $priceDisplay == 1}{l s='tax excl.'}{else}{l s='tax incl.'}{/if} {/if}--> {/if} </p> |
И в итоге должно получится,
<p class="our_price_display" itemprop="offers" itemscope itemtype="http://schema.org/Offer"> {$rightPrice = {convertPrice price=$productPrice}} {if $priceDisplay >= 0 && $priceDisplay <= 2} {if $currencyFormat == 1 || $currencyFormat == 3} <meta itemprop="priceCurrency" content="{$currency->iso_code}" /> {$currencySign} <span id="our_price_display" itemprop="price">{$rightPrice|regex_replace:"/[\\{$currencySign}]/":""}</span> {else} <span id="our_price_display" itemprop="price" content="{$productPrice}">{convertPrice price=$productPrice}</span> <meta itemprop="priceCurrency" content="{$currency->iso_code}" /> {/if} <!--{if $tax_enabled && ((isset($display_tax_label) && $display_tax_label == 1) OR !isset($display_tax_label))} {if $priceDisplay == 1}{l s='tax excl.'}{else}{l s='tax incl.'}{/if} {/if}--> {/if} </p> |
Ранее мы использовали здесь код, за счет регулярного выражения вырезющий отдельно валюту и вставляет её после цены.
{$rightPrice|regex_replace:"/[\\{$currencySign}]/":""} |
Но теперь отказались от этого в пользу атрибута
content="" |
, содержащего числовой вариант цены.
Проблема с комбинациями
Но это не решает всей проблемы, если вы используете комбинации на сайте. Дело в том что цена там динамически подставляется при загрузке страницы и изменяется при выборе комбинации. Для того, чтобы избежать этой проблемы нам нужно зайти в папку js внутри папки темы и открыть файл product.js, там нам понадобится строчка:
if (productPrice > 0) $('#our_price_display').text(formatCurrency(productPrice, currencyFormat, currencySign, currencyBlank)); else $('#our_price_display').text(formatCurrency(0, currencyFormat, currencySign, currencyBlank)); |
её нужно будет заменить на
var format_price = (productPrice ? formatCurrency(productPrice, currencyFormat, currencySign, currencyBlank) : formatCurrency(0, currencyFormat, currencySign, currencyBlank)); var re = new RegExp("\\"+currencySign, "g"); var signRemoved = format_price.replace(re, ""); $('#our_price_display').text(signRemoved); |
На этом все, стоит так же не забывать, что для каждого сайта вы можете указать Автора, ссылкой на Google Plus. Это позволит выводить картинку рядом с записью. Для этого нужно открыть файл header.tpl и до закрывающего тэга </head> вставить следующий код:
Так же не стоит забывать, что расширенные сниппеты так же могут использовать данные отзывов, по-этому если вы используете модули рейтинга или комментариев — эти данные тоже можно будет подключить.
Проверяем
После внедрения всех изменений, рекомендую проверить ваш результат на специальном сервисе от Google.
Если у вас будут ошибки, Google об этом напишет. В противном случае вы увидите следующий результат:
Спасибо больше замечательному зарубежному блогу за основу для материала.
Здравствуйте. После изменения в строке цены, выводится два раза валюта, как это исправить?
Судя по всему у Вас не вырезается валюта, проверьте все ли Вы правильно сделали.
Добрый день! У меня преста 1.6.1.4 на нестандартном шаблоне. Валидаторы поисковиков ругаются и выдают ошибки. На сколько, я знаю, стандартный шаблон престы 1.6 уже поддерживает микроразметку.
В техподдержке разработчика шаблона мне ответили, что все ОК и на валидаторы не стоит обращать внимания. На сколько верно это утверждение?
Продуктовые сниппеты у меня отображаются в индексе, как будто, без микроразметки (сайту чуть больше месяца)
Здравствуйте, Игорь. Я бы рекомендовал всё таки поправить шаблон, чтобы валидаторы не ругались. Месяц отображения без микроразметки, к сожалению, не показатель.
Добрый день. спасибо Вам за статью.
Подскажите планируется ли апдейт ее под версию Престы 1.6? потому как в 1.6 они добавили поддержку струкрурированных данных по умолчанию, да вот беда с ценой (для престы это значение + код валюты, для Гугл — строго цифры) все еще релевантна. а структура кода и переменных в 1.6 уже другая.
Заранее спасибо за ответ
Добрый день.
Можно ли в эту статью добавить настройки микроразметки по aggregateRating?
Здравствуйте, Владимир. Мы редко дописываем статьи, готовы вам помочь с этим на платной основе, либо попробуйте посмотреть стандартный модуль productcomments, в нем эта микроразметка уже может быть