AIWebPageSEO › Social Preview Fixes › Fix Social Previews in Next.js / Vercel

How to Fix Social Previews in Next.js / Vercel

Next.js and Vercel together offer the cleanest social preview workflow of any platform: Metadata API for OG tags, @vercel/og for dynamic images. Failures usually trace to configuration gaps. This guide covers Next.js/Vercel preview debugging. Pair with social preview guide and OG fixes.

Step-by-step: How to fix social previews in Next.js / Vercel

  1. Test current preview per platform. Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector, WhatsApp (paste into draft). Each shows different behaviour. Test all four — they cache differently.
  2. Verify metadataBase configured. layout.tsx: metadataBase: new URL('https://example.com'). Without it, relative OG image URLs don't resolve and social platforms can't fetch images.
  3. Verify openGraph image URL absolute. Metadata API openGraph.images can be relative if metadataBase set, or absolute. Test: view source on production page, find og:image meta tag, copy URL, paste in browser — should load image.
  4. Set up @vercel/og for dynamic images. If using dynamic OG images, ensure /api/og or /og route is working. Visit URL directly in browser — should return PNG image. Common bugs: edge runtime not configured, JSX in @vercel/og has unsupported features (e.g., complex CSS).
  5. Refresh cached previews per platform. Facebook: Sharing Debugger → Scrape Again. Twitter: re-paste URL in Card Validator. LinkedIn: Post Inspector → Inspect. WhatsApp: hardest (30-day cache), append ?v=2 query parameter to force refresh.
  6. Verify Vercel Image Optimization isn't breaking OG. Vercel auto-optimises images via /_next/image. OG images don't always go through this; verify image URLs in OG tags are not /_next/image URLs (some platforms reject the path).
  7. Monitor across platforms. Monthly: re-test 3-5 critical URLs in each platform debugger. After each Next.js or Vercel deploy: spot-check.
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 social previews

See how your URLs render on Facebook, Twitter, LinkedIn.

Run Social Preview Audit →

Frequently Asked Questions

Why doesn't my Vercel-deployed Next.js show social previews?

Most common: metadataBase not set in layout. Without it, og:image URL is relative and platforms can't fetch. Set metadataBase: new URL('https://example.com') in root layout. Redeploy. Re-test in Facebook Sharing Debugger.

How does @vercel/og work for social previews?

Edge function that generates PNG from JSX. URL /api/og?title=Post returns a 1200x630 image with that title rendered. Used as og:image in metadata. Vercel hosting: free up to limits. Other hosts: requires setup but works with Node.js.

Why are Twitter Cards showing wrong image on Vercel?

Common: og:image set but twitter:image missing. Some Twitter behaviour falls back to og:image; some doesn't. Always set both explicitly in Metadata API: openGraph: { images: [...] }, twitter: { images: [...] }. Same URL is fine.

Can I generate per-post OG images automatically in Next.js?

Yes — @vercel/og pattern. Each post gets unique OG image based on its title, author, date. Improves social engagement significantly. Implementation: app/og/route.tsx as edge function returning ImageResponse with JSX template.

Why doesn't LinkedIn show updated preview after Next.js deploy?

LinkedIn caches OG previews 7 days. Use linkedin.com/post-inspector to force refresh. Or wait 7 days. Pre-warming via Post Inspector before sharing socially is recommended.

Related Guides

Got a problem?