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 година).
Зв'яжіться з нами для аудиту поточної розмітки. Замовте налаштування під ключ — і ваші посилання в соцмережах виглядатимуть професійно. Отримайте конкретні рекомендації щодо вашого проєкту.
Як SEO-налаштування Бітрікса впливає на трафік
Ми постійно зустрічаємо проекти, де модуль seo генерує title за шаблоном #ELEMENT_NAME# — купити в інтернет-магазині. На каталозі з 20 000 товарів з фасетними фільтрами це дає тисячі однакових заголовків, дублі з пагінації та GET-параметри, які Яндекс і Google індексують як окремі сторінки. Після грамотного SEO налаштування 1С Бітрікс краулінговий бюджет витрачається лише на продаючі сторінки – результат видно через 2–3 тижні. Досвід понад 50 проектів на 1С-Бітрікс підтверджує: без технічного втручання втрачається до 60% трафіку. Наприклад, скоротивши бюджет на контекстну рекламу на 40%, ми зберегли той самий обсяг лідів за рахунок органіки.
Чому розумний фільтр генерує 70% дублів і як це виправити
Компонент catalog.smart.filter створює URL з GET-параметрами: /catalog/?brand=nike&color=white&size=42. Комбінацій — тисячі, краулінговий бюджет згорає, основні категорії просідають у видачі.
Рішення — модуль SEO розумного фільтра (iblock.property.type + кастомні URL):
- Визначаємо комбінації, що просуваються: «кросівки Nike», «кросівки білі чоловічі», «кросівки до 5000 гривень». Ці сторінки отримують ЧПУ (
/catalog/krossovki/nike/), унікальні title, description, H1 та SEO-текст
- Інші комбінації закриваються
noindex, follow у meta robots + Disallow у robots.txt для параметричних URL
- Налаштування зберігаються в
b_iblock_section_property та кастомній таблиці SEO-правил — контент-менеджер керує з адмінки без розробника
Практика: для інтернет-магазину одягу ми відсікли 95% сміттєвих комбінацій, кількість проіндексованих сторінок зросла з 3 000 до 14 000 за місяць, а вартість залучення клієнта знизилася на 20%.
Мета-теги: три рівні опрацювання
Рівень 1 — шаблони в налаштуваннях інфоблоку
Налаштування → Інфоблоки → Типи інфоблоків → [інфоблок] → SEO. Змінні: {=this.Name}, {=parent.Name}, {=this.PreviewText}, {=this.Property.BRAND}. Формули різні для кожного інфоблоку:
- Одяг:
{=this.Property.BRAND} {=this.Name} — купити, ціна від {=this.Property.MIN_PRICE} грн.
- Обладнання:
{=this.Name} {=this.Property.ARTICLE} — характеристики, ціна, доставка
Рівень 2 — ручне опрацювання ключових сторінок
Головна, основні категорії, топ-30 товарів за трафіком. Ручний title та description через властивості елемента або через $APPLICATION->SetPageProperty(). Ці сторінки дають 60–80% органічного трафіку.
Рівень 3 — SEO-фільтри
Унікальні мета-теги для комбінацій розумного фільтра, що просуваються. Налаштовуються через кастомну таблицю або модулі aspro.seo / sotbit.seometa. Кожна комбінація отримує свій title, description, H1 та текстовий блок.
Як мікророзмітка Schema збільшує CTR в 1,5 рази
JSON-LD у <head> — впроваджуємо через component_epilog.php або кастомний компонент:
-
Product —
name, image, description, sku, brand, offers.price, offers.priceCurrency, offers.availability. Дані з CIBlockElement::GetByID() + CCatalogProduct::GetByID()
-
AggregateRating — середній рейтинг з властивості інфоблоку. Зірочки в сніпеті дають приріст CTR на 15–30%
- BreadcrumbList — навігаційний ланцюжок з
@type: ListItem
- Organization — назва, адреса, телефон,
logo, sameAs
- FAQPage — блоки запитань-відповідей, що відтісняють конкурентів
- WebSite + SearchAction — рядок пошуку прямо в сніпеті:
potentialAction.target веде на /search/?q={search_term_string}
Валідуйте розмітку через Google Rich Results Test та Яндекс.Вебмайстер. Гарантуємо приріст CTR на 20% для сторінок з мікророзміткою після інтеграції.
Технічне SEO-налаштування: ЧПУ, canonical, редиректи, sitemap
ЧПУ: де Бітрікс спотикається
Налаштування в urlrewrite.php та SEF_MODE компонентів. Типові проблеми:
- Надмірна вкладеність —
/catalog/odezhda/zhenskaya/platya/letniye/product-123/. Google рекомендує не більше трьох рівнів. Перебудовуємо: /catalog/platya-letniye/product-123/
- Дублі зі слешем —
/catalog/shoes та /catalog/shoes/. Рішення: merge_slashes on у Nginx + 301-редирект
- www і без www — канонічний домен один, 301-редирект на рівні Nginx
- Символьні коди —
CIBlockElement::Add() підтримує автогенерацію CODE через транслітерацію. Налаштування: b_iblock → FIELDS → CODE → TRANSLITERATION. Стандарт — ISO 9.
Canonical та боротьба з дублями
$APPLICATION->SetPageProperty("canonical", $url) у шаблонах компонентів. Правила:
- Пагінація: canonical першої сторінки на всі
?PAGEN_1=2, ?PAGEN_1=3
- Сортування:
?sort=price&order=asc → canonical без параметрів
- Фільтри: непросувані комбінації → canonical на батьківський розділ
-
hreflang для багатомовних сайтів — кожна версія посилається на всі інші + x-default
-
noindex, follow для технічних сторінок
301-редиректи при міграції
Переїзд з іншої CMS або реструктуризація — без 301-редиректів втрачається посилальна вага.
- Масові редиректи через таблицю
b_urlrewrite або Nginx map. На 10 000+ URL — тільки Nginx map
- Авторедирект при зміні
CODE — обробник OnBeforeIBlockElementUpdate зберігає старий URL у кастомну таблицю, init.php перевіряє 404 та робить 301
- Усунення ланцюжків: A → B → C замінюємо на A → C (втрата 1% PageRank на кожній ланці)
- Єдиний формат URL: www/без-www, HTTP/HTTPS, зі слешем/без слеша
Стандарт 301-редиректу описано в Wikipedia.
sitemap.xml через модуль SEO
Дефолтні налаштування слабкі: потрапляють сторінки пагінації, результати пошуку, корзина. Налаштовуємо:
- Виключити сміття через налаштування модуля
-
priority та changefreq розрізняти: головна — 1.0 / daily, категорії — 0.8 / weekly, товари — 0.6 / weekly, статті — 0.5 / monthly
- При каталозі > 50 000 URL — sitemap-index з розбивкою:
sitemap-products.xml, sitemap-categories.xml, sitemap-articles.xml
- Багатомовний сайт — окремі карти з
hreflang через xhtml:link
robots.txt — захист краулінгового бюджету
User-agent: Yandex
Disallow: /bitrix/
Disallow: /auth/
Disallow: /personal/
Disallow: /search/
Disallow: /cart/
Disallow: /compare/
Clean-param: utm_source&utm_medium&utm_campaign&utm_content&utm_term
Clean-param: sort&order&PAGEN_1
Crawl-delay: 0.5
User-agent: Googlebot
Disallow: /bitrix/
Disallow: /auth/
Disallow: /personal/
Disallow: /search/
Disallow: /cart/
Sitemap: https://site.ru/sitemap.xml
Докладніше про директиву Clean-param у документації Яндекса. Для Google використовується canonical + налаштування Search Console.
Управління індексацією
- Яндекс.Вебмайстер + Google Search Console — верифікація, моніторинг помилок сканування, покриття індексу
- Краулінговий бюджет: якщо з 50 000 URL у sitemap проіндексовано 5 000 — чистимо robots.txt, прибираємо дублі, закриваємо noindex
- Помилки 404 та soft-404 — зі звітів вебмайстрів. 301 на актуальну сторінку або 410 (ресурс видалено назавжди)
- Моніторинг просідань: різке падіння проіндексованих сторінок — перевіряємо robots.txt та canonical
Як швидкість завантаження впливає на ранжування
- Композитний кеш —
\Bitrix\Main\Composite\Engine перетворює динамічну сторінку на статичний HTML. Перший хіт — рендер PHP, наступні — віддача за мілісекунди. Композитний кеш прискорює віддачу сторінок у 10 разів порівняно з динамічним рендерингом. Налаштування: Продуктивність → Композитний сайт, винятки для корзини та ОК
- Зображення — конвертація у WebP через
CFile::ResizeImageGet() з BX_RESIZE_IMAGE_PROPORTIONAL + lazy loading (loading="lazy"). Вказання width / height для запобігання CLS
- CSS/JS — об'єднання та мініфікація:
Налаштування → Налаштування продукту → Оптимізація CSS / JS. Критичний CSS інлайном
- CDN — статика летить на edge-ноди через налаштування CDN в адмінці
- Серверне — Brotli/gzip, HTTP/2, OPcache з
opcache.jit на PHP 8.1+, кешуючі заголовки Cache-Control: public, max-age=31536000 для статики
Процес роботи: покроково
-
Аудит — аналіз поточного стану: мета-теги, структура URL, індексація, швидкість, мікророзмітка. Формуємо звіт з пріоритезацією.
-
Проектування — узгоджуємо план: які сторінки отримують канонічні URL, які закриваються, шаблони мета-тегів, список редиректів.
-
Реалізація — налаштування модуля SEO, ЧПУ,
robots.txt, sitemap.xml, впровадження JSON-LD. Пишемо кастомні обробники для авторедиректів та SEO-фільтрів.
-
Тестування — перевірка через Google Search Console, Яндекс.Вебмайстер, Screaming Frog. Переконуємося, що зникли дублі, краулер ходить тільки по потрібних сторінках.
-
Деплой та моніторинг — викатка на продакшн, щомісячні звіти з індексації та трафіку. При необхідності коригуємо.
Що входить в роботу з SEO-налаштування?
| Задача |
Результат |
| SEO-аудит поточного стану |
Звіт з помилками та рекомендаціями |
| Налаштування мета-тегів (шаблони + ручне опрацювання) |
Унікальні title/description для всіх сторінок |
| ЧПУ та редиректи |
Коректні URL без дублів, 301 на старі адреси |
| sitemap.xml + robots.txt |
Правильна індексація, захист бюджету краулінгу |
| Мікророзмітка Schema.org |
JSON-LD для товарів, бренду, хлібних крихт |
| Швидкість завантаження |
Композитний кеш, WebP, мініфікація |
| Моніторинг індексації |
Щомісячні звіти, коригування |
Терміни
| Етап |
Терміни |
| Базове налаштування (мета-теги, ЧПУ, sitemap, robots) |
1–2 тижні |
| Schema.org для інтернет-магазину |
1–2 тижні |
| Комплексна технічна SEO-оптимізація |
3–5 тижнів |
| Оптимізація швидкості (Композит, зображення, CDN) |
2–4 тижні |
| SEO-фільтри з мета-тегами та ЧПУ |
2–3 тижні |
| Міграція з редиректами |
1–3 тижні |
Оцінюємо проект за 1 день. Отримайте консультацію — ми відповімо на питання по вашому каталогу. Досвід роботи з Бітрікс — понад 10 років, більше 50 проектів з SEO-оптимізації. Замовте аудит поточного стану — виявимо слабкі місця та підготуємо план дій. Результат — зростання органічного трафіку без зайвих витрат на рекламу. Зв'яжіться, щоб обговорити ваш проект.
