Open Graph в 1С-Битрикс — настройка микроразметки для Telegram, VK и соцсетей

Когда пользователь отправляет ссылку на ваш сайт в Telegram, VK, Facebook, LinkedIn или другую социальную сеть, сервис автоматически пытается определить заголовок страницы, описание и изображение. Если Open Graph не настроен, карточка ссылки может выглядеть не лучшим образом: без картинки, с неправильным заголовком или вообще с первым попавшимся текстом со страницы.

Для решения этой задачи используется микроразметка Open Graph. Она позволяет явно указать, какие данные необходимо использовать при формировании карточки ссылки. Несмотря на то, что Open Graph был разработан Facebook, сегодня его поддерживает большинство популярных социальных сетей, мессенджеров и других сервисов.

Основные теги Open Graph

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

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

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

<!-- Абсолютная ссылка на изображение -->
<meta property="og:image" content="https://example.com/image.jpg">

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

<!-- Тип страницы -->
<meta property="og:type" content="website">

<!-- Локализация -->
<meta property="og:locale" content="ru_RU">

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

<!-- Карточка Twitter -->
<meta name="twitter:card" content="summary_large_image">

Для большинства сайтов этого набора уже более чем достаточно.

Почему Open Graph часто не работает в Битриксе

Самая распространенная ошибка заключается вовсе не в самих тегах. Telegram, VK и большинство других сервисов анализируют только содержимое тега <head>. Если вывести микроразметку внутри <body>, она будет полностью проигнорирована.

Поэтому при использовании комплексных компонентов Битрикса Open Graph необходимо формировать непосредственно внутри шаблонов компонентов, а затем переносить в раздел <head>.

Если используется комплексный компонент catalog или news, микроразметка обычно размещается в файлах:

news.php
section.php
element.php

Перенос микроразметки в HEAD

Для начала необходимо добавить специальную область вывода в файл header.php.

<head>

<?php
$APPLICATION->ShowHead();
$APPLICATION->ShowViewContent('head_open_graph');
?>

</head>

После этого внутри любого шаблона компонента можно вывести Open Graph следующим образом:

<?php
$this->SetViewTarget('head_open_graph');
?>

<meta property="og:title" content="Заголовок страницы">
<meta property="og:description" content="Описание страницы">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">

<?php
$this->EndViewTarget();
?>

Битрикс автоматически перенесет содержимое между SetViewTarget() и EndViewTarget() в то место шаблона, где расположен вызов $APPLICATION->ShowViewContent('head_open_graph').

Не рекомендую размещать Open Graph непосредственно в template.php шаблона сайта. При включенном кешировании велика вероятность получить данные от предыдущей страницы или столкнуться с тем, что теги вообще не попадут в раздел <head>.

Пример Open Graph для section.php

В примере ниже получаем данные раздела инфоблока через API Битрикса и автоматически формируем необходимые Open Graph-теги.

<?php

$arFilter = [
    "IBLOCK_ID" => $arParams["IBLOCK_ID"],
    "ID" => $arResult["VARIABLES"]["SECTION_ID"]
];

$arSelect = [
    "NAME",
    "PICTURE",
    "DETAIL_PICTURE",
    "UF_META_TITLE",
    "UF_META_DESCRIPTION"
];

$rsSection = CIBlockSection::GetList(
    ["SORT" => "ASC"],
    $arFilter,
    false,
    $arSelect
);

if ($section = $rsSection->GetNext()) {

    $title = $section["UF_META_TITLE"] ?: $section["NAME"];

    $description = $section["UF_META_DESCRIPTION"];
    if (!$description) {
        $description = $APPLICATION->GetPageProperty("description");
    }

    if ($section["DETAIL_PICTURE"]) {
        $file = CFile::GetFileArray($section["DETAIL_PICTURE"]);
    } elseif ($section["PICTURE"]) {
        $file = CFile::GetFileArray($section["PICTURE"]);
    }

    $image = isset($file)
        ? "https://" . $_SERVER["HTTP_HOST"] . $file["SRC"]
        : "https://" . $_SERVER["HTTP_HOST"] . SITE_TEMPLATE_PATH . "/images/logo.png";

    $url = "https://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];

    $this->SetViewTarget("head_open_graph");
?>

<meta property="og:title" content="<?=$title?>">
<meta property="og:description" content="<?=$description?>">
<meta property="og:image" content="<?=$image?>">
<meta property="og:url" content="<?=$url?>">
<meta property="og:type" content="website">
<meta property="og:locale" content="ru_RU">
<meta property="og:site_name" content="<?=htmlspecialcharsbx(SITE_SERVER_NAME)?>">
<meta name="twitter:card" content="summary_large_image">

<?php
    $this->EndViewTarget();
}
?>

Проверка микроразметки

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

Если Telegram или VK продолжают показывать старое изображение или описание, скорее всего проблема связана с кешем самой социальной сети. Обычно он обновляется не сразу, поэтому иногда приходится немного подождать.

Также не забывайте, что ссылка в og:image должна быть абсолютной, а само изображение должно быть доступно без авторизации и запрещающих правил в robots.txt.

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

Если сайт работает на 1С-Битрикс, рекомендую сразу реализовать автоматическое формирование Open Graph для главной страницы, разделов каталога, карточек товаров и статей блога. Тогда каждая ссылка будет выглядеть корректно независимо от типа страницы.

Настройка Open Graph в 1С-Битрикс для Telegram, VK и социальных сетей