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



В двух словах, о том что такое микроразметка:

…т.е. семантическая микроразметка это своего рода набор специальных общепринятых правил обозначения некоторой информации для поисковых систем.

Продолжим по сайту. Этот сайт наиболее удачный опыт применение микроразметки для интернет-магазина на 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<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">
            <h4 itemprop="description">Посылка, словно дошедшая до нас из советских времен.</h4>
            <div
                itemtype="http://schema.org/Offer"
                itemscope=""
                itemprop="offers"
                class="right-side">
                <p itemprop="price">1462 p.</p>
                <div class="services addToCart">
                    <a href="экшн ссылка, (добавление в корзину)" rel="nofollow" class="a1">&nbsp;</a>
                </div>
            </div>
 
        </div>
</article>

Здесь я использовал схемы http://schema.org/Product и http://schema.org/Offer для отражения общих сведений о товаре и об конкретном предложени. Сейчас требования Яндекса к микроразметке немного изменились и валидатор выдаёт ошибку для поля price, чтобы её избежать, значение цены (т.е. конкретно цыфорки) нужно вынести отдельно а валюту в международном формате (RUR, USD) в отдельное поле itemprop=»currency». На тот момент всё и так прекрасно работало. Чтобы не портить внешний вид всякими RUR и пр. текущую вёрстку можно оставить, а цену и валюту вывести отельным, скрыты через CSS блоком, в строгом соответствии с требованиями Яндекса.

Микроразметка карточки товара

Карточка товара тут использует возможности микроразметки почти на полную катушку. Помимо основных данных о продукте, показываем в микроразметке разные цены на разное количество товаров, сопутствующие (похожие) товары и отзывы о текущем товаре. Схема карточки товара выглядит так (Для удобства я разобью её на несколько частей):

Основной контейнер товара

?
1
2
3
4
5
<div itemtype="http://schema.org/Product" itemscope="" class="product-microdata">
...<!-- картинки в слайдере так же имеют микроразметку, titile и alt-->
<img width="545" height="545" border="0" itemprop="image" title="38 попугаев" alt="38 попугаев" src="/upload/resize_cache/iblock/ff6/552_545_1/ff6e835a85253c13ab0f1c76190dbd7c.jpg">
...
</div>

Блоки цен на разное количество товаров

?
1
2
3
4
5
6
<div class="amount-price">
    <p itemtype="http://schema.org/Offer" itemscope="" itemprop="offers">
                        от&nbsp;<span itemprop="eligibleQuantity">100</span>&nbsp;штук.<br>
        <span itemprop="price">2383 руб.</span>
    </p>
</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" title="Привет из СССР" alt="Привет из СССР" src="путь к изображению" >
                        </div>
                </div>
            </div>
        </a>
    </article>
</li>
Обратите внимание на свойство itemprop=»isSimilarTo» оно указывает на то что текущий товар является сопутствующим для товара описанного в родительской схеме Product

Отзывы о товаре

Конкретного товара с отзывом я не нашёл,, но применял для их описание упрощённую схему от приведённой ниже:
?
1
2
3
4
5
6
7
8
9
10
11
12
<div itemprop="review" itemscope itemtype="http://schema.org/Review">
   <span itemprop="name">Value purchase</span> -
   by <span itemprop="author">Lucas</span>,
   <meta itemprop="datePublished" content="2011-03-25">March 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>stars
   </div>
   <span itemprop="description">Great microwave for the price. It is small and
   fits in my apartment.</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 border="0" style="width: 750px;">
    <tr>
    <td>
        <table width="100%" border="0" class="contact-city">
          <tbody>
            <tr> <td>
                <div>
                  <p class="city"><strong> В МОСКВЕ </strong></p>
                 </div>
               </td> <td>
                <p class="phone1"><span itemprop="telephone">+7 (495) 215-11-34</span>
                  <br>
                <span itemprop="email">info@mail.ru</span></p>
               </td> </tr>
           </tbody>
         </table>
 
        <p class="phone1"><img width="377" height="189" border="0" src="/images/v_mosve.png"> </p>
    </td>
    <td itemtype="http://schema.org/PostalAddress" itemscope="" itemprop="address" class="adress1" >
        <p>Адрес на ЯндексКарте:
            <br>
            <span itemprop="postalCode">115419</span>,
            <span itemprop="addressLocality">Москва</span>,
            <span itemprop="streetAddress">ул. Пушкина, д.34, стр. 3, 3 этаж, офис 312,313</span>
        </p>
 
        <!-- Ниже идёт интерактивная яндекс карта -->
    </td>
    </tr>
</table>
У компании есть представительства в разных городах России,
для того чтобы описатьэти филиалы я использовал схему Organization.

Каких мы достигли результатов?

Предыдущая версия сайта была сделана на Joomla и в погоне за сохранением проиндексированных ссылок
мы оставили прежнюю не очень ЧПУ-шную структуру URL сайта. Это привело к проблемам с индексацией новых страниц,
робюот просто отказывался читать этот шлак. Первый серьёзный эффект после внедрения микроразметки мы увидели через 1,5 месяца, когда в
поиск попали сразу около 450 страниц сайта, преимущественно каталога товаров (всего на сайте было 600 страниц, 550 товаров + ~50 новостей, статичных страницек, акций и прочего),
хотя до этого в индексе уже на протяжении полугода висело 120 — 150 страниц. Заметьте на момент интеграции МР компания отказалась от услуг SEO продвиженцев
и никаких усилий ни по директу, ни по наращиванию ссылочной массы сайта не предпринимала.
Вообще для уселенгия эффекта от микроразметки, должны быть соблюдены общие требования к SEO сайта + наличие, точнее сказать максимальное использование HTML 5
с его тегами header, article, nav и пр. что даст блокам информации на странице сайта дополнительный семантический вес им позволит роботу наиболее точно передать
суть и содержимое Вашего проекта.
Желаю удачи!