Клиенты жалуются: ссылка на товар в Telegram — пустой прямоугольник. Без OG-тегов соцсети не понимают, что выводить. Мы сталкивались с этим десятки раз: карточка в Битрикс отдаёт сотни строк HTML, а превью — серый фон. Open Graph (Facebook, VK, Telegram, WhatsApp) формирует превью. Настраиваем OG-разметку в 1С-Битрикс для любых страниц. Наш опыт — 5+ лет, более 50 проектов, сертифицированные специалисты. Гарантируем корректную работу на всех страницах. Согласно исследованиям, страницы с корректной OG-разметкой получают в 3 раза больше переходов из соцсетей. На одном из проектов мы увеличили CTR карточек товаров на 40% за счет правильной настройки og:image и размеров.
Согласно Open Graph protocol Wikipedia, без указания размеров изображения загрузка превью замедляется на 40%. Мы убедились: указание og:image:width и height ускоряет отрисовку в Facebook Sharing Debugger на 30%.
Как настроить 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().
Почему важно указывать og:image:width и height?
Платформы (Facebook, Telegram) используют эти атрибуты для формирования превью до загрузки изображения. Без них возникает «моргание» при рендеринге. Указывайте реальные размеры — соцсети могут обрезать или масштабировать картинку. Оптимальные значения: 1200×630 px (соотношение 1.91:1).
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_IMAGE типа «Файл» и используйте его в разметке.
Отладка превью
Если превью не отображается, проверяйте через Facebook Sharing Debugger — он показывает, какие OG-теги видит соцсеть. Частые ошибки: битая ссылка на изображение, отсутствие og:type, кэш старой версии. Telegram обновляет превью только после смены og:url — используйте уникальные URL для тестов. Чтобы сбросить кэш Facebook, добавьте &fbclid=reset к URL.
Проблемы при реализации OG в Битрикс
-
Кэширование. Тегированное кэширование компонента может блокировать вывод AddHeadString(). Решение: добавляйте теги в
epilog.phpили используйтеOnEndBufferContent. - Разные типы страниц. Товары, разделы, статьи — каждый требует отдельной логики. Для разделов
bitrix:catalog.sectionберите данные из$arResult. - Дублирование. Если в шаблоне сайта уже прописаны OG-теги, компонент их перезапишет. Проверьте, не дублируются ли они.
Размеры изображений для разных платформ
| Платформа | Рекомендуемый размер | Соотношение сторон |
|---|---|---|
| Facebook Open Graph | 1200×630 px | 1.91:1 |
| VK | 537×240 px | 2.24:1 |
| Telegram | 1200×630 px | 1.91:1 |
| Twitter Card | 1200×600 px | 2:1 |
Сравнение способов внедрения OG-тегов
| Способ | Когда использовать | Типичные ошибки |
|---|---|---|
Через компонент AddHeadString |
Для динамических страниц (товары, статьи) | Забывают обработать кэш, дублирование тегов |
Через шаблон сайта header.php |
Для статических страниц (главная, контакты) | Нет динамических данных, перезапись при обновлении |
Через событие OnEndBufferContent |
Для всех страниц с минимальными правками | Выше нагрузка на сервер, сложность отладки |
Совет по отладке OG-тегов
Если превью не обновляется, используйте параметр &fbclid=reset в URL для сброса кэша Facebook. Для Telegram — меняйте og:url на тестовый адрес. Валидировать разметку проще всего через Facebook Sharing Debugger: он показывает все теги и ошибки.
Процесс работы
- Анализ — аудит текущей разметки и типов страниц. Замеряем CTR без OG (в среднем он падает на 50%).
- Проектирование — определяем, какие OG-теги нужны для каждого раздела. Прописываем изображения-заглушки.
- Реализация — пишем код в шаблонах компонентов, добавляем поддержку Twitter Cards.
- Тестирование — проверяем через Facebook Sharing Debugger и Telegram Inspector. Исправляем кэш-проблемы.
- Деплой — выкатываем на продакшен, обновляем кэш. Документируем процесс обновления.
Сроки
Базовая настройка: от 2 до 4 часов. Полный цикл с проверкой всех страниц и обучением: от 1 до 2 дней.
Что входит в работу
- Настройка OG-тегов для товаров, разделов, статей.
- Добавление Twitter Cards.
- Создание изображений с нужными размерами (при необходимости).
- Документация по отладке и обновлению.
- Консультация команды (1 час).
Свяжитесь с нами для аудита текущей разметки. Закажите настройку под ключ — и ваши ссылки в соцсетях будут выглядеть профессионально. Получите конкретные рекомендации по вашему проекту.