@djangocfg/og-image

@djangocfg/og-image

Dynamic Open Graph image generation for Next.js with customizable templates, social media previews, and SEO optimization

Part of DjangoCFG — a modern Django framework for building production-ready SaaS applications. All @djangocfg/* packages are designed to work together, providing type-safe configuration, real-time features, and beautiful admin interfaces out of the box.

Overview

@djangocfg/og-image simplifies Open Graph image generation for Next.js applications. Create beautiful, dynamic social media preview images that boost click-through rates on Twitter, Facebook, LinkedIn, and other platforms.

Features

• Dynamic Generation - Generate OG images on-the-fly
• Edge Runtime - Fast, global deployment with Vercel Edge
• Customizable Templates - Pre-built and custom templates
• Google Fonts - Load fonts dynamically without bundling
• Base64 Safe URLs - Avoid encoding issues
• TypeScript - Full type safety

Installation

npm install @djangocfg/og-image
# or
pnpm add @djangocfg/og-image
# or
yarn add @djangocfg/og-image

Quick Start

API Route Handler

// app/api/og/route.tsx
import { ImageResponse } from 'next/og';
import { loadGoogleFonts } from '@djangocfg/og-image/utils';

export const runtime = 'edge';

export default async function handler(req) {
  const fonts = await loadGoogleFonts([
    { family: 'Manrope', weight: 700 }
  ]);

  return new ImageResponse(
    <YourTemplate />,
    { width: 1200, height: 630, fonts }
  );
}

Generate OG Image URLs

import { generateOgImageUrl } from '@djangocfg/og-image/utils';

// Base64 encoding (safe, default)
const url = generateOgImageUrl('/api/og', {
  title: 'Page Title',
  subtitle: 'Description'
});

Use in SEO Meta Tags

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

Exports

Path	Description
@djangocfg/og-image	Main exports
@djangocfg/og-image/handler	Request handlers
@djangocfg/og-image/components	Pre-built templates
@djangocfg/og-image/utils	Utility functions

API Reference

loadGoogleFonts(fonts)

Load fonts from Google Fonts API.

const fonts = await loadGoogleFonts([
  { family: 'Manrope', weight: 700 },
  { family: 'Inter', weight: 400 }
]);

generateOgImageUrl(baseUrl, params, useBase64?)

Generate OG image URL with params.

const url = generateOgImageUrl('/api/og', {
  title: 'Hello',
  description: 'World'
}, true); // base64 encoding (default)

Image Dimensions

Platform	Recommended Size
Facebook	1200 x 630
Twitter	1200 x 600
LinkedIn	1200 x 627
Discord	1200 x 630

Requirements

• Next.js >= 13.0.0
• React >= 18.0.0

Documentation

Full documentation available at djangocfg.com

Contributing

Issues and pull requests are welcome at GitHub

License

MIT - see LICENSE for details