Налаштування Open Graph розмітки 1С-Бітрікс

Наша компанія займається розробкою, підтримкою та обслуговуванням рішень на Бітрікс та Бітрікс24 будь-якої складності. Від простих односторінкових сайтів до складних інтернет-магазинів, CRM систем з інтеграцією 1С та телефонії. Досвід розробників підтверджено сертифікатами від вендора.
8+Років на ринку900+Реалізованих проектів100+Розробників у штаті19+Партнерів
Пропоновані послуги
Показано 1 з 1 послугУсі 1626 послуг
Налаштування Open Graph розмітки 1С-Бітрікс
Проста
~1 робочий день
Часті питання

Наші компетенції:

Етапи розробки

Останні роботи

  • image_website-b2b-advance_0.png
    Розробка сайту компанії B2B ADVANCE
    1262
  • image_bitrix-bitrix-24-1c_fixper_448_0.png
    Розробка веб-сайту для компанії ФІКСПЕР
    851
  • image_bitrix-bitrix-24-1c_development_of_an_online_appointment_booking_widget_for_a_medical_center_594_0.webp
    Розробка на базі Бітрікс, Бітрікс24, 1С для компанії Development of an Online
    585
  • image_bitrix-bitrix-24-1c_mirsanbel_458_0.webp
    Розробка на базі 1С Підприємство для компанії МИРСАНБЕЛ
    751
  • image_crm_dolbimby_434_0.webp
    Розробка сайту на CRM Бітрікс24 для компанії DOLBIMBY
    657
  • image_crm_technotorgcomplex_453_0.webp
    Розробка на базі Бітрікс24 для компанії ТЕХНОТОРГКОМПЛЕКС
    989
Показати більше робіт

Налаштування Open Graph розмітки для Bitrix CMS

Open Graph — протокол Facebook (Meta), який підхопили всі великі соцмережі та месенджери. Коли користувач ділиться посиланням ВКонтакте, Telegram або WhatsApp, платформа читає OG-теги та формує превью: заголовок, опис, зображення. Без цих тегів превью формується довільно — частіше за все неправильно.

Базовий набір тегів

Мінімальний набір OG-тегів для товару:

<meta property="og:type"        content="product">
<meta property="og:title"       content="Назва товару">
<meta property="og:description" content="Короткий опис для соцмереж">
<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="Назва магазину">

Для статей та сторінок блогу og:type = article. Для головної сторінки — website.

Реалізація у шаблоні компонента

У шаблоні bitrix:catalog.element додаємо вивід тегів через $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() додає рядок у <head> сторінки — Bitrix автоматично виводить все додане цим методом при виклику $APPLICATION->ShowHead() у шаблоні сайта.

Twitter Cards

Twitter/X використовує власний набір тегів twitter:*. Додаються поруч з OG-тегами:

$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 . '">');

Вимоги до зображення

  • Мінімальний розмір: 200×200 px, оптимальний: 1200×630 px (співвідношення 1.91:1).
  • Формат: JPEG або PNG. WebP підтримується не везде.
  • Розмір файлу: до 8 МБ (обмеження Facebook).
  • HTTPS: зображення має бути доступне за HTTPS, інакше платформи не покажуть превью.

Для Bitrix: якщо основне зображення товару вертикальне (портретне), створіть окреме OG-зображення через додаткову властивість OG_IMAGE типу "Файл" та використовуйте його у розмітці.

Відладка OG-тегів

  • Facebook Sharing Debugger: developers.facebook.com/tools/debug/ — показує, як Facebook бачить сторінку, та примусово оновлює кеш.
  • Telegram: просто надішліть посилання боту @TelegramBotInspector або будь-кому в чат — Telegram покаже превью.
  • ВКонтакте: vk.com/dev/pages_debugger — аналогічний дебаггер.

Терміни виконання

Налаштування Open Graph розмітки для карточки товару, розділів каталогу та статичних сторінок — 2–4 години.

1С Бітрікс презентація1С Бітрікс24 презентація1С Підприємство презентація