Технологии
Open Graph: как сделать превью ссылки в соцсетях
Open Graph задаёт, как ссылка выглядит в карточке соцсети или мессенджера: заголовок, короткий текст и картинка. Без этих полей площадка сама вытаскивает кусок со страницы или показывает пустой блок. На практике хватает трёх свойств: og:title, og:description и og:image плюс абсолютный URL страницы. Schema для поиска и сниппет Яндекса живут на других полях: обычных title и description. Код для шапки соберите в генераторе превью для соцсетей, поля для выдачи поиска в генераторе meta-тегов. Ниже разобраны теги Open Graph, подготовка картинки, вставка HTML в шапку сайта и проверка превью после публикации. Длину title и description для выдачи сверьте отдельно. Частые формулировки из поиска собраны в конце.
Почему карточка ссылки выглядит пустой или чужой
Вы отправляете URL в Telegram, VK или другой канал. Вместо вашей обложки появляется серый прямоугольник, логотип чужого сервиса или обрезанный скриншот середины страницы. Площадка читает специальные мета-теги в <head>. Если их нет или картинка недоступна по HTTPS, она угадывает превью сама.
Частая путаница: «я уже написал title и description для поиска». Эти поля влияют на вкладку браузера и сниппет в выдаче. Карточка в ленте берёт другие свойства с префиксом og:. Можно скопировать смысл из title, но теги должны быть отдельными строками в HTML.
Ещё ломает превью кэш. Вы поправили картинку, а в чате всё ещё старая. Площадка уже скачала прошлую версию и держит её часами или сутками. После смены og:image нужна явная проверка и иногда смена имени файла или параметра в URL, чтобы кэш сбросился.
Третий сценарий: картинка есть, но по относительному пути (/img/cover.jpg). Бот соцсети открывает страницу с другого сервера и не знает ваш домен как базу. В og:image нужен полный адрес с https://.
Что такое Open Graph на практике
Open Graph это набор мета-тегов, которые описывают страницу для шаринга: название, описание, тип, картинка, канонический URL. Их придумали для соцсетей; сейчас тот же набор читают мессенджеры и часть веб-клиентов. Человеку на экране сайта эти теги не видны: они живут только в шапке документа.
Schema.org закрывает другие задачи поиска: товар, статью, FAQ-блок. Open Graph отвечает только на вопрос «что показать в карточке ссылки». Оба набора можно держать в одном <head>, но в заголовке статьи и лендинга инструмента держите разные углы, чтобы не смешивать интенты.
Для лендинга, статьи блога или карточки товара обычно ставят og:type равным website или article. Для старта хватит website. Главное, чтобы title и description карточки совпадали с обещанием после клика: человек открыл ссылку и увидел ту же тему, что в превью.
Теги Open Graph, без которых карточка почти пустая
Минимальный набор: og:title, og:description, og:image, og:url. Title короткий, как заголовок в ленте. Description одно-два предложения без кликбейта. Image абсолютный URL файла. Url адрес страницы, которую вы шарите.
Дополнительно полезны og:site_name (имя сайта) и og:type. Генератор на Тулси добавляет ещё блок Twitter Card с крупной картинкой: часть клиентов читает и его. Не обязательно дублировать десять свойств «на всякий случай»; лучше три рабочих поля, чем двадцать пустых.
Чем карточка в соцсети отличается от сниппета в поиске
В поиске смотрят <title> и <meta name="description">. В ленте смотрят og:*. Длины разные: в поиске ориентир около 50–60 и 150–160 знаков, в соцсети заголовок часто короче и картинка важнее текста.
Если вы уже собрали тексты для выдачи, не копируйте их слепо в OG без проверки длины и тона ленты. Для поиска разберите правила в статье как написать title и description, длину прогоните через проверку title и description. Для шаринга оставьте отдельный черновик под карточку.
Как подготовить картинку и тексты для превью
Картинка решает клик сильнее длинного описания. Берите горизонтальный кадр (часто ориентир около 1200×630), без мелкого текста, который сожмётся в ленте. Фон простой, объект крупный. Тяжёлый файл на десятки мегабайт бот может не дождаться: сожмите JPEG или WebP до разумного веса.
Положите файл на свой домен по постоянному URL. Временно залитый хостинг без HTTPS или страница с редиректом через три прокладки ломает превью. Проверьте, что URL картинки открывается в режиме инкогнито без авторизации.
Заголовок пишите под ленту: одна мысль, ключ ближе к началу, без капса. Описание дополняет заголовок фактом или следующим шагом, не повторяет его слово в слово. Имя сайта в og:site_name помогает, если у вас несколько разделов с похожими заголовками.
Ошибки в og:image
Относительный путь без домена. Картинка только на локальном компьютере разработчика. Файл закрыт паролем или доступен лишь из внутренней сети. Размер 1×1 «заглушка». Смена файла под тем же именем без сброса кэша площадки. Любая из этих ошибок даёт пустую или старую карточку при живом title.
Перед публикацией откройте URL картинки в новой вкладке. Если браузер показывает файл, бот соцсети тоже сможет его скачать. Если видите HTML-страницу ошибки 404, чините путь, а не теги.
Ошибки в текстах карточки
Дублируют один и тот же title на все URL шаблона. Пишут «Главная» или название компании без темы страницы. В description вставляют список ключей через запятую. Обещают «лучший сервис» без факта на странице. После клика человек чувствует подмену и закрывает вкладку.
Сверьте карточку с H1 и первым экраном. Смысл один, формулировки могут чуть отличаться по длине. На Тулси у инструмента свой H1 («Генератор превью для соцсетей»), у этой статьи другой информационный заголовок: разные задачи.
Как собрать код в генераторе на Тулси
Откройте генератор превью для соцсетей. Заполните заголовок, описание, URL страницы, URL картинки, при желании имя сайта и тип. Справа появится HTML с meta property="og:...". Скопируйте блок и вставьте в <head> шаблона страницы или в поля SEO вашей CMS, если там есть отдельные строки Open Graph.
Регистрация не нужна: код собирается в браузере. Удобно для черновиков лендингов и статей. Если CMS даёт только title и description для поиска, найдите раздел вроде «Соцсети», «Open Graph», «Превью ссылки» или правьте шаблон темы вручную.
После вставки опубликуйте страницу и откройте исходный код (Ctrl+U). Найдите og:title и og:image. Должна быть одна актуальная пара на URL, без старых дублей из плагина и темы одновременно. Два конфликтующих og:image дают лотерею превью.
Шаги по полям
- Откройте генератор OG-тегов.
- Впишите заголовок и описание карточки.
- Укажите полный URL страницы и полный URL картинки с
https://. - Добавьте имя сайта, если оно помогает узнаваемости.
- Скопируйте HTML и вставьте в шапку или SEO-поля CMS.
Пустые поля генератор не выводит: не оставляйте заглушки «test» в проде. Лучше короткий честный title, чем заполненный мусор «для SEO».
Куда смотреть после вставки
Обновите страницу со сбросом кэша CDN и плагинов. В исходнике проверьте, что content у og:image открывается. Отправьте ссылку себе в личку в мессенджере на тестовый чат. Если превью старое, смените имя файла картинки или добавьте версию в query (?v=2) и обновите тег.
Для сниппета поиска параллельно соберите обычные meta в генераторе meta-тегов. Это другой блок в том же <head>, не замена OG.
Как проверить превью и что делать при ошибке
Проверка Open Graph начинается с исходника страницы: есть ли теги, абсолютны ли URL, доступна ли картинка. Дальше смотрите живую карточку в том канале, куда вы реально шарите. У каждой площадки свой кэш и свои правила обрезки кадра.
Если title есть, а картинки нет, проверьте URL изображения и доступ бота: файрвол, ограничение по стране, пароль на каталог. Если картинка на месте, а текст чужой, ищите дубли мета-тегов или кэш. Если после правки карточка стоит сутками, обновите превью средствами площадки или смените URL картинки.
Запрос «open graph проверка» про карточку ссылки. Аудит Schema FAQ на сайте сюда не входит. Сторонние валидаторы можно взять позже; начните с исходника страницы и тестового сообщения в мессенджере.
Список на глаз перед релизом: уникален ли og:title для URL; совпадает ли смысл с H1; открывается ли og:image без логина; нет ли двух разных плагинов, пишущих OG; обновлён ли кэш после смены файла. После крупных правок подождите переобход бота и снова гляньте карточку.
Смежные задачи: поиск и длина полей
Карточка в ленте и сниппет в выдаче решают одну задачу узнаваемости, но разными тегами. Title и description для поиска настройте отдельно: инструкция в как написать title и description, сборка HTML в генераторе meta-тегов, длина в проверке title и description.
Тяжёлая обложка на первом экране сайта и тяжёлая картинка для OG это разные файлы. Для лендинга имеет смысл лёгкий WebP в теле страницы и отдельный JPEG или PNG для шаринга нужного размера. Форматы: как конвертировать в WebP, сжатие: как сжать фото.
Если правите только поиск и забываете OG, в мессенджере останется старое превью. Если правите только OG, сниппет в выдаче может жить своей жизнью. Держите оба блока в одном релизе страницы.
Частые вопросы
Что такое Open Graph?
Open Graph это набор мета-тегов в шапке HTML, которые задают заголовок, описание и картинку для карточки ссылки в соцсетях и мессенджерах. Их читает бот площадки при первом открытии URL. Человеку на самой странице эти теги не отображаются.
Какие теги Open Graph нужны минимум?
Нужны og:title, og:description, og:image и желательно og:url. Без картинки карточка часто выглядит пустой. Без title площадка подставит что попало из <title> или текста страницы. Соберите набор в генераторе превью.
Что такое микроразметка Open Graph?
Так в поиске часто называют те же OG-теги: разметка страницы для шаринга. Schema.org и FAQ-блок для выдачи решают другие задачи поиска. Микроразметка Open Graph отвечает за превью ссылки в ленте и мессенджере.
Как сделать превью ссылки в соцсетях?
Подготовьте заголовок, описание и картинку с абсолютным URL. Вставьте соответствующие meta property="og:..." в <head> или заполните поля CMS. Готовый HTML даёт генератор OG-тегов. После публикации отправьте ссылку в тестовый чат и посмотрите карточку.
Как проверить Open Graph?
Откройте исходный код страницы и найдите og:title и og:image. Убедитесь, что URL картинки открывается в браузере по HTTPS. Затем проверьте живое превью в мессенджере или соцсети, куда шарите. Если видите старую карточку, сбросьте кэш площадки или смените URL файла.
Куда вставлять теги Open Graph?
В секцию <head> HTML-документа, рядом с обычными meta-тегами. На конструкторах ищите поля «Open Graph», «Соцсети» или «Превью». Не вставляйте OG в футер или тело статьи: боты читают шапку. После вставки сверьте исходник опубликованной страницы.
Чем og:title отличается от обычного title?
Обычный <title> идёт во вкладку браузера и часто в сниппет поиска. og:title идёт в карточку шаринга. Смысл держите один, формулировки можете чуть развести под длину ленты. Для поиска отдельно используйте генератор meta-тегов.
Какой размер картинки для og:image?
Рабочий ориентир около 1200×630 пикселей, горизонтальный кадр, без мелкого текста. Точные лимиты зависят от площадки, поэтому закладывайте запас по краям. Файл должен открываться публично и весить умеренно, иначе бот не скачает его вовремя.
Почему превью не обновляется после правки?
Площадка закэшировала старую карточку. Подождите или принудительно обновите превью в её инструментах. Часто помогает новое имя файла или параметр ?v= в URL картинки с правкой тега. Проверьте также, что на сайте не остался старый og:image из плагина.
Нужна ли Schema FAQ вместо Open Graph?
Schema FAQ решает задачу поиска. Для карточки ссылки ставьте Open Graph. Оба набора могут жить в одном <head>, у каждого своя роль. Эта статья про превью в соцсетях; про сниппет поиска читайте гайд по title и description.
Нужен готовый код карточки: откройте генератор превью для соцсетей. Для поиска рядом: генератор meta-тегов и проверка title и description.
Соберите теги превью ссылки
Заполните заголовок, описание и URL картинки, скопируйте готовый HTML для шапки страницы.
