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

Динамические OG-изображения для SaaS — это постраничные превью для соцсетей, которые генерируются автоматически при публикации ссылок на ваш дашборд, документацию, журнал изменений или пользовательские маршруты. 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) навсегда после первого рендера, поэтому одна и та же страница, опубликованная 1 000 раз, учитывается как 1 рендер. Изменение контента просто создает новый URL.

Можно ли брендировать карточки под свой SaaS-бренд?

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

Попробуйте бесплатно — регистрация не требуется

Предпросмотр и тестирование динамических OG-изображений за секунды.

Открыть бесплатный тестер OG-изображений

Тема