loading

Кейсы / OG-изображения

OG-изображения 1200×630 автоматически — для каждой страницы сайта

Одна строка кода — уникальное превью в ВКонтакте, Telegram, WhatsApp для каждого поста

У каждой страницы сайта может быть своё уникальное превью для соцсетей без Photoshop, Canva и ручной загрузки. PixInLink использует сам принцип Open Graph: og:image принимает URL изображения — значит в мета-тег можно подставить динамический URL, который сгенерирует картинку по заголовку страницы:

<meta property="og:image" content="https://pixinlink.ru/api/v1/1200x630/как-приготовить-тирамису">

TL;DR

Вставьте URL PixInLink в мета-тег og:image — и каждая страница сайта получит уникальное AI-изображение при репосте в соцсети. Работает с WordPress, Next.js, Hugo, Django и обычным HTML. Первый запрос создаёт изображение, затем CDN-кеш хранит его 1 год. Для продакшна достаточно Starter за 490 ₽/мес без водяного знака.

Ключевые факты

2–3×

больше кликов у постов с заметным og:image vs без визуала

1 год

CDN-кеш: после первой генерации повторные запросы мгновенны

500

страниц сайта — 500 уникальных og:image без ручной подготовки

15 мин

на интеграцию в WordPress, Next.js, Hugo или Django

  • done 1200×630 px — базовый формат OG, стабильно работающий во ВКонтакте, Telegram, Facebook, LinkedIn, WhatsApp
  • done 3 типа краулеров — Facebook Crawler, Telegram preview-боты, WhatsApp share-инспекторы — читают og:image автоматически
  • done 1 шаблон URL в layout/теме решает задачу для всего сайта
  • done 10–30 сек — первая генерация, затем мгновенно из CDN

Что такое og:image

Open Graph изображение (og:image) — это URL картинки в мета-теге страницы, который соцсеть или мессенджер использует для генерации превью ссылки при репосте. Краулер читает OG-разметку, получает og:title, og:description, og:url и og:image, после чего строит карточку публикации — именно от неё зависит заметность ссылки и её кликабельность в ленте.

Проблема, которую не решает SEO-плагин

У сайта на 200–300 страниц почти всегда одна и та же ситуация: контент есть, а нормальных превью при репосте нет. Telegram, ВКонтакте или Facebook показывают либо дефолтный логотип, либо случайную картинку со страницы, либо вообще пустое превью. Yoast SEO и другие плагины решают наличие og:image, но не уникальность.

Ручное производство 300 картинок — десятки часов дизайна. PixInLink закрывает разрыв: вместо ручной графики вы передаёте в og:image URL генератора, который формирует изображение из темы страницы. Ниже — механика, код для 4 платформ, логика кеширования, кейсы и инструкция по troubleshooting.

Open Graph это позволяет: og:image принимает любой публичный URL — значит можно передать динамическую ссылку на генератор. Краулер сам запросит картинку и закеширует результат.

Как автоматически генерировать og:image для каждой страницы?

Вставьте в мета-тег og:image URL PixInLink, где последняя часть URL формируется из заголовка, slug или названия страницы. Когда страницу репостят, краулер запрашивает URL изображения — PixInLink при первом обращении создаёт картинку, CDN кеширует её на год. Все последующие репосты отдают готовое изображение мгновенно.

<meta property="og:image"
  content="https://pixinlink.ru/api/v1/1200x630/название-вашей-страницы">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Описание изображения">

Жизненный цикл og:image с PixInLink

📤
Репост ссылки
🤖
Краулер читает og:image
PixInLink генерирует
10–30 сек
🗄️
CDN кеширует
на 1 год
Превью готово
мгновенно

Первый репост — 10–30 секунд. Все последующие — мгновенно из CDN.

Проблема → Решение → Результат

🔴 Проблема

Сайт с 300 страницами. У каждой должен быть свой og:image, иначе при репостах в Telegram, ВКонтакте, LinkedIn — карточки одинаковые или пустые. Ручное производство 300 картинок — десятки часов дизайна. Yoast SEO даёт одну картинку на весь сайт.

✅ Решение

Один шаблон URL в layout, functions.php или head partial. Заголовок страницы проходит через slugify / sanitize_title / urlize и становится частью URL PixInLink.

📊 Результат
  • 300 уникальных og:image без ручного дизайна
  • Интеграция в шаблон за 15–30 минут
  • Тематические карточки вместо одинакового логотипа
  • Free для теста, Starter для продакшна

Размеры og:image для разных платформ

ПлатформаРазмерСоотношениеМинимумРекомендация PixInLink
Facebook / Meta1200×6301.91:1600×3151200×630 ✅
ВКонтакте1200×6301.91:1537×2401200×630 ✅
Telegram1200×6301.91:1300×2001200×630 ✅
Twitter / X1200×6281.91:1144×1441200×628
LinkedIn1200×6271.91:1200 px ширина1200×630
WhatsApp1200×6301.91:1300×200800×418 или 1200×630

💡 1200×630 — универсальный размер для всех 6 платформ. Один URL в og:image закрывает все сети сразу.

URL-параметры PixInLink для og:image

ПараметрЗначениеПримерКогда использовать
размер1200x630/api/v1/1200x630/новость-дняУниверсально для большинства соцсетей
stylerealistic, artistic, 3d-render, sketch?style=realisticПодобрать визуал под тип контента
seedЧисло или хеш?seed=1257Фиксировать изображение между запросами
watermarkfalse (Starter+)?watermark=falseПродакшн без водяного знака
formatwebp / jpeg?format=webpОптимизировать вес и совместимость

Полный мета-блок для продакшна: добавьте og:image:width, og:image:height и og:image:alt — Facebook рекомендует передавать размеры краулеру для более быстрой обработки.

PixInLink vs Vercel OG vs Cloudinary vs Bannerbear

Метод Автоматизация Уникальность Стоимость Сложность
PixInLink Высокая Высокая Низкая (490 ₽) Низкая
Canva (вручную) Низкая Высокая Средняя/высокая по времени Низкая, но не масштабируется
Yoast SEO (дефолт) Высокая ❌ Одна на сайт Низкая Низкая
Vercel OG Средняя Высокая Низкая по лицензии Высокая (только Next.js)
Cloudinary Высокая Средняя/высокая Выше средней Средняя
Bannerbear Высокая Высокая Высокая Средняя
ScreenshotOne Средняя Средняя Средняя Средняя

Где PixInLink выигрывает: минимум кода, русскоязычный AI-стек, российская инфраструктура (152-ФЗ), быстрый запуск без отдельного микросервиса.
Где уступает: кастомные HTML/Canvas-шаблоны с фирменными шрифтами и строгим brand kit — roadmap Q3 2026.

Данные: зачем og:image важен

  1. Open Graph считает og:image базовым свойством объекта, поддерживая og:image:width, og:image:height и og:image:alt
  2. Facebook рекомендует задавать ширину изображения не менее 600 пикселей и тестировать результат через Sharing Debugger
  3. LinkedIn ориентируется на изображения ~1200×627 с соотношением 1.91:1
  4. WhatsApp: безопасный минимум — 300×200, практическая рекомендация — 1200×630
  5. Telegram-превью ссылки можно принудительно обновить через @WebpageBot после изменения мета-тегов

Как настроить автоматические og:image за 15 минут

1

Проверьте текущее состояние og:image

Откройте Facebook Sharing Debugger или инструмент предпросмотра ВКонтакте, вставьте URL страницы и посмотрите, какой image видит краулер сейчас.

2

Выберите тариф

Free: 50 генераций/мес, с водяным знаком — для теста. Starter: 490 ₽/мес, без водяного знака — для продакшна.

3

Сформируйте базовый URL-шаблон

https://pixinlink.ru/api/v1/1200x630/{ПРОМПТ}

Промпт = slug страницы, тема статьи, товарный title или очищенный H1.

4

Интегрируйте в вашу платформу

functions.php или кастомный плагин:

// Подставляем URL og:image из заголовка поста
add_filter('wpseo_opengraph_image', function($img) {
  $title = sanitize_title(get_the_title());
  return "https://pixinlink.ru/api/v1/1200x630/{$title}";
});

app/layout.tsx или generateMetadata:

// Передаём og:image через metadata API Next.js
export async function generateMetadata({ params }) {
  const title = decodeURIComponent(params.slug);
  return {
    openGraph: {
      title,
      images: [
        `https://pixinlink.ru/api/v1/1200x630/${encodeURIComponent(title)}?seed=42`
      ],
    },
  };
}

layouts/partials/head.html:

<!-- Формируем og:image из заголовка страницы -->
<meta property="og:image"
  content="https://pixinlink.ru/api/v1/1200x630/{{ .Title | urlize }}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="{{ .Title }}">

views.py + шаблон:

# Создаём стабильный URL og:image из title страницы
from django.utils.text import slugify
og_image = (
  f"https://pixinlink.ru/api/v1/1200x630/{slugify(post.title)}"
  f"?seed={post.id}"
)
# В шаблоне Django:
# <meta property="og:image" content="{{ og_image }}">
5

Добавьте seed для стабильности

Передавайте ?seed= на основе ID страницы или slug-хеша — одинаковый seed всегда возвращает одно и то же изображение. ?seed=post.id в Django, ?seed={{ .Params.id }} в Hugo.

6

Проверьте результат

  • Facebook: Sharing Debugger
  • ВКонтакте: очистка кеша предпросмотра
7

Настройте мониторинг

Следите за числом генераций в дашборде и обновляйте тариф заранее, если сайт активно репостят. Статус API: status.pixinlink.ru.

Roadmap: что появится в og:image генерации

КварталФункцияПольза
Q2 2026Текст на изображении (title overlay)Заголовок статьи поверх картинки
Q3 2026Брендинг-шаблоныЛоготип и фирменные цвета компании
Q3 2026Webhook при кеш-промахеУведомление о первой генерации страницы
Q4 2026Bulk pre-generation APIМассовая подготовка og:image для всего сайта сразу
Q1 2027Аналитика CTRКакие изображения лучше конвертируют
Q1 2027A/B-тесты og:imageАвтовыбор лучшего варианта превью

Кейсы внедрения

1

Новостной портал — 500+ статей в архиве

Региональный новостной сайт, 5–10 новых публикаций в день, WordPress

Проблема

Старые материалы репостились с дефолтным логотипом, уникального og:image не было ни у одной статьи архива

Решение

20 минут: sanitize_title(get_the_title()) в шаблон Open Graph WordPress

Результат

Весь архив получил уникальные карточки. CTR репостов +47% по внутренней аналитике.

pixinlink.ru/api/v1/1200x630/открытие-новой-больницы-в-самаре
2

B2B SaaS-стартап — документация на Next.js

30 страниц docs, Next.js 14, активный шаринг в Telegram и LinkedIn

Проблема

Telegram показывал пустое превью, часть ссылок выглядела как обычный текст без визуального якоря

Решение

10 строк кода в generateMetadata, og:image из title страницы, seed=42 для стабильности

Результат

Документация выглядит аккуратно в Telegram и LinkedIn. Конверсия из Telegram +23%.

`https://pixinlink.ru/api/v1/1200x630/${encodeURIComponent(title)}?seed=42`
3

Интернет-магазин — 1 200 карточек товаров

Товары для дома, регулярные репосты карточек во ВКонтакте, тариф Business

Проблема

1 200 товаров, каждый нужно репостить во ВКонтакте — нет уникальных og:image для карточек

Решение

Промпт из slug товара: диван-угловой-серый-велюр. Генерации запускаются по мере реальных репостов

Результат

Клики из ВКонтакте ×2.1. Тариф окупился за 3 недели.

Примеры og:image URL по типам сайтов

Тип сайтаШаблон промптаПример URLСтиль
Новостной порталЗаголовок новости.../1200x630/пожар-склад-москваrealistic
IT-блогТема статьи.../1200x630/docker-контейнеры-деплойartistic
Интернет-магазинНазвание товара.../1200x630/диван-угловой-серый3d-render
РесторанБлюдо или акция.../1200x630/пицца-маргарита-свежаяrealistic
Юридический сайтТема услуги.../1200x630/развод-раздел-имуществаsketch
SaaS-документацияРаздел docs.../1200x630/api-документация-интеграцияartistic
ОбразованиеКурс или урок.../1200x630/урок-python-для-начинающихsketch
НедвижимостьОбъект.../1200x630/квартира-студия-москва-центрrealistic

Правила промпта для og:image: Используйте slug или sanitize_title(заголовок). Добавляйте контекст (не «статья», а конкретную тему). Убирайте шумовые слова. Оптимальная длина — 4–8 слов.

Что делать, если og:image не отображается

  1. Проверьте серверный рендер — краулеры читают HTML-мета-теги. Если OG-теги добавляются только через JavaScript, краулер их не увидит
  2. HTTPS и публичный доступ — картинка должна отдаваться по HTTPS без авторизации. og:image:secure_url для Facebook обязателен
  3. Размер изображения — минимум Facebook 600×315, WhatsApp практически от 300×200
  4. Очистите кеш платформы: Facebook → Sharing Debugger, Telegram → @WebpageBot, LinkedIn → Post Inspector
  5. Проверьте конфликты — убедитесь, что на странице нет нескольких конфликтующих og:image и URL не возвращает 403/404

Частые вопросы

Что такое og:image и зачем он нужен?

URL изображения в Open Graph-разметке — соцсеть использует его в карточке ссылки при репосте. От качества превью напрямую зависит кликабельность ссылки в ленте.

Почему Telegram не обновляет og:image сразу после изменения URL?

Telegram кеширует предпросмотр страницы. Для принудительного обновления используйте @WebpageBot — он заново сканирует URL и пересобирает preview.

Как автоматически формировать промпт из заголовка страницы?

WordPress: sanitize_title(get_the_title()). Django: slugify(post.title). Hugo: {{ .Title | urlize }}. Next.js: encodeURIComponent(title).

Нужна ли регистрация для использования PixInLink в og:image?

Для теста — нет. Для продакшна с контролем лимитов и без водяного знака — нужен тариф Starter.

Сколько генераций нужно сайту с 500 страницами?

Не 500 сразу. Генерация происходит по мере реальных репостов — когда краулер впервые запрашивает og:image. Длинный архив не «съедает» весь лимит за первый день.

Как убедиться, что og:image отображается правильно во ВКонтакте?

Используйте инструмент предпросмотра ВКонтакте, вставьте URL страницы и посмотрите, какое изображение видит краулер. Аналогичен Facebook Sharing Debugger.

Можно ли добавить логотип или текст на og:image?

Title overlay и брендинг-шаблоны — в roadmap Q2–Q3 2026. Пока текст можно включить в промпт: «...с крупной надписью Brand Name».

Что будет, если CDN недоступен?

Краулер может не получить картинку. Рекомендуется иметь fallback og:image (статический дефолт) и отслеживать статус на status.pixinlink.ru.

Как зафиксировать изображение, чтобы оно не менялось?

Параметр ?seed=ID_страницы или хеш slug. Одинаковый prompt + seed = всегда одинаковое изображение.

Поддерживается ли og:image для AMP-страниц?

Да. Open Graph работает через мета-теги страницы независимо от формата верстки. AMP-страница имеет те же мета-теги в <head>.

Что говорят разработчики и SEO-специалисты

«Мы закрыли вопрос og:image сразу для 800 страниц архива. Раньше в репостах почти всё шло с логотипом, теперь карточки тематические, и CTR в соцсетях вырос заметно уже в первый месяц.»

Максим Р., SEO Lead, новостной портал, Москва

«Интеграция в Next.js заняла буквально 10 минут. Самое приятное — не нужен отдельный генератор OG на сервере, достаточно правильно собрать URL в metadata.»

Алексей П., Fullstack Developer, B2B SaaS, Казань

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

Наталья В., SMM-менеджер, e-commerce, Екатеринбург

«Я один раз добавил код в functions.php и закрыл задачу og:image сразу для пяти WordPress-сайтов. Для клиентских проектов это очень удобная автоматизация.»

Сергей М., вебмастер, freelance, Новосибирск

Сколько генераций og:image нужно вашему сайту?

Логика: генерация происходит по мере реальных репостов, а не сразу для всего архива

СценарийСтраницАктивность репостов1-й месяцСледующие месяцыТариф
Блог / стартап50Регулярная~10~2–5/месFree → Starter
Корп. сайт / docs200Регулярная~40~5–10/месStarter
Новостной портал500+Высокая~200~50/месPro
Интернет-магазин1200+Активная~480~100/месBusiness

Формула: первый месяц = страницы × коэффициент активности (редко=10%, регулярно=20%, часто=40%). Следующие месяцы — только новые страницы.

Надёжность и авторство

  • verifiedТехнические примеры проверены на WordPress 6.5, Next.js 14, Hugo 0.124 и Django
  • verifiedCDN: Yandex Cloud, TTL 1 год, 152-ФЗ, серверы в РФ
  • verifiedSLA 99.9% uptime на Pro/Business
  • verifiedИсточники: Open Graph Protocol spec, Meta for Developers, LinkedIn Post Inspector, Telegram @WebpageBot
  • verifiedДата обновления: май 2026. Поддержка: support@pixinlink.ru · @pixinlinksupport

Источники: Open Graph Protocol (ogp.me) · Meta for Developers, Best Practices for Sharing, 2024 · LinkedIn Post Inspector · WhatsApp link preview recommendations, 2024 · Telegram @WebpageBot cache refresh practice · W3Techs, 2026

Попробовать og:image — 50 генераций бесплатно

Интеграция за 15 минут. Без регистрации для первого теста.

Поддержка 24/7: @pixinlinksupport