Как настроить Open Graph в 1С-Битрикс для автоматического формирования превью в соцсетях

При публикации ссылки на новость сайта в социальных сетях (ВКонтакте, Telegram и др.) важно, чтобы автоматически подгружались нужный заголовок, описание и изображение. Без специальной настройки система может выбрать случайную картинку или вообще не показать превью, что снижает привлекательность публикации. В 1С-Битрикс эта задача решается с помощью протокола Open Graph и небольших доработок шаблона компонента.

Что такое Open Graph

Open Graph — это протокол, который позволяет веб-страницам передавать социальным сетям структурированную информацию: заголовок, описание, изображение, тип материала. Для этого в HTML-код страницы добавляются специальные мета-теги с префиксом og:. Социальные сети при обработке ссылки считывают эти теги и формируют красивое превью.

Пошаговая настройка в 1С-Битрикс

Рассмотрим настройку на примере компонента news.detail, который отвечает за вывод детальной страницы новости. Аналогичным образом можно настроить любой другой компонент (статьи, блоги, каталог).

Шаг 1. Создаем файл result_modifier.php

В папке шаблона компонента (например, /bitrix/templates/ваш_шаблон/components/bitrix/news.detail/.default/) создайте файл result_modifier.php и добавьте в него следующий код:

<?php
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();

// Передаём ключи результата в component_epilog.php
$this->__component->SetResultCacheKeys(array(
    "NAME",
    "PREVIEW_TEXT",
    "PREVIEW_PICTURE"
));
?>

Этот код сохраняет значения названия, текста анонса и изображения новости, чтобы их можно было использовать в файле component_epilog.php.

Шаг 2. Создаем файл component_epilog.php

В той же папке создайте файл component_epilog.php со следующим содержимым:

<?php
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();

// Добавляем мета-теги Open Graph в заголовок страницы
$APPLICATION->AddHeadString('<meta property="og:title" content="' . $arResult["NAME"] . '" />');
$APPLICATION->AddHeadString('<meta property="og:description" content="' . $arResult["PREVIEW_TEXT"] . '" />');
$APPLICATION->AddHeadString('<meta property="og:image" content="' . $arResult["PREVIEW_PICTURE"]["SRC"] . '" />');
?>

Здесь значения из $arResult подставляются в соответствующие мета-теги. Обратите внимание, что для поля PREVIEW_PICTURE необходимо указать путь к файлу изображения (SRC).

Шаг 3. Проверяем настройки компонента

Убедитесь, что в параметрах компонента news.detail выбрано поле «Картинка для анонса» в разделе «Источник данных». Это гарантирует, что изображение будет загружено в массив $arResult.

Шаг 4. Выводим строки заголовка в шаблоне сайта

Мета-теги, добавленные через AddHeadString(), появятся в коде страницы только в том случае, если в общем шаблоне сайта (файл header.php) присутствует вызов функции $APPLICATION->ShowHeadStrings() или $APPLICATION->ShowHead(). Проверьте, что такой вызов есть между тегами <head> вашего шаблона.

Проверка результата

После выполнения всех шагов откройте детальную страницу любой новости и посмотрите её исходный код (Ctrl+U). В разделе <head> должны появиться три мета-тега og:title, og:description, og:image с соответствующими значениями.

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

Возможные сложности и их решение

• Изображение не подгружается. Убедитесь, что ссылка на изображение абсолютная (начинается с http:// или https://). Если путь относительный, допишите в коде component_epilog.php протокол и домен, используя, например, CFrontController::GetDomainName() или константу $_SERVER['SERVER_NAME'].
• Длинный текст описания. Социальные сети могут обрезать описание до определённой длины. Рекомендуется укладываться в 200–300 символов.
• Теги не появляются в коде. Проверьте, что в файле component_epilog.php нет синтаксических ошибок, а сам файл вызывается (можно временно добавить в него die('test'); для проверки).

Заключение

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