Configuring Open Graph markup in 1C-Bitrix

Our company is engaged in the development, support and maintenance of Bitrix and Bitrix24 solutions of any complexity. From simple one-page sites to complex online stores, CRM systems with 1C and telephony integration. The experience of developers is confirmed by certificates from the vendor.
8+Years of work900+Completed projects100+In house employees19+Partners
Offered services
Showing 1 of 1 servicesAll 1626 services
Configuring Open Graph markup in 1C-Bitrix
Simple
~1 business day
FAQ
Our competencies:
Development stages
Latest works
  • image_website-b2b-advance_0.png
    B2B ADVANCE company website development
    1175
  • image_bitrix-bitrix-24-1c_fixper_448_0.png
    Website development for FIXPER company
    811
  • image_bitrix-bitrix-24-1c_development_of_an_online_appointment_booking_widget_for_a_medical_center_594_0.webp
    Development based on Bitrix, Bitrix24, 1C for the company Development of an Online Appointment Booking Widget for a Medical Center
    564
  • image_bitrix-bitrix-24-1c_mirsanbel_458_0.webp
    Development based on 1C Enterprise for MIRSANBEL
    747
  • image_crm_dolbimby_434_0.webp
    Website development on CRM Bitrix24 for DOLBIMBY
    655
  • image_crm_technotorgcomplex_453_0.webp
    Development based on Bitrix24 for the company TECHNOTORGKOMPLEKS
    976
Show more works

Open Graph Markup Setup for Bitrix CMS

Open Graph — a protocol from Facebook (Meta) that all major social networks and messengers adopted. When user shares a link on VKontakte, Telegram or WhatsApp, platform reads OG tags and forms preview: title, description, image. Without these tags, preview is formed arbitrarily — usually incorrectly.

Basic Tag Set

Minimal OG tag set for product:

<meta property="og:type"        content="product">
<meta property="og:title"       content="Product Name">
<meta property="og:description" content="Short description for social media">
<meta property="og:image"       content="https://your-site.ru/upload/iblock/abc/image.jpg">
<meta property="og:url"         content="https://your-site.ru/catalog/section/element/">
<meta property="og:site_name"   content="Store Name">

For articles and blog pages og:type = article. For homepage — website.

Implementation in Component Template

In bitrix:catalog.element template, add tag output via $APPLICATION->AddHeadString():

$title   = htmlspecialchars($arResult['NAME']);
$desc    = htmlspecialchars(strip_tags($arResult['PREVIEW_TEXT'] ?: $arResult['DETAIL_TEXT']));
$desc    = mb_substr($desc, 0, 200);
$imgSrc  = $arResult['DETAIL_PICTURE']['SRC'] ?? $arResult['PREVIEW_PICTURE']['SRC'] ?? '';
$imgFull = (!empty($imgSrc)) ? 'https://' . $_SERVER['HTTP_HOST'] . $imgSrc : '';
$url     = 'https://' . $_SERVER['HTTP_HOST'] . $arResult['DETAIL_PAGE_URL'];

$APPLICATION->AddHeadString('<meta property="og:type" content="product">');
$APPLICATION->AddHeadString('<meta property="og:title" content="' . $title . '">');
$APPLICATION->AddHeadString('<meta property="og:description" content="' . $desc . '">');
$APPLICATION->AddHeadString('<meta property="og:url" content="' . $url . '">');

if ($imgFull) {
    $APPLICATION->AddHeadString('<meta property="og:image" content="' . $imgFull . '">');
    $APPLICATION->AddHeadString('<meta property="og:image:width" content="1200">');
    $APPLICATION->AddHeadString('<meta property="og:image:height" content="630">');
}

AddHeadString() adds string to page <head> — Bitrix automatically outputs everything added this way when calling $APPLICATION->ShowHead() in site template.

Twitter Cards

Twitter/X uses its own set of twitter:* tags. Added alongside OG tags:

$APPLICATION->AddHeadString('<meta name="twitter:card" content="summary_large_image">');
$APPLICATION->AddHeadString('<meta name="twitter:title" content="' . $title . '">');
$APPLICATION->AddHeadString('<meta name="twitter:description" content="' . $desc . '">');
$APPLICATION->AddHeadString('<meta name="twitter:image" content="' . $imgFull . '">');

Image Requirements

  • Minimum size: 200×200 px, optimal: 1200×630 px (1.91:1 ratio).
  • Format: JPEG or PNG. WebP not supported everywhere.
  • File size: up to 8 MB (Facebook limit).
  • HTTPS: image must be accessible via HTTPS, otherwise platforms won't show preview.

For Bitrix: if product main image is vertical (portrait), create separate OG image via additional property OG_IMAGE of type "File" and use in markup.

Debugging OG Tags

  • Facebook Sharing Debugger: developers.facebook.com/tools/debug/ — shows how Facebook sees page, forces cache update.
  • Telegram: simply send link to @TelegramBotInspector bot or any chat — Telegram shows preview.
  • VKontakte: vk.com/dev/pages_debugger — similar debugger.

Implementation Timeline

Setting up Open Graph markup for product card, catalog sections, static pages — 2–4 hours.

1C Bitrix presentation1C Bitrix24 presentation1C Enterprise presentation