Довелось мне как-то довольно долго сопровождать крупный и интересный проект одной Питерской компании. Это интернет магазин корпоративных подарков ручной работы. Это интересный и перспективный сайт, по крайней мере был таковым. Сейчас похоже ребята не справляются с возросшей нагрузкой (после выхода на зарубежные рынки) и сайт приходит в запущенное состояние и потихоньку теряет позиции. Но сейчас не об этом.
В двух словах, о том что такое микроразметка:
…т.е. семантическая микроразметка это своего рода набор специальных общепринятых правил обозначения некоторой информации для поисковых систем.
Продолжим по сайту. Этот сайт наиболее удачный опыт применение микроразметки для интернет-магазина на 1С Битрикс. Итак какие страницы я подверг изменению:
- Главная страница (тут представлен список товаров на ближайший праздник)
- Шаблон списка товаров для bitrix.catalog.list
- Шаблон карточки товара bitrix.catalog.element
- Страница контакты
Главная страница и шаблон списка товаров
По сути на главной выводится компонент bitrix.catalog.list с тем же самым шаблоном что и в каталоге. Тут этот компонент выводит или товары на ближайший праздник или на конкретно указанный праздник в настройках компонента. Микроразметка для элемента списка товаров выглядит так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<article itemtype="http://schema.org/Product" itemscope="" id="1419" class="podarok-page3"> <h3 itemprop="name"> <a itemprop="url" href="ссылка на крточку товара" >Наименование товара</a> </h3> <div class="pix-box"> <a href="ссылка на крточку товара"> <div class="pix-box"> <!-- Place somewhere in the <body> of your page --> <div class="flexslider-tovar"> <ul class="slides"> <li> <img width="390" height="390" border="0" itemprop="image" title="Наименованеи товара" alt="Наименованеи товара" src="путь к изображению товара"> </li> </ul> </div> <!-- End flexslider-tovar --> </div> </a> </div> <div class="podarok-bottom"> <div itemprop="description">Краткое описание товара</div> <div itemtype="http://schema.org/Offer" itemscope="" itemprop="offers" class="right-side">1462 p. <div class="services addToCart"> <a href="экшн ссылка, (добавление в корзину)" rel="nofollow" class="a1"> </a> </div> </div> </div> </article> |
Здесь я использовал схемы http://schema.org/Product и http://schema.org/Offer для отражения общих сведений о
товаре и об конкретном предложени. Сейчас требования Яндекса к микроразметке немного изменились и валидатор выдаёт ошибку
для поля price, чтобы её избежать, значение цены (т.е. конкретно цыфорки) нужно вынести отдельно а валюту в международном формате (RUR, USD)
в отдельное поле itemprop=»currency». На тот момент всё и так прекрасно работало. Чтобы не портить внешний вид всякими RUR и пр. текущую
вёрстку можно оставить, а цену и валюту вывести отельным, скрыты через CSS блоком, в строгом соответствии с требованиями Яндекса.
Микроразметка карточки товара
Карточка товара тут использует возможности микроразметки почти на полную катушку. Помимо основных данных о продукте, показываем
в микроразметке разные цены на разное количество товаров, сопутствующие (похожие) товары и отзывы о текущем товаре.
Схема карточки товара выглядит так (Для удобства я разобью её на несколько частей):
Основной контейнер товара
|
1 2 3 4 |
<div itemtype="http://schema.org/Product" itemscope="" class="product-microdata"> <!-- картинки в слайдере так же имеют микроразметку, titile и alt--> <img width="545" height="545" border="0" itemprop="image" title="Наименование товара" alt="Наименование товара" src="путь к изображению"> </div> |
Блоки цен на разное количество товаров
|
1 2 3 4 |
<div class="amount-price"> от <span itemprop="eligibleQuantity">100</span> штук. <span itemprop="price">2383 руб.</span> </div> |
Т.е. поисковик чётко понимает что товар оптовый и что чем больше товара купить, тем ниже цена.
Тут так же нужно будет разделить цену и валюту по новым требованиям.
Блоки «Вам так же могут понравиться»
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<li itemtype="http://schema.org/Product" itemscope="" itemprop="isSimilarTo"> <article id="478" class="podarok-page3 pechenka "> <h3 class="pechenka-title"> <a itemprop="url" href="ссылка натовар"> <span itemprop="name">Наименование товара</span> </a> </h3> <a href="ссылка на товар"> <div class="pix-box pechenka"> <div class="flexslider-tovar pechenka"> <div class="slides"> <img width="205" height="205" border="0" itemprop="image" alt="Наименование товара" src="путь к изображению" > </div> </div> </div> </a> </article> </li> |
Обратите внимание на свойство itemprop=»isSimilarTo» оно указывает на то что текущий товар является сопутствующим для товара
описанного в родительской схеме Product
Отзывы о товаре
Конкретного товара с отзывом я не нашёл,, но применял для их описание упрощённую схему от приведённой ниже:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div itemprop="review" itemscope itemtype="http://schema.org/Review"> <span itemprop="name">Заголовок отзыва</span> - от <span itemprop="author">Автор отзыва</span>, <meta itemprop="datePublished" content="2011-03-25">Март 25, 2011 <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> <meta itemprop="worstRating" content = "1"/> <span itemprop="ratingValue">4</span>/ <span itemprop="bestRating">5</span>звёзды (оценка) </div> <span itemprop="description">Текст отзыва о товаре</span> </div> |
Страница «Контакты»
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<div itemtype="http://schema.org/Organization" itemscope=""> <span itemprop="name">Наименование</span> <table class="contact-table-class"> <tr> <td> <table width="100%" border="0" class="contact-city"> <tbody> <tr> <td> <div> <strong> В МОСКВЕ </strong> </div> </td> <td> <span itemprop="telephone">+7 (495) 215-11-34</span> <span itemprop="email">info@mail.ru</span> </td> </tr> </tbody> </table> <img width="377" height="189" border="0" src="/images/v_mosve.png"> </td> <td itemtype="http://schema.org/PostalAddress" itemscope="" itemprop="address" class="adress1" > Адрес на ЯндексКарте: <span itemprop="postalCode">115419</span>, <span itemprop="addressLocality">Москва</span>, <span itemprop="streetAddress">ул. Пушкина, д.34, стр. 3, 3 этаж, офис 312,313</span> <!-- Ниже идёт интерактивная яндекс карта --> </td> </tr> </table> </div> |
У компании есть представительства в разных городах России,для того чтобы описать эти филиалы я использовал схему Organization.
Каких мы достигли результатов?
Предыдущая версия сайта была сделана на Joomla и в погоне за сохранением проиндексированных ссылок
мы оставили прежнюю не очень ЧПУ-шную структуру URL сайта. Это привело к проблемам с индексацией новых страниц,
робот просто отказывался читать этот шлак. Первый серьёзный эффект после внедрения микроразметки мы увидели через 1,5 месяца, когда в
поиск попали сразу около 450 страниц сайта, преимущественно каталога товаров (всего на сайте было 600 страниц, 550 товаров + ~50 новостей, статичных страницек, акций и прочего), хотя до этого в индексе уже на протяжении полугода висело 120 — 150 страниц. Заметьте на момент интеграции МР компания отказалась от услуг SEO продвиженцев
и никаких усилий ни по директу, ни по наращиванию ссылочной массы сайта не предпринимала.
[sape count=2 block=1 orientation=1]
Вообще для усиления эффекта от микроразметки, должны быть соблюдены общие требования к SEO сайта + наличие, точнее сказать максимальное использование HTML 5
с его тегами header, article, nav и пр. что даст блокам информации на странице сайта дополнительный семантический вес им позволит роботу наиболее точно передать
суть и содержимое Вашего проекта.
Желаю удачи!
Спасибо большое за ваш опыт. Как раз ищу реализацию микроразметки для своего интернет-магазина на Битрикс. Буду пробовать 🙂
Пробуйте, только обязательно проверяйте микроразметку с помощью инструментов яндекса https://webmaster.yandex.ru/microtest.xml т.к. правила могут немного корректироваться, добавляться/удаляться атрибуты и пр. и яша может начать выдавать ошибки.
В настоящий момент для микроразметки есть неплохой (я надеюсь, поскольку я автор) компонент в маркете — http://marketplace.1c-bitrix.ru/solutions/coffeediz.schema/
Поддерживает 9 схем, позволяет скрытно от юзеров выводить разметку.
Есть документация, репозиторий на GitHub и багтрекер.
Ну и я, как автор, готов прислушаться к любым пожеланиям по улучшению. 😉
О крутяк! Обязательно потестим, спасибо!
Не за что.
Если будут пожелания — пишите лучше в ISSUE.
Если сами что-то решите дополнить — то по возможности хотелось бы увидить форк. Я с удовольствием проверил бы и принял бы пулл-реквест.
https://github.com/lexnekr/coffeediz.schema
Кстати, отзывы и «вам так же могут понравится» в вашем примере как самостоятельные элементы (схемы) разве корректно обрабатываются? Я при работе над рейтингами обнаружил, что рейтинг сам по себе не валидируется. Поэтому я в документации его рекомендую использовать как свойство других схем (например, товара).
По поводу отзывов, у меня может не очень удачный пример в статье, вообще я их в связке со схемами http://schema.org/Product использовал. Самостоятельно они конечно не несут никакой пользы.
Добрый день.
Подскажите — в чем разница между микроразметкой карточки товара и витриной/списком товаров?
Здравствуйте. По сути ни в чём. Просто в карточке удобно помещать дополнительные блоки так или иначе связанные с описанием этого товара. Например сопутствующие товары itemprop=»isSimilarTo» , отзывы о товаре itemprop=»review» и т.п. Вы же не станете размещать всю эту информацию в списке товара (на витрине), т.к. это введёт пользователя в заблуждение.
Да. Но сейчас этой информации недостаточно для списка товара. Требует добавления Offers, а, соответственно, и description, price и т.д. Поэтому и спрашиваю. Пробовали ли вы оформлять в целом страницу со списком товара через AggregateOffer или еще каким либо способом.
К сожалению с AggregateOffer я не сталкивался, боюсь сейчас не смогу Вам помочь. Я так понял что в микроразметке появляются новые тонкости и эта статья потихоньку устаревает. )) Займусь написанием новой.
Сори. Ошибся. Это для похожих товаром и товаров, продающихся с данным.
Получается, что сейчас для любой схемы Product требуется name, description и offer.
Было бы не плохо еще сказать где вы это прописывали в каких местах
В шаблоне комплексного компонента bitrix:catalog, точнее в шаблонах простых компонентов (catalog.section, catalog.element и пр. ) входящих в состав комплексного. Шаблон КК естественно нужно вначале скопировать в папку с текущим шаблоном сайта (в системные шаблоны писать ничего не надо). =)