О микроразметке замолвите слово (как реализовать микроразметку с помощью модуля coffeediz.schema на сайте под управлением 1С-Битрикс)


Микроразметка - модный тренд по оформлению страниц сайта в удобном для поисковых систем виде. Наличие микроразметки всячески поощряется Поисковиками (Яндекс, Google) небольшими, но приятными плюшками вроде особого оформления сайта в результатах поисковой выдаче и намёком на улучшение позиций при прочих равных.

Оформление микроразметки на самом деле очень простое занятие, однако объём имеющихся материалов на данную тему сейчас так велик, что сложно понять с чего начать, а размеры схем такие большие, что банально страшно начать оформлять.

Именно поэтому я оформил для себя пару простых компонентов, которые просто оформляют массив данных из параметров компонента в виде готовой валидной микроразметки (и конечно выводят страшные шибки, если какие-то данные не заполнены).

Модуль доступен:

  • в Маркетплейсе 1С-Битрикс - http://marketplace.1c-bitrix.ru/solutions/coffeediz.schema/
  • в GitHub - https://github.com/lexnekr/coffeediz.schema

В дальнейшем планируется дополнять модуль новыми компонентами для новых видов микроразметки.


Навигационные цепочки или Хлебные крошки

Google даёт вполне чётки рекомендации на этот счёт - https://support.google.com/webmasters/answer/185417?hl=ru

Яндекс, к сожалению, пишет расплывчато, http://help.yandex.ru/webmaster/search-results/site-description.xml#nav-chains, но судя по другим источникам (рекомендациям в разделе Яндекс.Метрики) любые действия в этом направлении будут учтены как плюс.

Поскольку 1С-Битрикс уже имеет удобный компонент хлебных крошек и API методы для добавления в его цепочки элементов для других компонентов, то мы не будем городить велосипед, а просто воспользуемся bitrix:breadcrumb.

Достаточно добавить на страницу этот компонент и выбрать один из шаблонов, поставляющихся с модулем:

  • coffeediz.data-vocabulary.org - схема http://www.data-vocabulary.org/Breadcrumb/ (рекомендуется Google)
  • coffeediz.schema.org - схема https://schema.org/breadcrumb

Оба варианта проходят валидацию микроразметки Google/Яндекс.

валидация микроразметки в Googleвалидация микроразметки в Яндекс

При этом с дефолтными стилями цепочка навигации выглядит так:

цепочка навигации (хлебные крошки)

Естественно вы можете самостоятельно кастомизировать стили в шаблоне компонента.

Однако на случай если необходимо создать цепочку навигации, но из эстетических соображений она не должна показываться пользователям, вы можете использовать компонент coffeediz:breadcrumb с теми же шаблонами, добавляющий возможность скрыть компонент:

параметр Не отображать на сайте компонента coffeediz:breadcrumb

Примеры микроразметки хлебных крошек:

схема data-vocabulary.orgсхема schema.org
<div class="bx_breadcrumbs">
<ul>
  <li id="breadcrumb-0" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb" itemref="breadcrumb-1"><a href="/" title="Главная" itemprop="url"><span itemprop="title">Главная</span></a></li>
  <li id="breadcrumb-1" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb" itemref="breadcrumb-2" itemprop="child"><a href="/information/" title="Статьи" itemprop="url"><span itemprop="title">Статьи</span></a></li>
  <li id="breadcrumb-2" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="child"><a href="/information/1c-bitrix/" title="1С-Битрикс" itemprop="url"><span itemprop="title">1С-Битрикс</span></a></li>
</ul>
</div>
<div class="bx_breadcrumbs">
<ul itemscope="" itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="/" title="Главная" itemprop="item"><span itemprop="name">Главная</span><meta itemprop="position" content="0"></a></li>
  <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="/information/" title="Статьи" itemprop="item"><span itemprop="name">Статьи</span><meta itemprop="position" content="1"></a></li>
  <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="/information/1c-bitrix/" title="1С-Битрикс" itemprop="item"><span itemprop="name">1С-Битрикс</span><meta itemprop="position" content="2"></a></li>
</ul>
</div>


Адрес и Контакты места/организации

Описание поддерживаемых в рамках схемы полей Яндексом - http://help.yandex.ru/webmaster/supported-schemas/address-organization.xml


Как видим некоторые поля, поддерживаемые схемой не используются яндексом по состоянию на 24.10.2015, однако могут быть использованы в будущем. Так же эти поля могут использоваться Google.

Компонент поддерживает следующие поля ( - обязателен к использованию, иначе схема не валидируется Яндекс/Google,  - поддерживается Яндекс как полноценное свойство):

  • Тип схемы (место, либо организация, а так же все типы мест/организаций по состоянию на 23.10.2015)
  • Название
  • Краткое описание
  • URL сайта
  • Логотип (картинка)
  • Адрес
    • Почтовый индекс
    • Страна
    • Город
    • Регион
    • Адрес (улица, дом, офис и т.п.)
  • Факс
  • Телефон (несколько штук)
  • E-mail (несколько штук)
  • ИНН
  • Время работы (только для типов "Бизнес" и "Административное Здание")
  • Географические координаты (только для типа "Бизнес")
  • Является свойством другого объекта Schema.org
  • Полный набор свойств "Ретинг" с передачей массива параметров компоненту coffeediz:schema.org.AggregateRating
  • Скрыть информации от пользователей (микроразметка видна только поисковикам, но не видна простым юзерам)

Компонент поддерживает 4 уровня типов организаций (начиная с базового Организация/Место), описанные в Schema.org. Рекомендуется выбирать максимально близкий к вашей специфике тип (если такого нет, то просто общий).

Пример микроразметки для организации типа "Веб-студия" (такого типа нет, поэтому будем использовать довольно общий тип "Бизнес" 2 уровня):

<div itemscope itemtype="http://schema.org/LocalBusiness">

<div>
  <b><span itemprop="name">Кофе-Дизайн студия</span></b>
</div>

<div>
  <span itemprop="description">Веб студия занимается разработкой сайтов на 1С-Битрикс, внедрением корпоротивных порталов в облаке и коробке на Битрикс24, разработкой типовых решений для Маркетплейса 1С-Битрикс</span>
</div>

<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">Адрес: <span itemprop="postalCode">119019</span>,
<span itemprop="addressCountry">Россия</span>,
<span itemprop="addressRegion">Московская область</span>,
<span itemprop="addressLocality">Москва</span>,
<span itemprop="streetAddress">Красная площадь, д. 1</span>
</div>

<div>Телефон: <span itemprop="telephone">8(495)123-45-67</span>
, <span itemprop="telephone">8(499)123-45-67</span>
</div>

<div>Факс: <span itemprop="faxNumber">8(495)123-45-67</span>
</div>

<div>E-mail: <a itemprop="email" href="mailto:a@coffeediz.ru">a@coffeediz.ru</a>
</div>

<div>Адрес сайта: <a href="http://кофедизайн.рф" itemprop="url">кофедизайн.рф</a>
</div>

<div>
  <img itemprop="logo" src="http://xn--80ahcjeib4ac4d.xn--p1ai/bitrix/templates/Cofe%203.0/Images/CoffeeCap.png">
</div>


<div>Время работы:
  <time itemprop="openingHours" datetime="Mo-Fr 9:00−20:00">С Понедельника по Пятницу 9-20</time>
, <time itemprop="openingHours" datetime="St,Sn">Суббота, Воскресенье круглосуточно</time>
</div>

<div itemprop="geo" itemscope="" itemtype="http://schema.org/GeoCoordinates">
  <meta itemprop="latitude" content="55.7537523">
  <meta itemprop="longitude" content="37.6225168">
</div>

<div>ИНН: <span itemprop="taxID">1234567890</span>
</div>

</div>

Поскольку компонент является всего лишь оболочкой для оформления в виде микроразметки массива входных параметров, то вы всегда можете использовать его внутри своих компонентов с параметром "SHOW" => "Y" для скрытого отображения, чтобы микроразметку видели только поисковики.

Задойный А.В.


О микроразметке замолвите слово (как реализовать микроразметку с помощью модуля coffeediz.schema на сайте под управлением 1С-Битрикс)

<p>Микроразметка - модный тренд по оформлению страниц сайта в удобном для поисковых систем виде. Наличие микроразметки всячески поощряется Поисковиками (Яндекс, Google) небольшими, но приятными плюшками вроде особого оформления сайта в результатах поисковой выдаче и намёком на улучшение позиций при прочих равных.</p> <p>Оформление микроразметки на самом деле очень простое занятие, однако объём имеющихся материалов на данную тему сейчас так велик, что сложно понять с чего начать, а размеры схем такие большие, что банально страшно начать оформлять.</p> <p>Именно поэтому я оформил для себя пару простых компонентов, которые просто оформляют массив данных из параметров компонента в виде готовой валидной микроразметки (и конечно выводят страшные шибки, если какие-то данные не заполнены).</p> <p>Модуль доступен:</p> <p> </p> <ul> <li>в Маркетплейсе 1С-Битрикс - http://marketplace.1c-bitrix.ru/solutions/coffeediz.schema/</li> <li>в GitHub - https://github.com/lexnekr/coffeediz.schema</li> </ul> <p></p> <p>В дальнейшем планируется дополнять модуль новыми компонентами для новых видов микроразметки.</p> <p> <br /> </p> <a name="breadcrumb"></a> <h2>Навигационные цепочки или Хлебные крошки</h2> <p>Google даёт вполне чётки рекомендации на этот счёт - https://support.google.com/webmasters/answer/185417?hl=ru</p> <p>Яндекс, к сожалению, пишет расплывчато, http://help.yandex.ru/webmaster/search-results/site-description.xml#nav-chains, но судя по другим источникам (рекомендациям в разделе Яндекс.Метрики) любые действия в этом направлении будут учтены как плюс.</p> <p>Поскольку 1С-Битрикс уже имеет удобный компонент хлебных крошек и API методы для добавления в его цепочки элементов для других компонентов, то мы не будем городить велосипед, а просто воспользуемся bitrix:breadcrumb.</p> <p>Достаточно добавить на страницу этот компонент и выбрать один из шаблонов, поставляющихся с модулем:</p> <p> </p> <ul> <li>coffeediz.data-vocabulary.org - схема http://www.data-vocabulary.org/Breadcrumb/ (рекомендуется Google)</li> <li>coffeediz.schema.org - схема https://schema.org/breadcrumb</li> </ul> <p></p> <p>Оба варианта проходят валидацию микроразметки Google/Яндекс.</p> <table border="0" cellpadding="1" cellspacing="1"> <tbody> <tr><td><img src="/upload/medialibrary/f75/f75f2f0e83186648a00eebc6f66f470e.png" border="0" width="500" height="342" title="валидация микроразметки в Google" alt="валидация микроразметки в Google" /></td><td><img src="/upload/medialibrary/5ae/5ae9413a73192ea2384e897afb9b40c5.png" border="0" width="351" height="342" title="валидация микроразметки в Яндекс" alt="валидация микроразметки в Яндекс" /></td></tr> </tbody> </table> <p> При этом с дефолтными стилями цепочка навигации выглядит так: </p> <p><img src="/upload/medialibrary/eac/eac643433ddde9da0417eed5e1e403dc.png" title="цепочка навигации (хлебные крошки)" border="0" alt="цепочка навигации (хлебные крошки)" width="142" height="67" /> <br /> </p> <p>Естественно вы можете самостоятельно кастомизировать стили в шаблоне компонента.</p> <p>Однако на случай если необходимо создать цепочку навигации, но из эстетических соображений она не должна показываться пользователям, вы можете использовать компонент coffeediz:breadcrumb с теми же шаблонами, добавляющий возможность скрыть компонент:</p> <p><img src="/upload/medialibrary/8f8/8f879dab1c1f390d76b752e54cd9361a.png" title="параметр Не отображать на сайте компонента coffeediz:breadcrumb" border="0" alt="параметр Не отображать на сайте компонента coffeediz:breadcrumb" width="660" height="521" /> <br /> </p> <p>Примеры микроразметки хлебных крошек:</p> <table border="1" cellpadding="5" cellspacing="0" __bxbordercollapse="" style="border-collapse: collapse;"> <tbody> <tr><td __bxborder="{}" style="border: 1px dashed rgb(172, 172, 172);"><b>схема data-vocabulary.org</b></td><td __bxborder="{}" style="border: 1px dashed rgb(172, 172, 172);"><b>схема schema.org</b></td></tr> <tr><td __bxborder="{}" style="border: 1px dashed rgb(172, 172, 172);"> <code> &lt;div class=&quot;bx_breadcrumbs&quot;&gt; <br /> &lt;ul&gt; <br />   &lt;li id=&quot;breadcrumb-0&quot; itemscope=&quot;&quot; itemtype=&quot;http://data-vocabulary.org/Breadcrumb&quot; itemref=&quot;breadcrumb-1&quot;&gt;&lt;a href=&quot;/&quot; title=&quot;Главная&quot; itemprop=&quot;url&quot;&gt;&lt;span itemprop=&quot;title&quot;&gt;Главная&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; <br />   &lt;li id=&quot;breadcrumb-1&quot; itemscope=&quot;&quot; itemtype=&quot;http://data-vocabulary.org/Breadcrumb&quot; itemref=&quot;breadcrumb-2&quot; itemprop=&quot;child&quot;&gt;&lt;a href=&quot;/information/&quot; title=&quot;Статьи&quot; itemprop=&quot;url&quot;&gt;&lt;span itemprop=&quot;title&quot;&gt;Статьи&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; <br />   &lt;li id=&quot;breadcrumb-2&quot; itemscope=&quot;&quot; itemtype=&quot;http://data-vocabulary.org/Breadcrumb&quot; itemprop=&quot;child&quot;&gt;&lt;a href=&quot;/information/1c-bitrix/&quot; title=&quot;1С-Битрикс&quot; itemprop=&quot;url&quot;&gt;&lt;span itemprop=&quot;title&quot;&gt;1С-Битрикс&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; <br /> &lt;/ul&gt; <br /> &lt;/div&gt;</code></td><td __bxborder="{}" style="border: 1px dashed rgb(172, 172, 172);"><code>&lt;div class=&quot;bx_breadcrumbs&quot;&gt; <br /> &lt;ul itemscope=&quot;&quot; itemtype=&quot;http://schema.org/BreadcrumbList&quot;&gt; <br />   &lt;li itemprop=&quot;itemListElement&quot; itemscope=&quot;&quot; itemtype=&quot;http://schema.org/ListItem&quot;&gt;&lt;a href=&quot;/&quot; title=&quot;Главная&quot; itemprop=&quot;item&quot;&gt;&lt;span itemprop=&quot;name&quot;&gt;Главная&lt;/span&gt;&lt;meta itemprop=&quot;position&quot; content=&quot;0&quot;&gt;&lt;/a&gt;&lt;/li&gt; <br />   &lt;li itemprop=&quot;itemListElement&quot; itemscope=&quot;&quot; itemtype=&quot;http://schema.org/ListItem&quot;&gt;&lt;a href=&quot;/information/&quot; title=&quot;Статьи&quot; itemprop=&quot;item&quot;&gt;&lt;span itemprop=&quot;name&quot;&gt;Статьи&lt;/span&gt;&lt;meta itemprop=&quot;position&quot; content=&quot;1&quot;&gt;&lt;/a&gt;&lt;/li&gt; <br />   &lt;li itemprop=&quot;itemListElement&quot; itemscope=&quot;&quot; itemtype=&quot;http://schema.org/ListItem&quot;&gt;&lt;a href=&quot;/information/1c-bitrix/&quot; title=&quot;1С-Битрикс&quot; itemprop=&quot;item&quot;&gt;&lt;span itemprop=&quot;name&quot;&gt;1С-Битрикс&lt;/span&gt;&lt;meta itemprop=&quot;position&quot; content=&quot;2&quot;&gt;&lt;/a&gt;&lt;/li&gt; <br /> &lt;/ul&gt; <br /> &lt;/div&gt;</code></td></tr> </tbody> </table> <p> <br /> </p> <a name="OrganizationAndPlace"></a> <h2>Адрес и Контакты места/организации</h2> <p>Описание поддерживаемых в рамках схемы полей Яндексом - http://help.yandex.ru/webmaster/supported-schemas/address-organization.xml</p> <p><img src="http://yastatic.net/doccenter/images/help-ru/webmaster/freeze/rLWVT6HqTrWQ269UW_mVyKoLa90.png" border="0" width="644" height="152" /> <br /> </p> <p><i>Как видим некоторые поля, поддерживаемые схемой не используются яндексом по состоянию на 24.10.2015, однако могут быть использованы в будущем. Так же эти поля могут использоваться Google.</i></p> <p>Компонент поддерживает следующие поля (<b><font color="#ff0000">⊗</font></b> - обязателен к использованию, иначе схема не валидируется Яндекс/Google, <b><font color="#00a650">⊗</font></b> - поддерживается Яндекс как полноценное свойство):</p> <ul> <li><b><font color="#ff0000">⊗</font></b><b><font color="#00a650">⊗</font></b>Тип схемы (место, либо организация, а так же все типы мест/организаций по состоянию на 23.10.2015)</li> <li><b><font color="#ff0000">⊗</font></b><b><font color="#00a650">⊗</font></b>Название</li> <li>Краткое описание</li> <li><b><font color="#00a650">⊗</font></b>URL сайта</li> <li>Логотип (картинка)</li> <li><b><font color="#00a650"><b style="color: rgb(0, 0, 0);"><font color="#ff0000">⊗</font></b>⊗</font></b>Адрес</li> <ul> <li><b><font color="#00a650">⊗</font></b>Почтовый индекс</li> <li><b><font color="#00a650">⊗</font></b>Страна</li> <li><b><font color="#00a650">⊗</font></b>Город</li> <li><b><font color="#00a650">⊗</font></b>Регион</li> <li><b><font color="#00a650">⊗</font></b>Адрес (улица, дом, офис и т.п.)</li> </ul> <li><b><font color="#00a650">⊗</font></b>Факс</li> <li><b><font color="#00a650"><b style="color: rgb(0, 0, 0);"><font color="#00a650"><b style="color: rgb(0, 0, 0);"><font color="#ff0000">⊗</font></b></font></b>⊗</font></b>Телефон (несколько штук)</li> <li>E-mail (несколько штук)</li> <li>ИНН</li> <li><b><font color="#00a650">⊗</font></b>Время работы (только для типов &quot;Бизнес&quot; и &quot;Административное Здание&quot;)</li> <li>Географические координаты (только для типа &quot;Бизнес&quot;)</li> <li>Является свойством другого объекта Schema.org</li> <li>Полный набор свойств &quot;Ретинг&quot; с передачей массива параметров компоненту coffeediz:schema.org.AggregateRating</li> <li><em>Скрыть информации от пользователей (микроразметка видна только поисковикам, но не видна простым юзерам)</em></li> </ul> <p>Компонент поддерживает 4 уровня типов организаций (начиная с базового Организация/Место), описанные в Schema.org. Рекомендуется выбирать максимально близкий к вашей специфике тип (если такого нет, то просто общий).</p> <p> Пример микроразметки для организации типа &quot;Веб-студия&quot; (такого типа нет, поэтому будем использовать довольно общий тип &quot;Бизнес&quot; 2 уровня): </p> <table border="1" cellpadding="5" cellspacing="0"> <tbody> <tr><td><code>&lt;div itemscope itemtype=&quot;http://schema.org/LocalBusiness&quot;&gt; <br /> <br /> &lt;div&gt; <br />   &lt;b&gt;&lt;span itemprop=&quot;name&quot;&gt;Кофе-Дизайн студия&lt;/span&gt;&lt;/b&gt; <br /> &lt;/div&gt; <br /> <br /> &lt;div&gt; <br />   &lt;span itemprop=&quot;description&quot;&gt;Веб студия занимается разработкой сайтов на 1С-Битрикс, внедрением корпоротивных порталов в облаке и коробке на Битрикс24, разработкой типовых решений для Маркетплейса 1С-Битрикс&lt;/span&gt; <br /> &lt;/div&gt; <br /> <br /> &lt;div itemprop=&quot;address&quot; itemscope=&quot;&quot; itemtype=&quot;http://schema.org/PostalAddress&quot;&gt;Адрес: &lt;span itemprop=&quot;postalCode&quot;&gt;119019&lt;/span&gt;, <br /> &lt;span itemprop=&quot;addressCountry&quot;&gt;Россия&lt;/span&gt;, <br /> &lt;span itemprop=&quot;addressRegion&quot;&gt;Московская область&lt;/span&gt;, <br /> &lt;span itemprop=&quot;addressLocality&quot;&gt;Москва&lt;/span&gt;, <br /> &lt;span itemprop=&quot;streetAddress&quot;&gt;Красная площадь, д. 1&lt;/span&gt; <br /> &lt;/div&gt; <br /> <br /> &lt;div&gt;Телефон: &lt;span itemprop=&quot;telephone&quot;&gt;8(495)123-45-67&lt;/span&gt; <br /> , &lt;span itemprop=&quot;telephone&quot;&gt;8(499)123-45-67&lt;/span&gt; <br /> &lt;/div&gt; <br /> <br /> &lt;div&gt;Факс: &lt;span itemprop=&quot;faxNumber&quot;&gt;8(495)123-45-67&lt;/span&gt; <br /> &lt;/div&gt; <br /> <br /> &lt;div&gt;E-mail: &lt;a itemprop=&quot;email&quot; href=&quot;mailto:a@coffeediz.ru&quot;&gt;a@coffeediz.ru&lt;/a&gt; <br /> &lt;/div&gt; <br /> <br /> &lt;div&gt;Адрес сайта: &lt;a href=&quot;http://кофедизайн.рф&quot; itemprop=&quot;url&quot;&gt;кофедизайн.рф&lt;/a&gt; <br /> &lt;/div&gt; <br /> <br /> &lt;div&gt; <br />   &lt;img itemprop=&quot;logo&quot; src=&quot;http://xn--80ahcjeib4ac4d.xn--p1ai/bitrix/templates/Cofe%203.0/Images/CoffeeCap.png&quot;&gt; <br /> &lt;/div&gt; <br /> <br /> <br /> &lt;div&gt;Время работы: <br />   &lt;time itemprop=&quot;openingHours&quot; datetime=&quot;Mo-Fr 9:00−20:00&quot;&gt;С Понедельника по Пятницу 9-20&lt;/time&gt; <br /> , &lt;time itemprop=&quot;openingHours&quot; datetime=&quot;St,Sn&quot;&gt;Суббота, Воскресенье круглосуточно&lt;/time&gt; <br /> &lt;/div&gt; <br /> <br /> &lt;div itemprop=&quot;geo&quot; itemscope=&quot;&quot; itemtype=&quot;http://schema.org/GeoCoordinates&quot;&gt; <br />   &lt;meta itemprop=&quot;latitude&quot; content=&quot;55.7537523&quot;&gt; <br />   &lt;meta itemprop=&quot;longitude&quot; content=&quot;37.6225168&quot;&gt; <br /> &lt;/div&gt; <br /> <br /> &lt;div&gt;ИНН: &lt;span itemprop=&quot;taxID&quot;&gt;1234567890&lt;/span&gt; <br /> &lt;/div&gt; <br /> <br /> &lt;/div&gt;</code></td></tr> </tbody> </table> <p> Поскольку компонент является всего лишь оболочкой для оформления в виде микроразметки массива входных параметров, то вы всегда можете использовать его внутри своих компонентов с параметром &quot;SHOW&quot; =&gt; &quot;Y&quot; для скрытого отображения, чтобы микроразметку видели только поисковики. </p> <p style="text-align: right;"> <a href="http://plus.google.com/+АлексейЗадойный?rel=author" target="_blank" >Задойный А.В.</a> </p>

Возврат к списку

Яндекс.Метрика