SEO
Как подключить OG-теги на сайте битрикс и настроить красивый предпросмотр ссылок
Open Graph, или OG-теги, — это специальные метатеги, которые помогают управлять тем, как страница сайта выглядит при публикации ссылки в социальных сетях, мессенджерах и других сервисах.
Если OG-теги не настроены, сервис сам попытается выбрать заголовок, описание и изображение со страницы. Часто результат получается случайным: подтягивается не та картинка, обрезается текст или ссылка выглядит неаккуратно.
Зачем нужны OG-теги
OG-теги нужны для красивого и понятного предпросмотра ссылки. Они особенно важны для:
- статей в блоге;
- страниц услуг;
- карточек товаров;
- кейсов и портфолио;
- лендингов;
- страниц, которыми часто делятся в Telegram, VK и других сервисах.
Хорошо настроенный предпросмотр повышает доверие к ссылке и делает публикацию более заметной в ленте или чате.
Как выглядит ссылка без OG-тегов
Без Open Graph сервис может взять данные со страницы автоматически. Например, вместо нужного изображения может подставиться логотип сайта, случайная картинка из статьи или вообще пустой блок.
Также может появиться слишком длинный заголовок, техническое описание или неактуальный текст из первого попавшегося блока страницы.
Основные OG-теги
Минимальный набор Open Graph-тегов обычно выглядит так:
<meta property="og:title" content="Заголовок страницы">
<meta property="og:description" content="Краткое описание страницы">
<meta property="og:image" content="https://site.ru/images/preview.jpg">
<meta property="og:url" content="https://site.ru/page/">
<meta property="og:type" content="article">
Эти теги размещаются внутри тега <head> HTML-страницы.
Что означает каждый OG-тег
og:title
Это заголовок, который будет отображаться в предпросмотре ссылки. Обычно он похож на SEO title или H1 страницы, но может быть короче и понятнее именно для социальных сетей.
<meta property="og:title" content="Как подключить OG-теги на сайте">og:description
Краткое описание страницы. Оно помогает пользователю понять, что находится по ссылке.
<meta property="og:description" content="Разбираем, зачем нужны Open Graph-теги и как правильно добавить их на сайт.">og:image
Изображение для предпросмотра ссылки. Это один из самых важных тегов, потому что именно картинка часто первой привлекает внимание.
<meta property="og:image" content="https://site.ru/upload/og-image.jpg">
Важно указывать абсолютный путь к изображению, начиная с https://.
Относительный путь вроде /upload/og-image.jpg может работать нестабильно
в разных сервисах.
og:url
Канонический адрес страницы. Он помогает сервисам понять, какую именно страницу нужно показывать в предпросмотре.
<meta property="og:url" content="https://site.ru/blog/kak-podklyuchit-og-tegi/">og:type
Тип страницы. Для статей обычно используется значение article,
для обычных страниц — website.
<meta property="og:type" content="article">Пример полного подключения OG-тегов
Пример кода для статьи в блоге:
<head>
<title>Как подключить OG-теги на сайте</title>
<meta name="description" content="Что такое Open Graph, зачем нужны OG-теги и как добавить их на сайт.">
<meta property="og:title" content="Как подключить OG-теги на сайте">
<meta property="og:description" content="Разбираем Open Graph-теги и показываем пример подключения для сайта.">
<meta property="og:image" content="https://site.ru/upload/og/og-tags.jpg">
<meta property="og:url" content="https://site.ru/blog/kak-podklyuchit-og-tegi/">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Название сайта">
</head>Дополнительные теги для Twitter/X
Кроме Open Graph, можно добавить отдельные теги для Twitter/X. Они помогают управлять видом карточки ссылки в этой социальной сети.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Как подключить OG-теги на сайте">
<meta name="twitter:description" content="Показываем, как настроить красивый предпросмотр ссылки.">
<meta name="twitter:image" content="https://site.ru/upload/og/og-tags.jpg">
Значение summary_large_image используется для карточки
с крупным изображением.
Рекомендации к изображению для OG
Для OG-картинки лучше подготовить отдельное изображение. Не стоит полагаться на случайные картинки из статьи.
Рекомендуется:
- использовать изображение хорошего качества;
- делать картинку понятной даже в уменьшенном размере;
- не размещать важный текст слишком близко к краям;
- использовать абсолютный URL;
- заранее проверять, как ссылка выглядит в соцсетях и мессенджерах.
Часто используют размер 1200×630 пикселей. Это удобный формат, который хорошо подходит для предпросмотра ссылок.
OG-теги в 1С-Битрикс
В 1С-Битрикс OG-теги можно выводить разными способами. Самый простой вариант — добавить их в шаблон сайта или шаблон компонента.
Например, если данные берутся из элемента инфоблока, можно использовать:
- название элемента для
og:title; - анонс или SEO description для
og:description; - картинку анонса или детальную картинку для
og:image; - текущий адрес страницы для
og:url.
Важно следить, чтобы на каждой странице были уникальные OG-данные. Если на всех страницах сайта выводится один и тот же заголовок и одна и та же картинка, предпросмотр ссылок будет выглядеть шаблонно и неинформативно.
Пример подключения OG-тегов в PHP
Пример простого вывода OG-тегов:
<?php
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https://' : 'http://';
$currentUrl = $protocol . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
$title = 'Как подключить OG-теги на сайте';
$description = 'Разбираем Open Graph-теги и показываем пример подключения.';
$image = 'https://site.ru/upload/og/og-tags.jpg';
?>
<meta property="og:title" content="<?= htmlspecialchars($title) ?>">
<meta property="og:description" content="<?= htmlspecialchars($description) ?>">
<meta property="og:image" content="<?= htmlspecialchars($image) ?>">
<meta property="og:url" content="<?= htmlspecialchars($currentUrl) ?>">
<meta property="og:type" content="article">В реальном проекте значения лучше брать из свойств страницы, SEO-полей, инфоблока или настроек раздела.
Частые ошибки при подключении OG-тегов
- указан относительный путь к изображению;
- картинка закрыта от индексации или недоступна без авторизации;
- на странице несколько разных
og:imageбез необходимости; - одинаковые OG-теги на всех страницах сайта;
- слишком длинный заголовок или описание;
- после изменения тегов не сброшен кеш сайта или кеш соцсети;
- страница отдает редирект, ошибку 404 или закрыта в robots.txt.
Как проверить OG-теги
После подключения нужно проверить, как ссылка отображается во внешних сервисах. Для этого можно использовать специальные валидаторы предпросмотра ссылок.
Также можно просто отправить ссылку в Telegram, VK или другой мессенджер и посмотреть, какая карточка сформируется.
Если данные не обновились сразу, причина может быть в кеше. Многие сервисы кешируют предпросмотр ссылки и не обновляют его мгновенно.
Влияют ли OG-теги на SEO
OG-теги напрямую не заменяют SEO title, description и другие важные элементы оптимизации. Но они влияют на то, как ссылка выглядит при распространении в социальных сетях и мессенджерах.
Чем понятнее и привлекательнее выглядит ссылка, тем выше вероятность, что по ней перейдут. Поэтому OG-теги можно считать важной частью технической и контентной оптимизации сайта.
Вывод
OG-теги — небольшая, но важная доработка сайта. Они помогают управлять внешним видом ссылок, делают публикации аккуратнее и повышают доверие к материалам.
Для блога, сайта услуг, интернет-магазина или корпоративного сайта Open Graph лучше подключать сразу на этапе разработки. Это избавит от случайных картинок, обрезанных заголовков и некрасивых предпросмотров при отправке ссылок.
Комментарии