OpenGraph разметка на сайте под управлением 1С-Битрикс

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

Как известно, OpenGraph разметка используется для отображения анонса страницы при размещении ссылки на нее в социальных сетях. Обычно для внедрения данной микроразметки использовать основные метаданные:

• og:title – заголовок страницы без названия сайта (брать из тега <title>);
• og:type – тип мультимедиа, к которому относятся материалы, по умолчанию использовать значение website;
• og:url – канонический URL страницы без переменных сеанса, параметров для идентификации пользователей и счетчиков;
• og:description – краткое описание страницы (брать из meta-описания description);
• og:image – URL изображения, описывающего объект.

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

Также можно почитать документацию на русском.

Для проверки результатов работы по внедрению можно с помощью сервиса Яндекса. Также существует сторонний сервис для проверки.

Для статичных страниц нам нужно добавить свойство страницы для хранения ссылки на изображение (og:image). Делаем это в административной части в разделе Настройки модуля «Управление структурой».

Теги og:title и og:description будут заполняться значениями стандартных свойств страницы («Заголовок» и «Описание»).

Значение og:type в данном случае зависит от информации, которая будет выводится на странице если это новости, статьи или описание товаров, оно будет равно article. Иначе – website.

Далее добавляем код для вывода разметки в файл header.php шаблона сайта. Он будет работать на страницах и со статической, и с динамической информацией.

В самом начале фрагмента кода мы вычисляем url текущей страницы, чтобы вывести его в атрибуте content свойства og:url.

Также обращу ваше внимание на значение og:locale и og:site_name, вывод которых размещен в конце описываемого фрагмента кода. Значение этих свойств одинаковое на всех страницах.

Для og:locale это ru_RU, а для og:site_name - $_SERVER['SERVER_NAME'].

Также уточню, что на демо-сайте, шаблон которого мы редактируем существуют следующие разделы, содержащие динамическую информацию: /news, /catalog и /can_buy.

	$cur_page = $APPLICATION->GetCurPage();
	$curPageUrl = (CMain::IsHTTPS()) ? "https://" : "http://";
    $curPageUrl .= $_SERVER["HTTP_HOST"].$cur_page;
	?>	
	<meta property="og:title" content="<?$APPLICATION->ShowTitle();?>" />
	<?if (strpos($APPLICATION->GetCurPage(), 'news') !== false || strpos($APPLICATION->GetCurPage(), 'catalog') !== false || strpos($APPLICATION->GetCurPage(), 'can_buy') !== false):?>
	<meta property="og:type" content="article" />
	<?else:?>
	<meta property="og:type" content="website" />
	<?endif;?>
	<meta property="og:url" content="<?=$curPageUrl;?>" />
	<meta property="og:description" content="<?$APPLICATION->ShowProperty('description');?>" />	
	<meta property="og:image" content="<?$APPLICATION->ShowProperty('og_image');?>" />
	<meta property="og:locale" content="ru_RU" />
	<meta property="og:site_name" content="<?=$_SERVER['SERVER_NAME']?>" />

В указанных выше разделах на страницах размещены компоненты для вывода динамической информации. Например, bitrix:news, bitrix:catalog и другие. Если на статических страницах значения тега og_image бралось из свойства страницы, то сейчас его будем получать из поля изображения для анонса элементов соответствующих инфоблоков. Нам нужно кастомизировать шаблоны простых компонентов (в каталоге – список товаров и карточку товара, для новостей – детальную новость). Добавляем в шаблоны компонентов 2 файла (result_modifier.php и component_epilog.php) со следующим содержанием:

/**
 * result_modifier.php
 * add preview picture array
 */
$cp = $this->__component; // объект компонента
if (is_object($cp))
    $cp->SetResultCacheKeys(array('PREVIEW_PICTURE'));

/**
 * component_epilog.php
 * setting the value of og_image page property
 */
global $APPLICATION;
if(!empty($arResult['PREVIEW_PICTURE']['SRC'])){
	$ogImageUrl = ($request->isHttps()) ? "https://" : "http://";
	$ogImageUrl .= $server->getHttpHost();
	$ogImageUrl .= $arResult['PREVIEW_PICTURE']['SRC'];
	$APPLICATION->SetPageProperty("og_image", $ogImageUrl);
}

Для показа корректных значений og:title и og:description не забудем указать значение параметров 'SET_META_DESCRIPTION'=>'Y' и 'SET_TITLE'=>'Y' в вызовах компонентов catalog.section и news.list.

Больше никаких настроек не требуется. Теперь можно переходить к проверке. Если вы все сделали правильно, то при размещении ссылки в соцсети на страницу вашего сайта, в сниппете вы увидите изображение, название и описание страницы, которые вы вывели в шаблоне сайта в соответствующих тегах микроразметки OpenGraph.