How to Add Dynamic OG Images in Next.js: Step-by-Step Guide

Dynamic does not have to mean complicated. Start by choosing the values that make one preview different from another. A blog normally needs the article title and category. A product page may need the product name, image, and collection. Keep the number of variables small enough that the template remains legible.

App Router pages are Server Components by default. Use generateMetadata for values that depend on route parameters or loaded content. Resolve the page data, build the final image URL, and return the Open Graph and X card metadata from the server.

import type { Metadata } from "next";

type PageProps = {
	params: Promise<{ slug: string }>;
};

export async function generateMetadata({
	params,
}: PageProps): Promise<Metadata> {
	const { slug } = await params;
	const post = await getPost(slug);
	const imageUrl = getSocialImageUrl(post);
	const pageUrl = `https://example.com/blog/${post.slug}`;

	return {
		title: post.title,
		description: post.description,
		alternates: { canonical: pageUrl },
		openGraph: {
			type: "article",
			url: pageUrl,
			title: post.title,
			description: post.description,
			images: [{
				url: imageUrl,
				width: 1200,
				height: 630,
				alt: `Preview for ${post.title}`,
			}],
		},
		twitter: {
			card: "summary_large_image",
			title: post.title,
			description: post.description,
			images: [imageUrl],
		},
	};
}

Next.js can generate an image with file conventions or ImageResponse, and an external service can generate and host it from a reusable template. The metadata API only needs the finished URL. Choose the image source based on design workflow, runtime limits, caching, and who needs to edit templates.

The generated URL must work for an unauthenticated crawler. Avoid localhost, preview-only deployment hosts, private object storage, and links that expire. A deterministic URL is useful when the same content should keep the same image until its inputs change.

View the page source or fetch the document as a crawler would. Confirm that the expected meta tags are present before hydration. Then open the image URL directly and check the final page in a preview inspector.