← Blog

Open Graph Tags in Next.js: The 2026 Developer Guide

Next.js makes OG tags easy with the Metadata API. Here's everything you need to know — from static to dynamic OG images.

Not sure if your Next.js OG tags are correct?

Check your Open Graph tags free with Proovd — paste a URL and see exactly how it looks on X, LinkedIn, Slack, Discord, WhatsApp, and Reddit.

Quick Answer

  • Next.js 13+ uses the Metadata API for OG tags
  • Static pages: export metadata object
  • Dynamic pages: use generateMetadata()
  • Dynamic OG images: use @vercel/og

Next.js App Router — Static Metadata

In Next.js 13+ (App Router), the simplest way to set OG tags is the metadata export in your layout or page file:

export const metadata = {
  title: 'My Next.js App',
  description: 'A Next.js app with OG tags',
  openGraph: {
    title: 'My Next.js App',
    description: 'A Next.js app with OG tags',
    images: ['https://yoursite.com/og-image.jpg'],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'My Next.js App',
    description: 'A Next.js app with OG tags',
    images: ['https://yoursite.com/og-image.jpg'],
  },
};

This automatically generates the correct <meta> tags in your page <head>. Next.js handles the rest.

Next.js App Router — Dynamic Metadata

For dynamic pages (blog posts, product pages), use generateMetadata():

import { notFound } from 'next/navigation';
import { getPost } from '@/lib/posts';

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  if (!post) notFound();

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
      type: 'article',
      publishedTime: post.date,
      authors: [post.author],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

Dynamic OG Images with @vercel/og

For custom OG images (with your brand colors, post titles, etc.), use @vercel/og:

// app/api/og/route.ts
import { ImageResponse } from '@vercel/og';

export function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || 'Default Title';

  return new ImageResponse(
    (
      

        

          {title}
        

      

    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

Then reference this API route in your metadata:

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    openGraph: {
      images: [`https://yoursite.com/api/og?title=${encodeURIComponent(post.title)}`],
    },
    twitter: {
      images: [`https://yoursite.com/api/og?title=${encodeURIComponent(post.title)}`],
    },
  };
}

Next.js Pages Router

If you're using the older Pages Router, use next/head or the next-seo package:

import Head from 'next/head';

export default function PostPage() {
  return (
    <Head>
      <meta property="og:title" content={post.title} />
      <meta property="og:description" content={post.excerpt} />
      <meta property="og:image" content={post.coverImage} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={post.title} />
      <meta name="twitter:image" content={post.coverImage} />
    </Head>
  );
}

Or use next-seo for a cleaner API:

import { NextSeo } from 'next-seo';

<NextSeo
  title={post.title}
  description={post.excerpt}
  openGraph={{
    title: post.title,
    description: post.excerpt,
    images: [{ url: post.coverImage }],
    type: 'article',
  }}
  twitter={{
    type: 'summary_large_image',
  }}
/>

Quick Fix Checklist

  1. Use the Metadata API for static pages
  2. Use generateMetadata() for dynamic pages
  3. Set both openGraph and twitter properties
  4. Use @vercel/og for dynamic OG images
  5. Test with Proovd to verify on all platforms

Frequently Asked Questions

Does Next.js automatically render OG tags in the HTML?

Yes. Next.js injects the metadata as <meta> tags in the server-rendered HTML, so crawlers see them without JavaScript.

Can I use dynamic OG images with Vercel Edge Functions?

Yes. @vercel/og runs on Vercel Edge and generates images on-the-fly. The image URL is referenced in your metadata, and platforms fetch it when they crawl your page.

Related Articles

Verify your Next.js OG tags across all platforms

Check your Open Graph tags free with Proovd — paste a URL and see the preview on X, LinkedIn, Slack, Discord, WhatsApp, and Reddit.