Настройка 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
    1173
  • image_bitrix-bitrix-24-1c_fixper_448_0.png
    Разработка веб-сайта для компании ФИКСПЕР
    811
  • 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 Appointment Booking Widget for a Medical Center
    564
  • image_bitrix-bitrix-24-1c_mirsanbel_458_0.webp
    Разработка на базе 1С Предприятие для компании МИРСАНБЕЛ
    745
  • image_crm_dolbimby_434_0.webp
    Разработка сайта на CRM Битрикс24 для компании DOLBIMBY
    655
  • image_crm_technotorgcomplex_453_0.webp
    Разработка на базе Битрикс24 для компании ТЕХНОТОРГКОМПЛЕКС
    976
Показать больше работ

Настройка Open Graph разметки 1С-Битрикс

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> страницы — Битрикс автоматически выводит всё добавленное этим методом при вызове $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, иначе платформы не покажут превью.

Для Битрикс: если основное изображение товара вертикальное (портретное), создайте отдельное 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С Предприятие презентация