Протокол Open Graph контролирует анонс, который формируется при добавлении ссылки в социальные сети(Вконтакте, Facebook). С помощью мета тегов ему можно задавать картинки, заголовки, и описание и другие параметры.

Задача: Требуется установить на сайт протокол Open Graph, сайт написан на CMS Bitrix, настроить, так что бы корректно подгружались данные по детальной карточки товара, по категориям товара и главную страницу.

Подключение Open Graph для детальной карточки товаров. Для подключения протокола, требуется в шаблоне компоненты catalog.element.incatalog создать несколько файлов, во первых result_modifier.php. Указываем список ключей массива $arResult,которые должны будут закешироваться. Для доступа к данным массива в файле component_epilog.php.

$this->__component->SetResultCacheKeys(array(
   "NAME",
   "PREVIEW_TEXT",
   "PREVIEW_PICTURE"
));

Во вторых component_epilog.php и указать в нем следующие данные:

<?/**
* OpenGrap
*/
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED!==true)die();
use Bitrix\Main\Page\Asset;
if($arResult):

   Asset::getInstance()->addString('<meta property="og:title" content="'.$arResult['NAME'].'"/>');
   Asset::getInstance()->addString('<meta property="og:type" content="website"/>');
   Asset::getInstance()->addString('<meta property="og:image" content="http://www.mechta.kz'.$arResult['PROPERTIES']['PHOTO']['VALUE'][0].'"/>');
   Asset::getInstance()->addString('<meta property="og:image:width" content="968" />');
    Asset::getInstance()->addString('<meta property="og:image:height" content="504" />');
   Asset::getInstance()->addString('<meta property="og:site_name" content="'.GetMessage('F_MECHTA').'"/>');
   Asset::getInstance()->addString('<meta property="og:description" content="'.ucfirst($arResult['PREVIEW_TEXT']).'"/>');
endif?>

Подключение Open Graph для списка каталога товаров.

result_modifier.php

/**
 * OpenGrap
 */
$this->__component->SetResultCacheKeys(array(
   "NAME"
));

$cp = $this->__component; // объект компонента

if (is_object($cp))
{
   $cp->arResult['ITEMS'];
   $cp->SetResultCacheKeys(array('ITEMS'));
   // сохраним их в копии arResult, с которой работает шаблон
   $arResult['ITEMS'] = $cp->arResult['ITEMS'];
}

component_epilog.php

<?/**
 * OpenGrap
 */
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED!==true)die();
use Bitrix\Main\Page\Asset;

if($arResult):
   Asset::getInstance()->addString('<meta property="og:title" content="'.$arResult['NAME'].'"/>');
   Asset::getInstance()->addString('<meta property="og:type" content="website"/>');

   foreach ($arResult['ITEMS'] as $key => $arItem){
      if($arItem['PROPERTIES']['PREVIEW']['VALUE'][0]){
         Asset::getInstance()->addString('<meta property="og:image" content="http://www.mechta.kz'.$arItem['PROPERTIES']['PREVIEW']['VALUE'][0].'" />');
         Asset::getInstance()->addString('<meta property="og:image:width" content="968" />');
         Asset::getInstance()->addString('<meta property="og:image:height" content="504" />');
      }
   }
   Asset::getInstance()->addString('<meta property="og:site_name" content="'.GetMessage('F_MECHTA').'"/>');
   Asset::getInstance()->addString('<meta property="og:description" content="'.$arResult['NAME'].'"/>');

endif?>

Подключение Open Graph для главной страницы. Загвоздка.. Пришлось закинуть в компоненту баннера главной страницы. Только component_epilog.php.

<?/**
* OpenGrap
*/
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED!==true)die();
use Bitrix\Main\Page\Asset;
if($arResult):
   Asset::getInstance()->addString('<meta property="og:title" content="'.GetMessage('F_MECHTA').'"/>');
   Asset::getInstance()->addString('<meta property="og:type" content="website"/>');
   Asset::getInstance()->addString('<meta property="og:image" content="http://www.mechta.kz/tmpl/img/logoopeng201x201.jpg"/>');
   Asset::getInstance()->addString('<meta property="og:image:width" content="201" />');
   Asset::getInstance()->addString('<meta property="og:image:height" content="201" />');
   Asset::getInstance()->addString('<meta property="og:site_name" content="'.GetMessage('F_MECHTA').'"/>');
   Asset::getInstance()->addString('<meta property="og:description" content="'.GetMessage('F_MECHTA').'"/>');
   Asset::getInstance()->addString('<meta property="og:url" content= "http://www.mechta.kz"/>');
endif
?>

Картинки должны быть не меньше 200x200px.

Для отображения картинки на Facebook обязательны параметры метатега  height и width.

Картинка подходящего размера 968×504px, рекомендованнын Фейсбуком 1200×630px.

Отладчик для проверки, удобен для отладки, тк. Фейсбук кеширует.