Настройка шеринга товаров в социальные сети 1С-Битрикс
Когда пользователь делится карточкой товара ВКонтакте или в Telegram, соцсеть делает запрос к странице и вытаскивает превью — заголовок, описание, изображение. Это работает через Open Graph (OG) мета-теги. Если они не заданы или заданы неправильно, превью генерируется произвольно: берётся случайная картинка со страницы или вообще ничего не отображается.
Open Graph в Битрикс
Битрикс добавляет OG-теги через компонент bitrix:main.share или вручную в шаблоне компонента детальной страницы товара. Компонент bitrix:main.share выводит кнопки шеринга и принимает параметры:
-
TEXT— текст публикации (обычноNAMEтовара) -
LINK— канонический URL страницы -
IMAGE— полный URL изображения (минимум 200×200 px) -
NOINDEX— скрывать ли кнопки от индексации
Для корректного превью важнее не кнопки шеринга, а мета-теги в <head>. В шаблоне header.php или в компоненте детальной страницы добавляются:
$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().
Специфика для товаров
Соцсети поддерживают расширенный OG-тип og:type = "product" с дополнительными полями:
-
product:price:amount— числовая цена -
product:price:currency— код валюты (RUB, USD) -
product:availability— наличие товара
Эти теги улучшают отображение в Facebook и Pinterest. ВКонтакте их игнорирует, но сам тип og:type = "product" воспринимает корректно.
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.
Кнопки шеринга без внешних скриптов
Стандартный компонент bitrix:main.share подгружает iframe-кнопки от каждой соцсети — это замедляет страницу. Альтернатива — нативные ссылки шеринга:
- ВКонтакте:
https://vk.com/share.php?url=ENCODED_URL - Telegram:
https://t.me/share/url?url=ENCODED_URL&text=ENCODED_TEXT - WhatsApp:
https://wa.me/?text=ENCODED_TEXT
Ссылки формируются на сервере через PHP и не требуют загрузки сторонних скриптов. URL кодируется через urlencode().
Изображения для шеринга
ВКонтакте и Telegram предпочитают изображения с соотношением сторон 1.91:1 (1200×630 px). Если основное фото товара квадратное, превью будет обрезано. Решения:
- Добавить отдельное свойство
OG_IMAGEв инфоблок каталога — загружать горизонтальное изображение специально для шеринга - Генерировать OG-изображение на лету через
CFile::ResizeImageGet()с нужными пропорциями
Что входит в настройку
- Аудит текущих OG-тегов на детальных страницах товаров
- Добавление полного набора OG-тегов в шаблон компонента
- Настройка Twitter Cards для корректного превью
- Реализация нативных кнопок шеринга без сторонних скриптов
- Проверка превью через валидаторы ВКонтакте, Facebook и Telegram
- При необходимости — добавление отдельного свойства для OG-изображения







