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

Open Graph - это несколько метатегов в коде страницы, из которых мессенджер или соцсеть собирает карточку ссылки: заголовок, пару строк описания и картинку. Нет разметки - площадка берёт что найдёт: тег title, первый абзац, случайное изображение или ничего. Настройка занимает шесть строк в head и одну картинку 1200 на 630 пикселей.

На позиции в поиске Open Graph не влияет. Он решает другое: как выглядит ваша ссылка, когда её пересылают в рабочий чат, и захочется ли по ней перейти.

Как наша главная месяц прожила без картинки

Начнём с собственной ошибки, потому что она типовая и снаружи её не видно.

Сайт собран на Next.js. Картинка превью лежала в положенном месте, общие поля Open Graph были заданы в корневом шаблоне, и на внутренних страницах карточки выглядели как надо. На главной мы однажды уточнили заголовок карточки: дописали в настройках страницы одно поле с названием. Сборка прошла, сайт открывался, тесты зелёные.

Заметили через месяц с лишним: при пересылке главная выглядела как адрес с одной строкой заголовка, без картинки. Фреймворк не дополняет унаследованный блок Open Graph, а заменяет его целиком. Одно новое поле стёрло всё остальное: картинку, название сайта, тип. В коде главной остался заголовок и больше ничего.

Что из этого стоит забрать. Разметку нельзя проверить глазами на сайте: страница выглядит одинаково с ней и без неё. Её нужно проверять там, где она работает, то есть пересылкой ссылки. И проверять каждый шаблон страницы отдельно, а не один раз для всего сайта.

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

Шесть строк, которых достаточно

У протокола четыре обязательных свойства: заголовок, тип, картинка и адрес. На практике добавляют ещё описание и название сайта.

<meta property="og:title" content="Доставка цветов в Самаре за 90 минут" />
<meta property="og:description" content="Букеты от 1 900 рублей, фото перед отправкой, оплата при получении." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.ru/" />
<meta property="og:image" content="https://example.ru/og/main.jpg" />
<meta property="og:site_name" content="Цветы на Волге" />

Несколько замечаний, которые экономят время.

Атрибут называется property, а не name. С name часть площадок теги не увидит.

Адреса в og:url и og:image абсолютные, с протоколом и доменом. Относительный путь вроде /logo.png робот мессенджера не разберёт: он не знает, от чего его отсчитывать.

og:url - это основной адрес страницы без меток и параметров, тот же, что в canonical. Про то, откуда берутся варианты адреса, у нас есть отдельный разбор про дубли страниц.

Для статей тип меняется на article, и тогда уместны article:published_time и article:modified_time. Дата изменения полезна не только соцсетям: наш аудит, например, по ней определяет, указана ли на странице свежесть текста.

К картинке стоит дописать размеры:

<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

В документации Facebook объяснено зачем: зная размеры заранее, робот показывает картинку сразу, при первой же пересылке, а не после того как скачает и обработает файл.

Что с разметкой на 111 сайтах

Четвёртого октября 2026 года мы открыли главные страницы 111 сайтов компаний, которые проходили наш бесплатный аудит, и выписали всё, что относится к Open Graph. Картинки скачали и измерили.

Если сложить, получается так. Рабочая картинка, которая открывается, растровая и не меньше 600 пикселей в ширину, есть у 49 сайтов из 111. Меньше половины.

Самая частая причина неудачи - в og:image стоит логотип. Отсюда и SVG, и квадратные картинки (их 14), и файлы по 5-10 килобайт. Логотип на прозрачном фоне в карточке превращается в мелкий значок на сером поле. Ровно 1200 на 630 пикселей картинка оказалась только у десяти сайтов.

Обратная крайность тоже есть: пять картинок весят больше мегабайта, самая тяжёлая 2,1 МБ. Формально это допустимо, у Facebook предел 8 МБ. Но карточка в мессенджере появляется, пока человек печатает сообщение, и тяжёлая картинка к этому моменту может не успеть.

Нашлись и ошибки в адресе: у двух сайтов og:url равен просто /, у трёх указывает на другой домен, у одного содержит номер порта.

Какой должна быть картинка

Требования сводятся к короткому списку, и почти все они из документации Facebook, под которую подстроились остальные.

1. Размер 1200 на 630 пикселей, соотношение сторон 1,91 к 1.
2. Формат JPEG или PNG. WebP понимают не все и не всегда, SVG не понимает никто.
3. Вес в пределах 200-300 КБ. В нашей выборке у половины картинок он меньше 64 КБ, и этого хватает.
4. Главное содержание в центре. Площадки обрезают края по-разному, а некоторые показывают квадрат.
5. Текст на картинке крупный и короткий. В ленте мессенджера карточка занимает треть экрана телефона.
6. Адрес картинки открывается без авторизации и не закрыт в robots.txt.

Нужна ли своя картинка каждой странице? Для статей и товаров да: в чате видно, о чём ссылка, ещё до перехода. Для служебных страниц хватит общей карточки сайта.

Где это настраивается

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

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

На Тильде поля лежат в настройках страницы, в разделе про соцсети: туда загружается отдельная картинка и вписываются заголовок с описанием. Если их не заполнить, конструктор подставит данные из основных настроек страницы, а картинку может не подставить вовсе.

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

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

Порядок, которым пользуемся сами.

1. Смотрим, что в коде. Команда вернёт все теги Open Graph на странице:

curl -s https://example.ru/ | grep -io '<meta property="og:[^>]*>'

2. Открываем адрес из og:image в браузере. Картинка должна показаться без входа на сайт.
3. Отправляем ссылку себе в мессенджере. Это единственная проверка, которая показывает результат, а не намерение.
4. Если карточка старая, сбрасываем кеш. В Telegram ссылку отправляют боту @WebpageBot. В Facebook открывают Sharing Debugger и нажимают Scrape Again. У ВКонтакте для этого есть метод pages.clearCache в разделе для разработчиков.

Про кеш забывают чаще всего. Площадка запоминает карточку при первом показе и может отдавать её неделями. Поправили картинку, а в чате клиента висит старая - разметка тут ни при чём, сбросьте кеш.

Синтаксис проверяет валидатор микроразметки в Яндекс Вебмастере: вставляете адрес или код и получаете список распознанных свойств.

Чего Open Graph не делает

В статьях про разметку ей часто приписывают лишнее, поэтому назовём границы.

Позиции в поиске она не поднимает. Яндекс использует Open Graph для поиска по видео, а про ошибки в справке сказано, что разметка с ними просто не учитывается и на остальное это не влияет.

В ответы нейросетей она тоже не приводит. Отдельным замером мы эту связь не проверяли, но и оснований для неё нет: сеть цитирует текст страницы, а не её превью.

Есть одно исключение, и оно показательное. К нам пришёл сайт, собранный как одностраничное приложение: без выполнения скриптов сервер отдавал около тысячи байт и пустой блок. Текста в коде не было вообще. Единственное, что можно было прочитать, не запуская браузер,- заголовок и описание из Open Graph. По ним мы и составили первые вопросы для замера. Робот нейросети оказывается в том же положении: скрипты он, как правило, не выполняет, и для такого сайта две строки разметки - всё, что он узнает о компании. Проблему это не решает, текст должен быть в HTML. Но показывает, что разметку читают не только соцсети.

Где это встречается с остальной разметкой

Open Graph, метатеги и Schema.org описывают одну страницу для разных читателей, и расхождения между ними заметны. Если в title одно название компании, в og:site_name другое, а в разметке организации третье, человек этого не увидит, а машина запишет три разные сущности.

Поэтому заполнять их стоит за один проход. Заголовок и описание для поиска разобраны в статье про метатеги, разметка организации и товаров - в материале про Schema.org. А что нейросети говорят о компании уже сейчас, показывает замер на своих вопросах: первый бесплатный.

Источники

• The Open Graph protocol - обязательные и дополнительные свойства, типы объектов.
• Facebook for Developers: Images in Link Shares - размеры, соотношение сторон, предел 8 МБ, теги ширины и высоты.
• Яндекс Вебмастер, справка: Open Graph - для чего разметку использует Яндекс.
• Наш разбор разметки на 111 главных страницах (начало октября 2026): какие свойства заданы, в каком формате и какого размера картинки. Список сайтов закрыт.