Блог

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


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

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

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

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

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

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

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

<!-- Путь к группе -->
  <div class="path" xmlns:v="http://rdf.data-vocabulary.org/#">
 <xsl:if test="$group = 0">
  <span typeof="v:Breadcrumb">
  <a title="{/shop/name}" href="{/shop/url}" hostcms:id="{/shop/@id}" hostcms:field="name" hostcms:entity="shop" property="v:title" rel="v:url">
  <xsl:value-of disable-output-escaping="yes" select="/shop/name"/>
  </a>
  </span>
  </xsl:if>
 <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 typeof="v:Breadcrumb">
  <a title="{shop_item/name}" href="{shop_item/url}" property="v:title" rel="v:url">
  <xsl:value-of disable-output-escaping="yes" select="shop_item/name"/>
  </a>
  </span>
  </xsl:if>
 <i class="fa fa-angle-right"></i>
 <span typeof="v:Breadcrumb">
  <a href="{url}" hostcms:id="{@id}" hostcms:field="name" hostcms:entity="shop_item" property="v:title" rel="v:url"><xsl:value-of disable-output-escaping="yes" select="name"/></a>
  </span>
  </div>

И ниже шаблон для хлебных крошек, который размещается в самом конце файла шаблона "МагазинТовар", перед закрывающим тегом </xsl:stylesheet>.

<!-- Шаблон выводит рекурсивно ссылки на группы магазина -->
  <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 typeof="v:Breadcrumb">
  <a title="{/shop/name}" href="{/shop/url}" hostcms:id="{/shop/@id}" hostcms:field="name" hostcms:entity="shop" class="root" property="v:title" rel="v:url">
  <xsl:value-of select="/shop/name"/>
  </a>
  </span>
  </xsl:if>
 <i class="fa fa-angle-right"></i>
 <span typeof="v:Breadcrumb">
  <a title="{name}" href="{url}" hostcms:id="{@id}" hostcms:field="name" hostcms:entity="shop_group" property="v:title" rel="v:url">
  <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>

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


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

ОТПРАВИТЬ ЗАЯВКУ


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

Блог

  • 28 декабря 2017 г.
    Внедрение в макет кода формы с reCaptcha. HostCMS 6
    Хочу поделиться с вами кодом, который размещается в макете страницы и подгружает в нее форму с reCaptcha...
  • 24 ноября 2017 г.
    Выводим производителей с разбивкой по алфавиту. HostCMS v.6
    Если у вас в интернет-магазине много производителей (брендов), то приведенное нами решение поможет организовать показ всех производителей с разбивкой по алфавиту...
  • 07 сентября 2017 г.
    Четыре причины, почему Facebook необходим для маркетинговых кампаний
    Успех вашего онлайн-бизнеса зависит от того, как вы реализуете свою стратегию цифрового маркетинга во взаимодействии с вашей целевой аудиторией...
  • 17 июня 2017 г.
    Варианты создания логотипа сайта
    Фундаментом фирменного стиля является логотип. Непосредственно на логотип, в первую очередь, обращают внимание клиенты любой компании, к тому же, логотип должен быть обязательно размещён на такой имиджевой продукции, как ручки, чашки фирменные бланки и прочее.
  • 30 января 2017 г.
    Интернет магазин. Службы доставки товаров
    Для того, чтобы увеличить продажи с сайта вам, обязательно нужно предоставить Покупателям разнообразные способы доставки товара. Если вы будете рассчитывать, что Клиент сам приедет в ваш магазин или пункт выдачи и заберет заказ, то потеряете значительную часть потенциальных покупателей, которые живут в другом регионе...
  • 01 декабря 2016 г.
    Используем готовые шаблоны для сайтов
    Если вы сами не дизайнер и не можете пользоваться графическими программами или у вас нет средств на то, чтобы заказать разработку дизайна сайта профессиональному веб дизайнеру, или сайт нужен очень срочно, то в этом случае вам помогут готовые шаблоны сайтов. Или же уже готовые сайты...
  • 02 ноября 2016 г.
    Краткая корзина в модальном окне для HostCMS v.6

    Предлагаю вариант показа отложенного товара и содержимого краткой корзины в модальном окне в момент, когда Пользователь откладывает товар для совершения покупки. Решение делалось на основе встроенного в HostCMS адаптивного шаблона с подключеной библиотекой Bootstrap...

Все статьи

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

WEB ДИЗАЙН

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

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

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

ПРОДАЖА ГОТОВЫХ РЕШЕНИЙ

Готовые интернет-магазины и интеграционные решения для сайтов на HostCMS

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

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

Подробный ПРАЙС-ЛИСТ