22.09.2017

Open Graph разметка в 1С-Битрикс

Open Graph — это стандарт метатегов, разработанный соц.сетью Facebook для передачи информации различным сервисам о содержании страницы.

Стандартной разметкой Open Graph пользуется большинство популярных социальных сетей Facebook, Вконтакте, Google+, Twitter, LinkedIn, Pinterest и другие.

Данные добавляются в секцию <head> в виде метатегов:

<meta property="og:url" content="https://keengo.ru">

В качестве свойств данной разметкой могут передаваться следующие параметры:

og:url — ссылка на страницу
og:type — тип передаваемого объекта
og:title — заголовок страницы или объекта
og:description — описание страницы или объекта
og:image — превью изображение

Как же добавить данные параметры в шапку шаблона 1С-Битрикс, чтобы они автоматически отображали информацию текущей страницы, которой делится в соц.сети пользователь?

Для начала определим некоторые параметры, которые так же пригодятся для дальнейшего использования на сайте, в самом начале файла header.php вашей темы добавляем код:

<?
define("SITE_SERVER_PROTOCOL", (CMain::IsHTTPS()) ? "https://" : "http://"); // Переменная определяет протокол, по которому работает ваш сайт
$curPage = $APPLICATION->GetCurPage(); // Получаем текущий адрес страницы
?>

Затем в секции <head> добавляем наши метатеги с параметрами для вывода Open Graph разметки:

<meta property="og:url" content="<?=SITE_SERVER_PROTOCOL . SITE_SERVER_NAME . $curPage?>">
<meta property="og:type" content="website">
<meta property="og:title" content="<?$APPLICATION->ShowProperty("title")?>">
<meta property="og:description" content="<?=$APPLICATION->ShowProperty("description")?>">
<meta property="og:image" content="<?=$APPLICATION->ShowProperty("og:image")?>">

Для вывода og:url воспользовались конструкцией, которая формирует полную ссылку на текущую страницу:

<?=SITE_SERVER_PROTOCOL . SITE_SERVER_NAME . $curPage?>

Параметр og:type в нашем случае принимает значение website.

Для вывода заголовка og:title и описания og:description воспользовались функцией 1С-Битрикс $APPLICATION->ShowProperty, которая является отложенной функцией и позволяет выводить информацию выше того места, где она была задана. Т.е. при формировании страницы из блока новости, в заголовок будет попадать информация из title и description текущей новости, а не стандартные параметры раздела.

Остается последний очень важный параметр — превью нашей записи. Изображение можно создать из детальной картинки записи, обрезав его под размер 1200х630 px и передать в параметр og:image. Но при включенном автокешировании данные перестанут передаваться, когда страница будет загружена из кеша и вся конструкция развалится. Для этого необходимо сделать следующее:

1. В папке с шаблоном детальной страницы создать файл result_modifier.php и в нем добавить параметры, которые будут передаваться после кеширования:

<?
// Создаем изображение для превью соц.сетей
$image_social = CFile::ResizeImageGet($arResult["DETAIL_PICTURE"], array('width'=>'1200', 'height'=>'630'), BX_RESIZE_IMAGE_EXACT, true);
$arResult["DETAIL_PICTURE"]["SOCIAL"] = $image_social["src"];

// Передаем данные в результат после кеширования
$this->__component->SetResultCacheKeys(array(
	"DETAIL_PICTURE"
));
?>

2. Далее добавляем файл component_epilog.php, который формируется уже после вывода информации из кеша и в нем добавляем код, задающий изображение:

<?
$APPLICATION->SetPageProperty("og:image", SITE_SERVER_PROTOCOL . SITE_SERVER_NAME . $arResult['DETAIL_PICTURE']['SOCIAL']);
?>

Вот таким способом мы можем добавить информацию о разметке Open Graph в шапку шаблона 1С-Битрикс.

Поделимся еще полезной ссылкой, которая позволяет проверить вид ссылок, которые будут публиковаться в Facebook и устранить ошибки:

https://developers.facebook.com/tools/debug/