Довелось реализовать микроразметку schema.org в ещё одном решении от одного из лидеров маркета 1С-Битрикс - компании Аспро - Корпоративный сайт, адаптивный (http://marketplace.1c-bitrix.ru/solutions/aspro.allcorp/). На сей раз дорабатывалось решение не для интернет-магазинов, а для сайтов-визиток и каталогов (т.е. поддерживаются младшие редакции включая "Старт").
Данная статья является компиляцией полученного опыта и может быть использована в качестве руководства по самостоятельной микроразметке данного решения владельцами сайтов.
Микроразметка schema.org внедрялась на решение "Аспро: Корпоративный сайт, адаптивный" v.1.0.12.
|
Лирическое отступление. В прошлой статье я критиковал качество кода в решении "Крутойшоп". Боюсь в этом дела обстоят ещё хуже. Компоненты как-то странно работают с кешом 1С-Битрикс - при малейших изменениях есть риск получить чудовищно развалившуюся вёрстку (причём такое может произойти даже при казалось бы легитимном изменении параметров компонента через диалог редактирования). Поэтому обязательно бекапьте все файлы перед изменением! |
Статья будет разбита на 2 части: статические и динамические области.
- Статическая область - положили компонент (возможно даже использовали визуальный редактор), настроили параметры (название организации, график работы, телефон и другая информация, которая не меняется в зависимости от состояния страницы и может быть изменена редактором в случае необходимости);
- Динамическая область - компонент меняется в зависимости от страницы, например каталог товаров или новостная лента, компонент необходимо разместить в исходном коде шаблона компонента и настроить получение параметров из компонента (размещение происходит с использованием только php редактора, желательно опытным администратором или разработчиком, использование виз редактора с высокой степенью вероятности приведёт к неработоспособности функционала).
Начнём с того что проще и может быть сделано практически любым опытным пользователем и редактором контента.
Статическая микроразметка
Адрес организации и Хлебные крошки
Эта часть инструкции практически без изменений кочует из одного документа в другой (меняются лишь скриншоты и путь ко включаемой области), т.к. принцип идентичный.
Наиболее подходящее место для размещение статической микроразметки - одна из включаемых областей шаблона. Так разместив 1 раз компоненты мы отобразим их на всём сайте.
Идеально подойдёт включаемая область с копирайтом или адресом в подвале сайта. Мы воспользуемся копирайтом:
Включаем режим правки в публичной части, наводим курсор мыши на область, видим появление конктекстного меню как на скриншоте выше, нажимаем кнопку "редактировать как html".
Адрес файла включаемой области (для опытных пользователей) - /include/copy.php
В открывшееся окно разделено на 2 части: левую рабочую область и правую панель компонентов. В Правой области в списке компонентов выбираем пункт "Компоненты Кофе-Дизайн", внутри "schema.org" и в открывшемся списке выбираем нужные нам компоненты Адреса и Хлебных Крошек. Перетаскиваем мышью компоненты из правой области компонентов в левую рабочую:
При двойном нажатии на компоненте откроется диалог редактирования параметров, в котором нам необходимо будет настроить оба компонента:
Для заполнения параметров компонента воспользуемся документацией (обратим внимание на выделенные красными значками пункты - они обязательны для заполнения):
- Спецификация и документация для Адреса (заполняем все поля, какие сочтём нужным. Кашу маслом не испортишь, как не испортишь сайт микроразметкой)
- Документация для Хлебных крошек (ничего особенного, компонент выводит данные автоматически, нужно лишь проверить правильность формирования цепочки, которая генерируется на основе файловой структуры и данных от компонентов на странице).
После настройки компонентов добавляем галочку "Не отображать на сайте":
Она добавит компоненту параметр:
"SHOW" => "Y",
Это универсальный параметр, имеющийся у всех компонентом модуля "Микроразметка Schema.org". Значение Y говорит компоненту, что параметр не следует показывать обычным пользователям, но отдавать поисковым системам. Это позволяет вписать компонент в любой сайт без изменения его внешнего вида.
Микроразметка Адреса и Хлебных крошек готова.
Динамическая микроразметка
Как было сказано выше динамический контент формируется системой (например, товары каталога или новости), поэтому физически нет возможности поставить на каждую страницу компонент микроразметки и вручную его настроить (даже если предположить, что у кого-то хватило бы терпения это делать) - все страницы формируются автоматически системой. Для решения задачи микроразметки требуется опытный администратор или программист, поскольку придётся вносить изменения в php код.
Если вы не являетесь таким специалистом и намерены сделать всё самостоятельно, используя данную инструкцию, то будьте крайне аккуратны и ни в коем случае не используйте визуальный редактор 1С-Битрикс для работы с кодом - это может привести к неработоспособности функционала. И делайте резервную копию.
Схема действий всегда будет одинаковой:
- Берём пустую страницу (например создаём её в административной разделе) и открываем в визуальном редакторе;
- Размещаем на странице компонент микроразметки (аналогично тому как выше сделано для Адреса);
- Заполняем те параметры, которые в дальнейшем будут нами использоваться в динамическом компоненте, статическими заглушками (например #NAME# для параметра с названием товара, #PRICE# для цены и т.д.);
- Переключаемся в режим исходного кода для получения кода вызова компонента с нашими заглушками (см скриншот ниже);
- Находим шаблон компонента, отвечающего за вывод в публичной части той сущности, которую мы хотим разметить (например, детальной страницы товара), копируем его (иначе наша правка может быть затёрта при обновлении решения) и открываем копию для редактирования в режиме php;
- Выбираем место для вставки вызова нашего компонента;
- Используя отладочный код (выводится незаметно для пользователей, так что не забываем в отладчике убирать
display:none, а после завершения работ убрать отладку):
<div style="display:none;">
<? echo "<pre>"; print_r($arResult); echo "</pre>";?>
</div>
Выводим массив с данными компонента. Выбираем те ключи, которые содержат интересующие нас данные (например, название товара или его цену); - Заменяем заглушку (#NAME#, #PRICE# и т.д.) на переменные с данными, использующимися шаблоном.
Товары и цены
Решение "Аспро: Корпоративный сайт, адаптивный" не является интернет-магазином, однако здесь реализован довольно подробный товарный каталог с помощью компонентов новостей.
Следует учитывать, что для корректной работы микроразметки товара необходимо заполнить поле "цена", однако его содержимое должно быть числовым! Микроразметка не понимает значения вроде "1999 руб.", а учитывая вариативность возможных значений валюты в этой статье мы будем редполагать, что поле заполнено просто числом.
Зайдём в карточку товара в режиме редактирования и наведём курсор на область товара, нажмём на стрелочку рядом с параметром компонента для получения списка используемых компонентов:
Так мы перейдём к редактированию файла /bitrix/templates/aspro-allcorp/components/bitrix/news.detail/catalog/template.php, где:
-
aspro-allcorp - имя шаблона сайта
-
news.detail - название компонента
-
catalog - название шаблона компонента
В файл template.php (сам шаблон) мы добавим в конце вызов компонента микроразметки товара:
<?if(!empty($arResult["PROPERTIES"]["PRICE"]["VALUE"])):?>
<?$APPLICATION->IncludeComponent(
"coffeediz:schema.org.Product",
"",
Array(
"SHOW" => "Y",
"NAME" => $arResult["NAME"],
"DESCRIPTION" => $arResult["DETAIL_TEXT"],
"AGGREGATEOFFER" => "N",
"PARAM_RATING_SHOW" => "N",
"PRICE" => $arResult["PROPERTIES"]["PRICE"]["VALUE"],
"PRICECURRENCY" => "BYR",
"ITEMAVAILABILITY" => $arResult['SchemaOrg']['ITEMAVAILABILITY'],
"ITEMCONDITION" => "NewCondition",
"PAYMENTMETHOD" => array("ByBankTransferInAdvance"),
"COMPONENT_TEMPLATE" => ".default"
),
false,
array('HIDE_ICONS' => 'Y')
);?>
<?endif;?>
Помимо этого добавим в рядом расположенный файл result_modifier.php (полный путь - /bitrix/templates/aspro-allcorp/components/bitrix/news.detail/catalog/result_modifier.php) код:
<?if($arResult['PROPERTIES']['STATUS']['VALUE_XML_ID'] == 'instock') { $arResult['SchemaOrg']['ITEMAVAILABILITY'] = 'InStock';
}
if($arResult['PROPERTIES']['STATUS']['VALUE_XML_ID'] == 'nostock') {
$arResult['SchemaOrg']['ITEMAVAILABILITY'] = 'OutOfStock';
}
if($arResult['PROPERTIES']['STATUS']['VALUE_XML_ID'] == 'order') {
$arResult['SchemaOrg']['ITEMAVAILABILITY'] = 'PreOrder';
}
if($arResult['PROPERTIES']['STATUS']['VALUE_XML_ID'] == 'pending') {
$arResult['SchemaOrg']['ITEMAVAILABILITY'] = 'OutOfStock';
}?>
|
Примечания Т.к. в решении не задаются некоторые параметры товара, нам пришлось задать их в явном виде в микроразметке:
Кроме того, поскольку параметр "статус" не соответствует установленным в стандарте на микроразметку (и рекомендованным Google), то мы вручную подобрали эквиваленты в result_modifier.php и сохранили в отдельную переменную $arResult['SchemaOrg']['ITEMAVAILABILITY']. Так же, мы поставили проверку на заполненность цены! Цена - обязательное поле в спецификации Google/Яндекс для разметки товаров! Поэтому мы просто не выводим микроразметку, если у товара не заполнена цена! |
Микроразметка товара готова. Мы не использовали разметку рейтинга/отзыва, т.к. данное решение просто не поддерживает такой функционал (однако, если вы доработаете его, то легко сможете передать и информацию о рейтинге/отзыве в параметры компонента, как это было описано в предыдущей статье)
Изображения
Разметка картинок возможна сразу в 3 местах данного решения (и везде произойдёт одинаковым образом):
- Товар - /bitrix/templates/aspro-allcorp/components/bitrix/news.detail/catalog/template.php
- Проект - /bitrix/templates/aspro-allcorp/components/bitrix/news.detail/projects/template.php
- Новость/Статья - /bitrix/templates/aspro-allcorp/components/bitrix/news.detail/news/template.php
Переход к редактированию шаблона полностью идентичен тому как это происходит для разметки товаров и цен.
Для добавления микроразметки (в любом из этих 3 шаблонов) найдём строку:
<?foreach($arResult["GALLERY"] as $key => $arPhoto):?>
или
<?foreach( $arResult["GALLERY"] as $key => $arPhoto ){?>
и сразу после этой строки добавим код:
<?$APPLICATION->IncludeComponent( "coffeediz:schema.org.ImageObject",
"",
Array(
"COMPONENT_TEMPLATE" => ".default",
"SHOW" => "Y",
"CONTENTURL" => $arPhoto["DETAIL"]["SRC"],
"NAME" => $arResult["NAME"],
"CAPTION" => $arResult["NAME"],
"DESCRIPTION" => $arResult["PREVIEW_TEXT"],
"HEIGHT" => $arPhoto["HEIGHT"],
"WIDTH" => $arPhoto["WIDTH"],
"TRUMBNAIL_CONTENTURL" => $arPhoto["PREVIEW"]["src"],
"ITEMPROP" => "",
"REPRESENTATIVEOFPAGE" => "True",
"PARAM_RATING_SHOW" => "N"
),
false,
array('HIDE_ICONS' => 'Y')
);?>
Этот код автоматом оформит микроразметку, используя в качестве названия картинки название Новости/Проекта/Статьи/Товара, укажет пропорции и укажет оригинал картинки (в максимальном разрешении) и миниатюру (уменьшенная копия для галереи).
Микроразметка изображений готова!
Новости/Статьи
И для новостей и для статей в шаблоне используется общий компонент, поэтому без доработок мы не можем указать размеру тип материала в микроразметке. Это не страшно - мы будем использовать "тип по-умолчанию" для творческих работ - статья.
Редактируем шаблон компонента детальной новости /bitrix/templates/aspro-allcorp/components/bitrix/news.detail/news/template.php (переход к редактированию через публичный интерфейс описан в разделе "Товары и Цены"). Добавим в конце файла вызов компонент микроразметки статьи:
<?$APPLICATION->IncludeComponent( "coffeediz:schema.org.Article",
"",
Array(
"COMPONENT_TEMPLATE" => ".default",
"SHOW" => "Y",
"TYPE" => "",
"LEARNING_RESOURCE_TYPE" => "",
"NAME" => $arResult["NAME"],
"ARTICLEBODY" => $arResult["FIELDS"]["DETAIL_TEXT"],
"ABOUT" => $arResult["FIELDS"]["DETAIL_TEXT"],
"GENRE" => "",
"ARTICLE_SECTION" => array(""),
"KEYWORDS" => array(""),
"IN_LANGUAGE" => "ru",
"DATA_PUBLISHED" => $arResult["DISPLAY_ACTIVE_FROM"],
"AUTHOR_TYPE" => "",
"IMAGEURL" => $arResult["DETAIL_PICTURE"]["SRC"],
"PARAM_RATING_SHOW" => "N",
"IMAGE_NAME" => $arResult["DETAIL_PICTURE"]["TITLE"],
"IMAGE_CAPTION" => $arResult["DETAIL_PICTURE"]["ALT"],
"IMAGE_DESCRIPTION" => $arResult["DETAIL_PICTURE"]["ALT"],
"IMAGE_HEIGHT" => $arResult["DETAIL_PICTURE"]["HEIGHT"],
"IMAGE_WIDTH" => $arResult["DETAIL_PICTURE"]["WIDTH"],
"IMAGE_TRUMBNAIL_CONTENTURL" => ""
),
false,
array('HIDE_ICONS' => 'Y')
);?>
Важно, что мы указали дату начала активности в качестве даты публикации. Это несёт с собой 2 проблемы:
- у статей в данном типовом решении по-умолчанию дата активности отсутствует. Это нормально - данный атрибут не обязательный согласно спецификации Яндекс (хотя Google и будет ругаться)
-
у новостей дата стоит, однако в параметрах компонента настроен вид даты, отличный от ISO 8601, поэтому разметка так же будет невалидной. Вариант - выбрать в настройках компонента формат ГГГГ-ММ-ДД:
Разметка статьи/новости готова!
Заключение
В рамках статьи были реализованы следующие виды микроразметки для решения "Аспро: Корпоративный сайт, адаптивный" для 1С-Битрикс:
- Хлебные крошки (Data-Vocabulary.org/Breadcrumb), только для Google
- Адрес организации и контакты (schema.org/Organization), для Google и Яндекс
- Изображения товаров и галерей изображений в новостях/статья/проектах (schema.org/ImageObject), для Яндекс.Картинок и Google.Изображений
- Статьи (schema.org/Article), в первую очередь для Яндекса. Для Статей и Новостей.
- Товары с ценами (schema.org/Product), для Google и Яндекс (но с учётом того, что если вы выгружаете YML для Яндекс.Маркета, то он получит приоритет перед микроразметкой!)
Теперь в точки зрения поисковой системы беспорядочный склад картинок (по 3 для каждого изображения товара и по 2 для галерей) превратился в упорядоченную структуру для Яндекс.Картинок (и риск попадания крошечной анонсной картинки вперёд большого оригинала серьёзно уменьшен), Яндекс.Справочник и Google.Maps получили информацию об организации, а поиск по товарам обеих систем вполне ожет считать наш сайт полноценным интернет-магазином!
