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

Почему превью ссылки важно бизнесу в Узбекистане

Большая часть продаж у нас начинается в переписке: клиент пересылает ссылку жене, партнёру или в рабочий чат, администратор кидает её покупателю в личные сообщения, а канал публикует пост с адресом страницы. Во всех этих случаях первое, что видит человек, — не ваш сайт, а карточка превью. Если она выглядит случайно, по ссылке просто не нажимают.

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

Open Graph Битрикс: какие теги нужны и откуда брать значения

В стандартных шаблонах Битрикса мета-теги Open Graph обычно не выводятся полностью, поэтому их добавляют отдельно. Минимальный набор такой:

Если тегов нет, мессенджер берёт title, description и первую подходящую картинку со страницы. Чаще всего это логотип в шапке или значок из интерфейса, и выглядит это небрежно.

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

• og:title — заголовок карточки
• og:description — одна-две строки описания
• og:image — полный адрес картинки с https
• og:url — основной адрес страницы без служебных параметров
• og:type — website, article или товар
• og:site_name — название компании или сайта

Как вывести теги: пошаговая инструкция

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

Порядок работы для разработчика или подрядчика:

• Сделайте резервную копию шаблона и проверьте, нет ли уже og-тегов в коде страницы или в установленном SEO-модуле
• В head шаблона сайта добавьте вывод отложенных свойств страницы для каждого тега
• В шаблоне компонента каталога задайте значения: название товара, краткий текст, детальное фото
• То же сделайте для разделов, новостей и статей, подставив их собственные поля
• Для статических страниц предусмотрите заполнение свойств страницы вручную
• Задайте запасные значения: общую картинку и описание компании на случай пустых полей
• Сбросьте кеш Битрикса и проверьте результат на реальных ссылках

Модуль или собственный шаблон: что выбрать

Если разработчика на проекте нет, подойдёт SEO-модуль из Маркетплейса: он выводит теги по правилам, например берёт картинку из детального фото, а описание из анонса. Минус — меньше гибкости и риск, что модуль и шаблон выведут теги вдвое.

Собственная доработка шаблона даёт полный контроль: можно по-разному собирать заголовки для товаров и разделов, учитывать язык страницы, подставлять запасные значения. Для магазина с большим каталогом и двумя языками чаще выигрывает именно этот путь. Для небольшого сайта-визитки хватит модуля или ручного заполнения свойств.

Картинка и описание: правила, которые экономят клики

Картинка — главный элемент карточки, и проблемы с ней встречаются чаще всего. Адрес должен быть полным, с https, а не относительным вроде /upload/…. Файл обязан открываться без авторизации и не блокироваться защитой от ботов, иначе мессенджер не сможет его скачать. Берите горизонтальный формат, не слишком тяжёлый файл, а важный текст и объект размещайте ближе к центру: площадки по-разному обрезают края.

Для товара подойдёт основное фото на светлом фоне, для статьи — обложка с понятным сюжетом, для главной — фирменный баннер. Описание не должно копировать весь анонс: в карточке видны одна-две строки. Для товара напишите модель и главное преимущество, для услуги — что вы делаете и для кого, для статьи — на какой вопрос она отвечает. Следите, чтобы в тексте не было HTML-тегов и лишних пробелов.

Русская и узбекская версии сайта

Если сайт на двух языках, теги должны выводиться на языке страницы. Типичная картина: человек открывает узбекскую карточку, а в Telegram видит русский заголовок, потому что значение взято из общего свойства. Проверьте, какое поле читает шаблон на каждой языковой версии, и не забудьте про og:url: у каждой версии должен быть свой корректный адрес.

Практический пример. Магазин бытовой техники в Ташкенте получил жалобу: менеджер отправил клиенту ссылку на холодильник, а в чате отобразилась общая картинка с главной и название сайта вместо модели. Причина оказалась типовой: значения задавались только для главной, а компонент каталога их не переопределял. После настройки правил для карточек и запасной картинки ссылка стала показывать модель и фото товара.

Проверка и сброс кеша Telegram

Проверять результат нужно по шагам:

Если вы поправили теги, а Telegram показывает старое, он закешировал превью. Отправьте адрес странице боту @WebpageBot и посмотрите карточку заново.

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

Типичные ошибки и чек-лист

Самая частая ошибка — одинаковые картинка и описание на всех страницах: сайт выглядит как шаблонная заглушка. Вторая — дубли тегов, когда og выводят и шаблон, и модуль, из-за чего площадки берут непредсказуемое значение. Третья — og:url с параметрами фильтра или меток, из-за чего у одной страницы несколько «адресов». Также встречаются картинки на поддомене с ограниченным доступом, огромные исходники и ситуация, когда после смены шаблона теги пропали, а заметили это через месяц. Поэтому проверку превью стоит включить в список приёмки любых правок дизайна.

Перед запуском убедитесь: на главной, в разделах, карточках и статьях есть все шесть тегов; значения отличаются по типам страниц; адрес картинки полный и открывается; теги выводятся один раз; ссылка в Telegram показывает нужное фото и название на обоих языках. Контент-менеджеру достаточно одного правила: у каждого товара должно быть качественное основное фото и короткое осмысленное описание, остальное подставится автоматически. Если нужна помощь с настройкой, команда markdev занимается SEO-оптимизацией сайтов в Узбекистане и может проверить превью и мета-теги на вашем проекте — расскажите о задаче, и мы подскажем решение.