OG-теги в 1С-Бітрікс: налаштування розмітки для соцмереж
Клієнти скаржаться: посилання на товар у 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 година).
Зв'яжіться з нами для аудиту поточної розмітки. Замовте налаштування під ключ — і ваші посилання в соцмережах виглядатимуть професійно. Отримайте конкретні рекомендації щодо вашого проєкту.