Open Graph в Битрикс: превью ссылок в соцсетях

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

Если разметки нет, карточка собирается наугад: заголовком станет случайный текст, картинкой — первое попавшееся изображение или логотип. Разберём, как задать разметку в 1С-Битрикс и почему проверять её нужно не глазами, а отправкой тестовой ссылки.

Из чего состоит разметка

Тег	Что задаёт	Обязательный
`og:title`	Заголовок карточки	Да
`og:description`	Описание под заголовком	Да
`og:image`	Изображение	Да
`og:url`	Канонический адрес страницы	Да
`og:type`	Тип: `website`, `article`, `product`	Желательно
`og:site_name`	Название сайта	Желательно
`og:image:width` / `height`	Размеры изображения	Желательно

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

Требования к изображению

Картинка — то, ради чего разметку в основном и делают. Требования простые, но их регулярно нарушают:

Размер 1200×630 пикселей. Это соотношение 1,91:1, под которое свёрстаны карточки большинства сервисов.
Абсолютный адрес с протоколом. Относительный путь не работает — нужен полный https://site.ru/upload/og.jpg.
Изображение доступно без авторизации. Картинка за закрытым разделом не загрузится.
Вес до нескольких мегабайт. Слишком тяжёлые не подхватываются.
Текст крупный. В ленте карточка отображается небольшой — мелкие надписи не читаются.

Нужна помощь с Битрикс?

Вывод разметки в шаблоне

Самый простой вариант — задать значения по умолчанию в header.php и переопределять их на конкретных страницах:

<?php
// значения по умолчанию
$ogTitle = $APPLICATION->GetTitle();
$ogDesc  = $APPLICATION->GetProperty('description');
$ogImage = SITE_TEMPLATE_PATH . '/assets/img/og-default.jpg';

// переопределение со страницы или из компонента
if ($custom = $APPLICATION->GetProperty('og_image')) {
    $ogImage = $custom;
}

$protocol = \Bitrix\Main\Context::getCurrent()->getRequest()->isHttps() ? 'https' : 'http';
$host     = $_SERVER['HTTP_HOST'];
$imageUrl = strpos($ogImage, 'http') === 0
    ? $ogImage
    : $protocol . '://' . $host . $ogImage;

$APPLICATION->AddHeadString('<meta property="og:type" content="website">', true);
$APPLICATION->AddHeadString('<meta property="og:title" content="' . htmlspecialcharsbx($ogTitle) . '">', true);
$APPLICATION->AddHeadString('<meta property="og:description" content="' . htmlspecialcharsbx($ogDesc) . '">', true);
$APPLICATION->AddHeadString('<meta property="og:image" content="' . $imageUrl . '">', true);
$APPLICATION->AddHeadString('<meta property="og:url" content="' . $protocol . '://' . $host . $APPLICATION->GetCurPage() . '">', true);
?>

Экранирование через htmlspecialcharsbx() обязательно: кавычка в заголовке товара сломает разметку, и превью не соберётся.

Карточка товара

Для товаров логично использовать изображение самого товара. Приводим его к нужному размеру:

<?php

$resized = CFile::ResizeImageGet(
    $arResult['DETAIL_PICTURE']['ID'],
    ['width' => 1200, 'height' => 630],
    BX_RESIZE_IMAGE_PROPORTIONAL
);

if ($resized) {
    $APPLICATION->SetPageProperty('og_image', $resized['src']);
}

Механика изменения размеров разобрана в статье CFile::ResizeImageGet в Битрикс.

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

Если используется SEO-модуль

Стандартные средства оптимизации часто добавляют разметку сами. Прежде чем писать свой код, проверьте, не выводится ли она уже — иначе на странице окажется по два тега og:title, и сервисы возьмут произвольный.

Отдельная и очень распространённая ситуация: разметка формируется, но og:image остаётся пустым. Обычно причина в том, что источник изображения настроен как «по умолчанию», а само изображение по умолчанию не задано. Проверяется это за минуту — открытием исходного кода страницы. Про остальные настройки есть статья SEO-модуль Битрикс.

Как проверить

Смотреть исходный код недостаточно: важно, как разметку увидят сами сервисы. Порядок проверки:

Откройте исходный код страницы и найдите теги og:.
Убедитесь, что адрес картинки абсолютный и открывается в браузере.
Отправьте ссылку самому себе в мессенджер — карточка должна собраться.
Проверьте несколько типов страниц: главную, каталог, карточку товара, статью.
Убедитесь, что тегов не по два.
Проверьте страницу с кавычкой в заголовке.

Кеш превью

Важная особенность: соцсети и мессенджеры кешируют карточку. Если вы поправили разметку, а превью осталось старым — это нормально.

У крупных сервисов есть инструменты отладки, позволяющие сбросить кеш для конкретного адреса. Если такого инструмента нет, обходной приём — добавить к ссылке параметр: для сервиса это будет новый адрес.

Частые ошибки

Относительный путь к картинке. Превью не появляется вообще.
og:image пустой. Карточка выходит без изображения и почти не привлекает внимания.
Дублирование тегов. Разметку выводят и модуль, и шаблон.
Одна картинка на весь сайт. Все ссылки выглядят одинаково, и по превью не понять, о чём страница.
Кавычки не экранированы. Разметка ломается на части товаров.
Проверка только исходного кода. Теги на месте, но реальная карточка не собирается.

Итог

Open Graph определяет, как выглядит ссылка на ваш сайт в мессенджерах и соцсетях. Минимальный набор — заголовок, описание, изображение и адрес; картинка размером 1200×630 с абсолютным адресом.

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

Теги: SEO Настройки Шаблоны