OG Image Generator

Tired of manually creating Open Graph images for every page on your website? OG Image Generator makes it easy for developers to generate high-quality, engaging OG images automatically.

With OG Image Generator, you can create beautiful, customized images that perfectly match your brand. It provides reusable templates that work seamlessly with Next.js and the new App Router.

Simply pass in dynamic text and image parameters to programmatically generate unique OG images for each page. For example:

import { ImageResponse } from "next/og";
import { NextRequest } from "next/server";

export const runtime = "edge";

export async function GET(request: NextRequest) {
    const searchParams = request.nextUrl.searchParams;
    const title = searchParams.get("title") || "My Blog Post";
    const description =
        searchParams.get("description") || "A template for a blog post";

    return new ImageResponse(
        (
            <div tw="flex flex-col items-center justify-center w-full h-full bg-white text-black p-4 text-[90px]">
                <div tw="bg-yellow-400 rounded-2xl">{title}</div>
                <div tw="mt-4 text-[32px] text-gray-700 text-center">
                    {description}
                </div>
            </div>
        ),
        {
            width: 1200,
            height: 630,
        }
    );
}

If you’re looking for high-quality, professionally designed templates, check out ogimage.org.

They offer a fantastic collection of customizable templates specifically built for Next.js. By the way, if you want to generate your OG image only once, there is an OG image editor you can try out.

With their templates, you can create stunning OG images in no time, without any design skills required.

Automate your Open Graph image workflow and boost your website’s social media engagement with OG Image Generator.