OpenGraph - микроразметка для социальных сетей

Open Graph - это протокол, позволяющий веб-страницам становиться "богаче" при их представлении в социальных сетях. Фактически, он позволяет контролировать, какие данные (изображения, заголовки, описания) показываются при делении ссылки на ваш сайт в соцсетях. Важно заметить, что, хотя Open Graph был разработан Facebook, он активно используется и другими платформами, например, LinkedIn и Twitter.

<!-- og:title: Заголовок до 90 символов -->
<meta property="og:title" content="Заголовок страницы" />

<!-- og:description: Описание до 200 символов -->
<meta property="og:description" content="Краткое описание страницы" />

<!-- og:image: Лучше всего 1200x630px, не более 5 МБ -->
<meta property="og:image" content="https://example.com/image.jpg" />

<!-- og:url: Постоянный URL страницы -->
<meta property="og:url" content="https://example.com/page" />

<!-- og:type: 'website' или 'article' -->
<meta property="og:type" content="website" />

<!-- og:locale: Локализация, например 'ru_RU' -->
<meta property="og:locale" content="ru_RU" />

<!-- og:site_name: Название сайта -->
<meta property="og:site_name" content="Название сайта" />

Проверить правильность заполнения микроразметки можно у валидатора Яндекса.

Нужно учитывать, что если мы подключаем в битриксе комплексный компонент, то разметка детальной страницы должна прописываться внутри шаблона.

Для components/bitrix/catalog или news в:

news.php
section.php
element.php

Теги Opengraph должны быть внутри тега HEAD

Телеграм, например, не увидит микроразметку, если она будет в теге body. Чтобы перенести теги в раздел Head из шаблона, их нужно обернуть в специальные теги:


//обязательно укажите это в header.php, внутри тега head. Так Битрикс поймёт куда перемещать микроразметку
<head>
<?php $APPLICATION->ShowViewContent('head_open_graph');?>
</head>

<?php 
// далее в шаблоне:
$this->SetViewTarget('head_open_graph');
// теги микроразметки пишутся тут
$this->EndViewTarget(); 
?>

Не рекомендую писать микроразметку внутри template.php, так как эта обертка, скорее всего, там работать не будет, особенно при включенном кешировании.

Пример кода микроразметки Opengraph для section.php в 1С-Битрикс

Все сводится к тому, что нам необходимо получить данные через API запрос к Битриксу. И затем вывести микроразметку в head.


<?php
// Получение свойств раздела для OpenGraph
$arFilter = array(
           "IBLOCK_ID" => $arParams["IBLOCK_ID"], // ID инфоблока
           "ID" => $arResult["VARIABLES"]["SECTION_ID"] // ID раздела
);
$arSelect = array(
    "NAME", // название раздела
    "UF_NAME", // пользовательское свойство названия раздела (необязательно)
    "PICTURE", // картинка раздела
    "DETAIL_PICTURE", //детальная картинка раздела
    "UF_META_TITLE", // Title - пользовательское свойство
    "UF_META_DESCRIPTION" // Description - пользовательское свойство описания раздела);

$rsResult = CIBlockSection::GetList(array("SORT" => "ASC"), $arFilter, false, $arSelect);

while ($ob = $rsResult->GetNext()) {
   // Установка заголовка из пользовательского поля, если оно заполнено, иначе - название раздела  
   $arResult['OG_SECTION']['TITLE'] = $ob["UF_META_TITLE"] != '' ? $ob["UF_META_TITLE"] : $ob["NAME"]; // Установка изображения для OpenGraph 

   if ($ob["DETAIL_PICTURE"] != '') { 
       $FILE = CFile::GetFileArray($ob["DETAIL_PICTURE"]); $arResult['OG_SECTION']['PICTURE'] = "https://site.com".$FILE["SRC"]; 
   } elseif ($ob["PICTURE"] != ''){
       $FILE = CFile::GetFileArray($ob["PICTURE"]); 
       $arResult['OG_SECTION']['PICTURE'] = "https://site.com".$FILE["SRC"]; 
   } else { 
      $arResult['OG_SECTION']['PICTURE'] = "https://site.com/images/logo.png"; 
   } 
} 

// Начало блока OpenGraph в шапке страницы 
$this->SetViewTarget('head_open_graph'); ?> 
<meta name="twitter:card" content="summary_large_image" /> 
<meta property="og:title" content="<?=$arResult['OG_SECTION']['TITLE']?>"/> 
<meta property="og:description" content="<?=$arResult['OG_SECTION']['DESCRIPTION']?>"/> 
<meta property="og:image" content="<?=$arResult['OG_SECTION']['PICTURE']?>"/> 
<meta property="og:url" content="<?='https://site.com'.$_SERVER['REQUEST_URI']?>"/>
<meta property="og:type" content="product"/> <meta property="og:locale" content="ru_RU"/> 
<meta property="og:site_name" content="Описание раздела"/> 
<?php // Закрытие блока OpenGraph 
$this->EndViewTarget(); ?>

Комментарии