Если у вас есть вопросы по статье или нужна помощь в создании сайта, пишите нам в чат на сайте или Вконтакте. Не забудьте оставить свой e-mail и мы ответим в самое ближайшее время.
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> <span class="e-mail">info@site.ru</span></div> <div itemprop="openingHours" datetime="Tu,Th 16:00−20:00">По вторникам и четвергам с 4 до 8 вечера</div> </div>
Более подробно и семантической микроразметке других данных вы можете почитать, пройдя по ссылкам:
Вы можете заказать у нас выполнить данную интеграцию для своего сайта.
Стоимость 800р.
