AIWebPageSEO › OG Generator Fixes › Fix Open Graph in Next.js (Dynamic OG Images)

How to Fix Open Graph in Next.js (Dynamic OG Images)

Next.js Metadata API makes static OG tags trivial; dynamic OG image generation (per-post images with title + author) is a distinct workflow using @vercel/og. This guide covers Next.js OG. Pair with OG guide.

Step-by-step: How to fix OG in Next.js

  1. Set static OG in Metadata API. layout.tsx: openGraph: { title, description, url, siteName, locale, type, images: [{url: '/og-default.png', width: 1200, height: 630}] }. Site-wide defaults that any page can override.
  2. Set per-page OG. page.tsx generateMetadata: openGraph: { title: post.title, description: post.excerpt, images: [{url: post.coverImage, width: 1200, height: 630}] }. Overrides layout defaults for this page.
  3. Generate dynamic OG images with @vercel/og. Install @vercel/og. Create app/og/route.tsx as edge function returning ImageResponse with React JSX. URL like /og?title=Hello generates a 1200x630 image at request time. Use as image in metadata: openGraph: { images: [`/og?title=${encodeURIComponent(post.title)}`] }.
  4. Configure Twitter Cards. metadata.twitter: { card: 'summary_large_image', title, description, images }. Often identical to OG; Next.js doesn't automatically derive Twitter from OG, set explicitly.
  5. Set metadataBase. Required for OG image URLs to resolve absolute. layout.tsx: metadataBase: new URL('https://example.com'). Without it, OG image URLs are relative and platforms can't fetch them.
  6. Validate. Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector. Refresh each after deploys. Verify image dimensions, title length, description length.
  7. Optimise OG image dimensions and weight. 1200x630 ideal. PNG or JPG (not WebP — preview platform support limited). Under 1MB. Test on slow connections — large OG images don't get fetched in time, fallback shown.
Tip. Pin your framework, dependency, and config versions in a single internal doc (Next.js version, React version, rendering strategy choices, custom config). When something breaks after a framework or library update, you have a baseline to compare against.

📤 Audit Next.js OG

Find missing or broken Open Graph configuration.

Run OG Audit →

Frequently Asked Questions

How does @vercel/og work?

Edge function that uses Satori to render JSX (limited subset) to PNG. URL like /api/og?title=Post generates an image with that title baked in. Generates at request time, cacheable, very fast (edge function < 1s). Free on Vercel, works elsewhere with setup.

Should I use static OG images or dynamic?

Static: simpler, faster initial render, fixed branding. Dynamic: per-post imagery, more engaging, more setup. Blogs and content sites usually benefit from dynamic (each post has unique OG image). Product/marketing sites usually fine with static.

Why aren't my Next.js OG images appearing on social platforms?

Common: metadataBase not set (URLs resolve to relative paths). Image not publicly accessible (auth required, CORS, or 404). Image not in supported format (WebP not widely supported by social platforms). Cached old image (use platform debugger to refresh).

Can I generate OG images at build time instead of runtime?

Yes — sharp library can generate at build. Or use a service like Bannerbear or PlaceID. Trade-off: build time vs runtime. For sites with 1000s of pages, runtime (@vercel/og) is more flexible; small sites can pre-generate at build.

Best OG image dimensions for all platforms?

1200x630. Facebook, Twitter, LinkedIn all support and prefer this. WhatsApp accepts but prefers 1.91:1 ratio (1200x628 also fine). Always ensure image stays readable when cropped to square (some preview platforms crop).

Related Guides

Got a problem?