How to Add Open Graph & Twitter Cards in Next.js (No Plugins Needed)

If you're bootstrapping a SaaS product, every click counts. The way your links look when shared, whether it’s on Twitter, LinkedIn, Slack, or elsewhere - can significantly impact whether they get noticed or overlooked.

A well-crafted social preview, complete with an engaging image, a clear title, and a concise description, establishes trust before potential users even visit your site.

It communicates that your product is serious and worth their time.

That's what we shall be looking at achieving in this post using Next.js's open graph and twitter cards support. 

There are two ways of adding open graph to your Next.js app:

1. …the first involves adding the open graph files (images and optional alt text files) at the root of a route. This is the quickest, no-code way to get rich previews in place. Next.js handle everything else automatically.
2. The second approach is generating them dynamically, which gives you the flexibility to customize each preview to the specific content or user. This is perfect if you’re running a blog or ecommerce website.

In this post, we’ll walk through both methods step-by-step, so you can decide which one fits your workflow.

1. File-Based Metadata with the Next.js App Router (Fastest Win)

The App Router in Next.js makes it incredibly simple to add Open Graph and Twitter Card metadata by just adding static image and corresponding alt text files at the root of any route segment.

For Open Graph, the convention is to add a opengraph-image.png (or .jpg, .gif) inside your app/ folder, or deeper for route-specific previews. Next.js automatically generates the corresponding <meta> tags like og:image, dimensions, and type.

The same convention applies to Twitter: by including a twitter-image.png and Next.js automatically generates Twitter-specific meta tags for any route segment.

For each twitter-image and open-graph image, we also add corresponding Alt text files: by adding a matching .alt.txt file (e.g. opengraph-image.alt.txt) to provide descriptive alt texts for accessibility and richer context.

2. Dynamic OG Images with ImageResponse

Static images are great for a quick setup, but what if you want previews that change depending on the content? For example, each blog post or product page could have its own customized image.

With the App Router, you can generate OG images dynamically using opengraph-image.tsx (or .js/.tsx). These files export:

• alt, size, and contentType (e.g. { width: 1200, height: 630 })
• A default function that returns an ImageResponse from next/og

Example:

import { ImageResponse } from 'next/og';

export const alt = 'Dashboard Preview';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

export default async function Image({ params }) {
  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#0f172a', 
          color: 'white',
          fontSize: 48,
          fontWeight: 'bold',
          padding: '0 50px',
          textAlign: 'center',
          fontFamily: 'sans-serif',
        }}
      >
        {params.featureName} – Now Live on Your Dashboard
      </div>
    ),
    {
      ...size,
    }
  );
}

Next.js then generates the correct Open Graph meta tags automatically.

3. Full Metadata Control with the Metadata API

For more customization: titles, descriptions, multiple images, you can define and export metadata directly in your (tsx/jsx) pages or layout files.

export const metadata = {
  title: 'My SaaS App | Launch Dashboard',
  description: 'Track user onboarding in real time.',
  openGraph: {
    title: 'My SaaS App',
    description: 'Track user onboarding in real time.',
    url: 'https://your-saas.com',
    images: [
      {
        url: 'https://your-saas.com/opengraph-image.png',
        width: 1200,
        height: 630,
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'My SaaS App',
    description: 'Track user onboarding in real time.',
    images: [
      {
        url: 'https://your-saas.com/twitter-image.png',
        alt: 'Dashboard view',
      },
    ],
  },
};

This approach works alongside static or dynamic OG images and gives you full control over how your content is presented across platforms.

Conclusion

Adding Open Graph and Twitter Cards in Next.js is quick, lightweight, and pays off immediately. Use static files for instant improvements, and use the dynamic option for personalized previews, or Metadata API when you need full and complete customization. 

That's it! Ship that UI!