При публикации ссылки на новость сайта в социальных сетях (ВКонтакте, 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С-Битрикс занимает всего несколько минут, но существенно улучшает внешний вид публикаций в социальных сетях. Автоматическая подстановка заголовка, описания и изображения избавляет от ручного труда и делает ссылки на ваш сайт более привлекательными для пользователей.
