How to Add Open Graph Images to Your Next.js Blog (Complete Guide)

You launched your Next.js blog. It looks great in the browser. Then someone shares a post on Twitter and it shows up as a blank card with no image, no title, just a raw URL. You get 4 clicks instead of 400. Here's how to fix it in under 10 minutes — and make every post look professional when shared anywhere. What Next.js Gives You Out of the Box Next.js has excellent metadata support via the generateMetadata function (App Router) or Head component (Pages Router). But it only generates the tags — you still need to provide an actual image file for og:image . Most tutorials skip this part. They show you how to add the tags but leave you to figure out where the image comes from. The App Router Approach In your app/blog/[slug]/page.tsx : import type { Metadata } from ' next ' export async function generateMetadata ({ params }): Promise < Metadata > { const post = await getPost ( params . slug ) return { title : post . title , description : post . excerpt , openGraph : { title : post . t