OGMagicIntegrations
OG Images for Next.js
Create an image once and reuse its public URL in your page metadata.
Use the App Router Metadata API to publish an image URL already saved with your content. Next.js renders the social tags on the server; your page does not need an image-generation request to load.
Quick Start
1. Create and save your image URL
Get a private API key through email access and set OGMAGIC_API_KEY in your server or terminal environment. Run this request when publishing content, then save the returned url with the page:
curl https://www.ogmagic.dev/api/images \
-H "Authorization: Bearer $OGMAGIC_API_KEY" \
-H "Content-Type: application/json" \
-d '{"title":"My article","template":"gradient-mesh"}'
# Save the returned url with your content. Keep the API key private.You can also create an image in the editor and copy its hosted URL. Keep the API key private; the returned image URL is public.
2. Publish it in your Next.js metadata
Use your saved URL in the example below. Replace any placeholder URL with the creation response's url, or pass it from the stored content field. The dimensions shown are for the default 1200 × 630 image; use the returned dimensions for custom sizes.
import type { Metadata } from "next";
const title = "My article";
const description = "What this article covers";
const imageUrl = "https://www.ogmagic.dev/images/11111111-1111-4111-8111-111111111111.png";
export const metadata: Metadata = {
title,
description,
openGraph: {
title, description, type: "article",
images: [{ url: imageUrl, width: 1200, height: 630, alt: title }],
},
twitter: {
card: "summary_large_image",
title, description, images: [imageUrl],
},
};
export default function Page() {
return <main><h1>{title}</h1></main>;
}💡 Keep this metadata export in a server component. For CMS routes, read the saved URL in generateMetadata; do not create an image there on every request. Nested openGraph objects replace parent fields, so include the page image explicitly. Pages Router projects can use next/head instead.
Reference: Next.js documentation. After deploying, check the page with the OG tag checker.
Why use OGMagic with Next.js?
Create once
Repeated identical requests reuse the saved image; social views use no generation credits.
55+ templates
Professional designs out of the box. Customize with JSON options.
Email access
Get your API key without a password or profile. Keep it private; share only image URLs.
Every platform
Optimized 1200×630 images that look great on Twitter/X, Facebook, LinkedIn, Discord, and Slack.
Ready to add OG images to your Next.js app?
Start with 50 new images per 30 days. Get your API key through an email link.