Open Graph в Битрикс: превью ссылок для разделов и товаров

Open Graph — набор мета-тегов, из которых мессенджеры и соцсети собирают превью ссылки: заголовок, описание и картинку. В Узбекистане ссылками на товары и услуги чаще всего делятся в Telegram, поэтому от этих тегов напрямую зависит, как выглядит ваш сайт в переписке клиентов и в каналах.

Какие теги нужны

• og:title — заголовок превью
• og:description — короткое описание
• og:image — адрес картинки
• og:url — канонический адрес страницы
• og:type — тип: сайт, статья, товар
• og:site_name — название сайта

Если тегов нет, мессенджер попытается взять title, description и первую попавшуюся картинку. Часто это оказывается логотип или иконка корзины.

Как Битрикс выводит мета-теги

Шаблон сайта выводит заголовок и стандартные мета-теги в общей части. Open Graph в стандартных шаблонах обычно нет, их добавляют одним из способов:

Через свойства страницы

В шаблоне сайта, в части head, выводятся отложенные свойства страницы для каждого тега Open Graph. А компоненты каталога и новостей задают значения этих свойств в своих шаблонах: название, анонс, картинку элемента. Так у каждой карточки будут свои данные.

Через модули

В Маркетплейсе Битрикса есть SEO-модули, которые выводят Open Graph по правилам: например, брать картинку из детального изображения товара, а описание из анонса. Это удобно, если на сайте нет разработчика.

Картинка для превью

• Используйте полный абсолютный адрес картинки с https
• Горизонтальный формат подходит для большинства мессенджеров
• Картинка должна открываться без авторизации и не блокироваться защитой от ботов
• Не используйте огромные исходники: превью может не загрузиться
• Для страниц без своей картинки задайте общую картинку по умолчанию

Для товаров лучше брать основное фото на светлом фоне, для статей — обложку с понятным сюжетом.

Описание

Не дублируйте весь текст анонса: в превью видно одну-две строки. Хорошее описание для товара — модель и главное преимущество, для услуги — что делаете и для кого, для статьи — какой вопрос она закрывает.

Многоязычность

На русской и узбекской версиях сайта теги должны выводиться на соответствующем языке. Частая ошибка — узбекская страница показывает русский заголовок превью, потому что значение взято из общего свойства.

Проверка и обновление превью

1. Откройте исходный код страницы и найдите теги og
2. Проверьте, что адрес картинки открывается
3. Отправьте ссылку себе в Telegram и посмотрите превью
4. Если вы исправили теги, а Telegram показывает старое превью — он закешировал его. Обновить можно через официального бота Telegram для превью ссылок @WebpageBot: отправьте ему адрес страницы

Для других площадок есть свои инструменты отладки превью.

Типичные ошибки

• Одинаковая картинка и описание на всех страницах сайта
• Теги выводятся дважды: из шаблона и из модуля
• og:url указывает на адрес с параметрами
• Картинка лежит на поддомене с ограниченным доступом
• После смены шаблона теги исчезли, а никто не заметил

Отдельные шаблоны для типов страниц

Удобно задать правила для каждого типа страниц: для главной — описание компании и фирменная картинка, для разделов каталога — название раздела и картинка первого товара или обложка раздела, для карточек — название, модель и фото товара, для статей — заголовок и обложка. Такой подход избавляет контент-менеджера от ручного заполнения тегов на сотнях страниц и при этом даёт каждой ссылке осмысленное превью.

Связь с SEO

Open Graph не влияет на позиции напрямую. Но красивое превью повышает переходы из мессенджеров и каналов, а люди, пришедшие по ссылке друга, часто потом ищут компанию по названию. Для бизнеса в Узбекистане, где Telegram — главный канал общения, это одна из самых недооценённых настроек.