Блог

HOSTCMS v.6. Правильная семантическая микроразметка

Не будем углубляться в терминологию и описание того, что означает микроразметка, т.к. об этом уже много чего написано и я беру за аксиому, что вы об этом уже знаете, раз читаете данную статью. Задача статьи описать более конкретный случай, а именно - использование микроразметки в XSL шаблонах HostCMS. 

Но для тех, кто только пытается понять, что такое микроразметка и с чем ее едят, вот краткое понятие:

Микроразметка — это разметка веб-страниц сайта или блога с использованием специальных тегов и атрибутов.

Теперь перейдем к теме статьи. Начнем с микроразметки для хлебных крошек в карточке товара.

Микроразметка Хлебных крошек

Чтобы ваш сайт был более понятен поисковым роботам, вы должны стараться дать им больше информации о его структуре, сделать индексацию ресурса более легкой. Хлебные крошки, как раз, являются элементом навигации по сайту и их очень любит поисковик Google.

В последних дистрибутивах HostCMS микроразметка в хлебных крошках присутствует, конечно если вы используете адаптивный шаблон, либо можете от туда скопировать. Для обладателей же необновленных версий ниже привожу код хлебных крошек с микроразметкой. Код вставляется в XSL-шаблон "МагазинТовар" вместо того, который у вас уже есть. Если нет, то разместить код перед или после заголовка товара, в зависимости от вашего дизайна. 

<xsl:variable name="group" select="/shop/ТекущаяГруппа"/>
<!-- Хлебные крошки -->
<div itemscope="" itemtype="http://schema.org/BreadcrumbList" class="breadcrumbs">
<span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<a rel="nofollow" itemprop="item" title="Главная" href="/">
<span itemprop="name">Главная</span>
</a>
</span>
<i class="fa fa-angle-right"></i>
<xsl:apply-templates select="/shop//shop_group[@id=$group]" mode="breadCrumbs"/>
<!-- Если модификация, выводим в пути родительский товар -->
<xsl:if test="shop_item/node()">
<i class="fa fa-angle-right"></i>
<span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<a title="{shop_item/name}" href="{shop_item/url}" itemprop="item">
<xsl:value-of disable-output-escaping="yes" select="shop_item/name"/>
</a>
</span>
</xsl:if>
<i class="fa fa-angle-right"></i>
<span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<a title="{shop_item/name}" href="{url}" itemprop="item">
<xsl:value-of disable-output-escaping="yes" select="name"/>
</a>
</span>
</div>

В самом низу шаблона размещаем код вывода ссылок на группы

<!-- Шаблон выводит рекурсивно ссылки на группы магазина -->
<xsl:template match="shop_group" mode="breadCrumbs">
<xsl:param name="parent_id" select="parent_id"/>
<!-- Получаем ID родительской группы и записываем в переменную $group -->
<xsl:param name="group" select="/shop/shop_group"/>
<xsl:apply-templates select="//shop_group[@id=$parent_id]" mode="breadCrumbs"/>
<xsl:if test="parent_id=0">
<span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<a title="{/shop/name}" href="{/shop/url}" itemprop="item">
<xsl:value-of select="/shop/name"/>
</a>
</span>
</xsl:if>
<i class="fa fa-angle-right"></i>
<span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<a title="{name}" href="{url}" itemprop="item">
<xsl:value-of disable-output-escaping="yes" select="name"/>
</a>
</span>
</xsl:template>

На этом с хлебными крошками заканчиваем и идем далее - к разметке самого товара.

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

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

Для микроразметки используем стандарт Schema.org, объявленный в 2011г. поисковыми системами Google, Bing и Yahoo. Приведенный ниже код может не соответствовать вашему дизайну расположения элементов, он лишь поясняет, как применять микроразметку. 

<div itemscope="itemscope" itemtype="http://schema.org/Product">
 <!-- Название товара -->
  <h1><span itemprop="name"><xsl:value-of disable-output-escaping="yes" select="name"/></span></h1>

 <!-- Изображение для товара, если есть -->
  <xsl:if test="image_small != ''">
  <div id="gallery" class="photo">
  <a href="{dir}{image_large}" ><img src="{dir}{image_small}" alt="" itemprop="image"/></a>
  </div>
 <ul class="margin-top-10">
  <li><a href="{dir}{image_large}"><img src="{dir}{image_small}" alt=""  height="100"/></a></li>
  <xsl:for-each select="property_value[tag_name='xml_foto'][file !='']">
  <li><a href="{../dir}{file}"><img src="{../dir}{file_small}" height="100" itemprop="image"/></a></li>
  </xsl:for-each>
  </ul>
  </xsl:if>

 <!-- Цена товара -->
  <xsl:if test="price != 0">
  <div class="price" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
  <span itemprop="price" content="{price}"><xsl:value-of select="format-number(price, '### ##0', 'my')"/></span><xsl:text> </xsl:text>
  <span itemprop="priceCurrency" content="RUB"><xsl:value-of select="currency"/></span>
 <!-- Если цена со скидкой - выводим ее -->
  <xsl:if test="discount != 0">
  <p class="item-old-price">
  <xsl:value-of select="format-number(price + discount, '### ##0', 'my')"/><xsl:text> </xsl:text><xsl:value-of select="currency" />
  </p>
  </xsl:if>
  </div>
  </xsl:if>

 <!-- Описание товара -->
  <xsl:if test="description != ''">
  <div itemprop="description"><xsl:value-of disable-output-escaping="yes" select="description" /></div>
  </xsl:if>
 </div>

Обратите внимание на элементы микроразметки:

itemscope="itemscope" itemtype="http://schema.org/Product" - объявляем схему микроразметки
itemprop="name" - микроразметка для названия товара
itemprop="image" - микроразметка для изображения товара
itemprop="offers" itemscope="" itemtype="http://schema.org/Offer" - микроразметка для блока с ценой и валютой
itemprop="price" content="{price}" - микроразметка для цены
itemprop="priceCurrency" content="RUB" - микроразметка для валюты
itemprop="description" - микроразметка описания товара

Хочу также обратить внимание на то, что в XSLT нельзя использовать атрибуты без кавычек, т.е. дожно быть, например,  itemprop="itemprop", а не просто itemprop.

Переходим к последнему блоку микроразметки - разметка контактов

Микроразметка страницы контактов

Для микроразметки также используем стандарт Schema.org. Вначале объявляем схему микроразметки:

itemscope="itemscore" itemtype="http://schema.org/Organization"

Далее размечаем название компании, адрес, телефон и e-mail. Подробно расписывать не буду, т.к. и так все понятно. Код можете взять, как шаблон, заменив на свои данные.

<div class="vcard" itemscope="itemscore" itemtype="http://schema.org/Organization">
<div>ООО <span class="fn org">"Ночной Экспресс"</span></div>
<div class="adr"><strong><span class="type">Адрес</span>:</strong> <span class="postal-code">115280</span>, <span class="locality">г. Москва</span>, <span class="street-address">ул.Автозаводская, 2Б</span></div>
<div class="tel"><strong><span class="type">Телефон для справок и бронирования</span>:</strong> <span class="value">+7 (495) 000-00-00</span>, <span class="value">+7 (495) 000-00-00</span></div>
<div><strong>E-mail:</strong>&nbsp;<span class="e-mail">info@site.ru</span></div>
<div itemprop="openingHours" datetime="Tu,Th 16:00−20:00">По вторникам и четвергам с 4 до 8 вечера</div>
</div>

Более подробно и семантической микроразметке других данных вы можете почитать, пройдя по ссылкам:


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

HOSTCMS v.6. Правильная семантическая микроразметка

Понравилась статья? Поделитесь

Вас может заинтересовать:

  • Вертикальное выпадающее меню на jQuery для HostCMS

    Простое вертикальное меню с плавно выпадающим подменю для сайтов на HostCMS. Работает на jQuery…

  • HostCMS v.6. Вывод товаров по значению дополнительного свойства типа строка

    Вам нужно вывести товары интернет-магазина по какому-то, заранее определенному, признаку? Для начала создаем дополнительное свойство товара, пройдя по цепочке «Интернет-магазин ⇒ Товар ⇒ Свойства товара».

  • Показ отложенных товаров в краткой корзине (для сайтов на HostCMS v6)

    После последнего обновления 6.1.4 появилась возможность показать пользователю в краткой корзине отложенные им товары. Удобная функция, особенно для тех интернет-магазинов, в которых пользователи обычно покупают сразу несколько товаров за раз...

  • HOSTCMS v.6. Вывод комментариев к товарам магазина

    Выводим на Главной или отдельной странице сайта комментарии к товарам, оставляемые посетителями или покупателями...

  • HOSTCMS v.6. Внедряем coin-slider

    Coin-slider один из популярных слайдеров, который используется на сайтах. Чаще всего слайдеры используют на Главной странице, для придания ей динамики, привлечения внимания к «горячей» информации. В этой статье рассказывается, как внедрить этот слайдер XSL-шаблон сайта, разработанного на HostCMS.

  • Мелкие "полезности" при работе с XSL

    Заметка для тех, кто начинает работать с языком XSL. Небольшие хитрости, которые моут быть полезны при написании сайтов.

    Подробную информацию о языке XSL можно узнать в онлайн учебнике на сайте w3schools.com...

Наши услуги по созданию сайтов

WEB ДИЗАЙН

Разработка дизайна сайта. Использование шаблонов для "быстрых" проектов.

ПОДДЕРЖКА САЙТА

Поддержка работоспособности и безопасности. Написание текстов и статей. Наполнение товаром.

ШАБЛОНЫ САЙТОВ

Шаблоны интернет-магазинов и корпоративных сайтов на HostCMS

ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ

Графический дизайн (разработка логотипа). Написание seo-текстов. Редизайн сайта. Замена CMS. Кодинг