Динамічні OG-зображення для SaaS

Динамічні OG-зображення для SaaS — це соціальні превʼю (social previews) для кожної сторінки, які генеруються автоматично, коли ваш дашборд (dashboard), документація, журнал змін (changelog) або маршрути для користувачів поширюються. FastOG рендерить кожне зображення на вимогу та кешує його, тому SaaS може надати кожній сторінці унікальну брендовану картку без жодної ручної дизайнерської роботи.

Чому SaaS-продукти потребують динамічних OG-зображень

SaaS-продукти мають багато поверхонь, якими можна ділитися: сторінки продуктів, сторінки документації, записи у журналі змін, публічні профілі користувачів і картки досягнень. Кожна з них, опублікована в X або LinkedIn, виграє від власної картки, а не від єдиного запасного логотипа. Генерувати їх вручну не масштабується; генерувати їх під час рендерингу — так.

Основний шаблон

Для кожної сторінки, для якої потрібна картка, підпишіть URL-адресу за допомогою заголовка сторінки (та будь-яких полів, специфічних для сторінки) під час рендерингу. FastOG генерує PNG при першому запиті, а Cloudflare кешує його.

tsx

// Next.js — app/docs/[slug]/page.tsx
export function generateMetadata({ params }) {
    const doc = await getDoc(params.slug);
    return {
        openGraph: {
            images: [generateOgImageUrl({
                template: "default",     // or "devtool", "launch", "company"
                title: doc.title,
                subtitle: doc.excerpt,
                domain: "yoursaas.com",
            })],
        },
    };
}

Вдалі приклади використання для SaaS

Поверхня	Ідеї шаблонів
Сторінки продукту / маркетингові сторінки	`company`, `hero`, `product`
Сторінки документації	`default`, `devtool`
Записи у журналі змін	`changelog`, `launch`
Публічні картки користувачів / аватарів	`testimonial`, `stats`, `image-right`
Сторінки з цінами	`pricing`, `stats`

FAQ

Чи потрібен мені окремий шаблон для кожного випадку використання?

Ні. Зазвичай достатньо одного шаблону разом із переданими полями URL; решту покриває пара шаблонів. Усі вони рендеряться у форматі 1200×630.

Як обробляти багато сторінок, не витрачаючи квоту?

Ідентичні URL кешуються на межі мережі (edge) назавжди після першого рендеру, тому та сама сторінка, опублікована 1000 разів, зараховується як 1 рендер. Зміна контенту просто створює новий URL.

Чи можу я брендувати картки під свій SaaS-бренд?

Так — задайте brand_name, brand_logo, bg_color, шрифти та патерни для кожного URL. Перегляньте плейграунд, щоб попередньо переглянути шаблони в реальному часі.

Спробуйте безкоштовно — реєстрація не потрібна

Переглядайте та тестуйте динамічні OG-зображення за лічені секунди.

Відкрити безкоштовний тестер OG-зображень

Тема