Configuring Product Sharing to Social Networks in 1C-Bitrix
When a user shares a product page on VKontakte or Telegram, the social network sends a request to the page and extracts a preview — the title, description, and image. This works via Open Graph (OG) meta tags. If they are missing or incorrectly defined, the preview is generated arbitrarily: a random image from the page is picked, or nothing is shown at all.
Open Graph in Bitrix
Bitrix adds OG tags via the bitrix:main.share component or manually in the detail page component template. The bitrix:main.share component renders sharing buttons and accepts parameters:
-
TEXT— publication text (usually the productNAME) -
LINK— canonical URL of the page -
IMAGE— full URL of the image (minimum 200×200 px) -
NOINDEX— whether to hide buttons from indexing
For a correct preview, what matters more than the sharing buttons are the meta tags in <head>. In the header.php template or in the detail page component, add:
$APPLICATION->SetPageProperty("og:title", $arResult["NAME"]);
$APPLICATION->SetPageProperty("og:description", strip_tags($arResult["PREVIEW_TEXT"]));
$APPLICATION->SetPageProperty("og:image", "https://site.com" . $arResult["PREVIEW_PICTURE"]["SRC"]);
$APPLICATION->SetPageProperty("og:type", "product");
$APPLICATION->SetPageProperty("og:url", $APPLICATION->GetCurPageParam("", []));
These properties are output in header.php via $APPLICATION->GetPageProperty().
Product-Specific Details
Social networks support the extended OG type og:type = "product" with additional fields:
-
product:price:amount— numeric price -
product:price:currency— currency code (RUB, USD) -
product:availability— product availability
These tags improve display on Facebook and Pinterest. VKontakte ignores them, but correctly interprets og:type = "product" itself.
Twitter Cards
For Twitter (X), a separate set of meta tags is used:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Product name">
<meta name="twitter:image" content="https://site.com/upload/image.jpg">
Twitter caches previews aggressively — when a product image changes, the cached card will not update immediately. The Twitter Card Validator is used to force a cache reset.
Sharing Buttons Without External Scripts
The standard bitrix:main.share component loads iframe-based buttons from each social network — this slows the page down. An alternative is native sharing links:
- VKontakte:
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
Links are constructed server-side in PHP and require no third-party scripts. The URL is encoded using urlencode().
Images for Sharing
VKontakte and Telegram prefer images with a 1.91:1 aspect ratio (1200×630 px). If the main product photo is square, the preview will be cropped. Solutions:
- Add a separate
OG_IMAGEproperty to the catalog info block — upload a landscape image specifically for sharing - Generate the OG image on the fly via
CFile::ResizeImageGet()with the required proportions
What Is Included in the Setup
- Audit of existing OG tags on product detail pages
- Adding the full set of OG tags to the component template
- Configuring Twitter Cards for correct previews
- Implementing native sharing buttons without third-party scripts
- Verifying previews using VKontakte, Facebook, and Telegram validators
- If needed — adding a separate property for the OG image

