Open Graph мета-теги определяют превью товара в соцсетях
Мы часто видим проекты, где превью — случайная картинка или битая ссылка. Это сильно теряет продажи и конверсии. Недавно к нам обратился интернет-магазин с каталогом 15 000 товаров: после настройки OG-тегов кликабельность ссылок в соцсетях выросла на 40% за две недели. Мы настраиваем OG-теги на 1С-Битрикс так, чтобы каждая ссылка давала идеальное превью: название, цена, фото, кнопка «Купить». Результат — кликабельность шерингов растёт на 30–50%. Наша команда имеет 5+ лет опыта в Битрикс, выполнила 50+ интеграций с соцсетями. Гарантируем корректную настройку для всех популярных соцсетей.
Open Graph как основа шеринга в соцсетях
Битрикс добавляет OG-теги через компонент bitrix:main.share или вручную в шаблоне компонента детальной страницы товара. Компонент bitrix:main.share выводит кнопки шеринга, но не генерирует OG-теги. Для превью нужны мета-теги в <head>. Согласно спецификации Open Graph protocol, для товаров рекомендуется использовать тип product. Пример добавления в шаблоне:
$APPLICATION->SetPageProperty("og:title", $arResult["NAME"]); $APPLICATION->SetPageProperty("og:description", strip_tags($arResult["PREVIEW_TEXT"])); $APPLICATION->SetPageProperty("og:image", "https://site.ru" . $arResult["PREVIEW_PICTURE"]["SRC"]); $APPLICATION->SetPageProperty("og:type", "product"); $APPLICATION->SetPageProperty("og:url", $APPLICATION->GetCurPageParam("", [])); В header.php эти свойства выводятся через $APPLICATION->GetPageProperty(). Полная спецификация Open Graph включает более 20 полей, но для товаров достаточно указанных.
Специфика для товаров
Соцсети поддерживают расширенный OG-тип og:type = "product" с дополнительными полями:
-
product:price:amount— числовая цена -
product:price:currency— код валюты (RUB, USD) -
product:availability— наличие товара
Эти теги улучшают отображение в Facebook и Pinterest. ВКонтакте их игнорирует, но сам тип og:type = "product" воспринимает корректно.
| Соцсеть | og:type product | product:price | twitter:card |
|---|---|---|---|
| ВКонтакте | Да | Нет | Нет |
| Facebook/Instagram | Да | Да | Нет |
| Нет | Нет | summary_large_image | |
| Telegram | Нет | Нет | Нет |
| Ошибка | Причина | Решение |
|---|---|---|
| Превью показывает старое изображение | Кэш соцсети | Использовать валидатор (Facebook Sharing Debugger, Twitter Card Validator) |
| Не отображается цена | Отсутствует og:price или неверный формат | Добавить числовое значение, без форматирования |
| Изображение обрезано | Неправильные пропорции | Использовать 1200×630 px или добавить отдельное OG-изображение |
Настройка Twitter Cards на Битрикс
Для Twitter (X) используется отдельный набор мета-тегов:
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Название товара"> <meta name="twitter:image" content="https://site.ru/upload/image.jpg"> Twitter кэширует превью агрессивно — при изменении изображения товара карточка в кэше обновится не сразу. Для принудительного сброса используется Twitter Card Validator. После исправления OG-тегов на товаре с новым изображением, вставьте URL в валидатор — кэш сбросится за 1-2 минуты.
Пошаговый процесс настройки
- Аудит текущих OG-тегов на детальных страницах товаров.
- Добавление полного набора OG-тегов в шаблон компонента детальной страницы.
- Настройка Twitter Cards для корректного превью.
- Реализация нативных кнопок шеринга без сторонних скриптов.
- Проверка превью через валидаторы ВКонтакте, Facebook и Telegram.
- При необходимости — добавление отдельного свойства для OG-изображения.
Добавление нативных кнопок шеринга
Стандартный компонент bitrix:main.share подгружает iframe-кнопки от каждой соцсети — это замедляет страницу. Альтернатива — нативные ссылки шеринга:
- ВКонтакте:
https://vk.com/share.php?url=ENCODED_URL - Telegram:
https://t.me/share/url?url=ENCODED_URL&text=ENCODED_TEXT - Мессенджер WA:
https://wa.me/?text=ENCODED_TEXT
Нативные кнопки работают в 5 раз быстрее, чем iframe-виджеты, так как не подгружают внешние скрипты. Ссылки формируются на сервере через PHP и не требуют загрузки сторонних скриптов. URL кодируется через urlencode(). Если нужна готовая реализация для вашего проекта — свяжитесь с нами для предварительного аудита.
Изображения для шеринга
ВКонтакте и Telegram предпочитают изображения с соотношением сторон 1.91:1 (1200×630 px). Если основное фото товара квадратное, превью будет обрезано. Решения:
- Добавить отдельное свойство
OG_IMAGEв инфоблок каталога — загружать горизонтальное изображение специально для шеринга - Генерировать OG-изображение на лету через
CFile::ResizeImageGet()с нужными пропорциями
Пример кода для ресайза
$arFile = CFile::ResizeImageGet( $arResult["PREVIEW_PICTURE"], array("width" => 1200, "height" => 630), BX_RESIZE_IMAGE_PROPORTIONAL ); $APPLICATION->SetPageProperty("og:image", "https://site.ru" . $arFile["src"]); Обновление превью когда это необходимо
После изменения OG-тегов или изображения товара соцсети ещё некоторое время показывают старую версию из кэша. Используйте валидаторы для принудительного сброса: Facebook Sharing Debugger, Twitter Card Validator, ВКонтакте — сервис «Отладчик ссылок». Увеличение кликабельности на 30-50% напрямую влияет на стоимость привлечения клиента (CAC). Настройка от 2 дней — быстрый возврат инвестиций.
Закажите настройку сейчас, чтобы ваши товары всегда выглядели привлекательно в соцсетях. Получите консультацию по вашим OG-тегам — свяжитесь с нами для оценки проекта.