Metadata API

Static metadata

Export a metadata object from any layout or page. The framework merges nested layouts' metadata, with the page taking precedence. Title templates compose: %s | My App.

Dynamic metadata

Export an async generateMetadata({ params }) for routes whose tags depend on data (blog post title, product name, user page).

Open Graph images, generated server-side

Drop an opengraph-image.tsx in any segment and Next.js renders it via Vercel's Satori-based ImageResponse. No design tool, no preflight; you author OG images as React JSX.

Put stable defaults in layout metadata and generate only route-specific fields in generateMetadata. Use one canonical URL policy, absolute social-image URLs, and metadata that reflects the same authorization and not-found decisions as the page data. Metadata is part of the rendered route contract, not a detached SEO object. Fetching the same record independently can duplicate work or disagree with the page, and a beautiful Open Graph card cannot rescue an incorrect canonical or private page indexed publicly.

Inspect source HTML for title, description, canonical, robots, and social tags on a normal route, nested route, missing record, and restricted record. Render the Open Graph image at its declared size and run a sharing-card validator.

Code

Static metadata + title template·tsx

// app/layout.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: { template: '%s | My App', default: 'My App' },
  description: 'Built with Next.js',
  openGraph: {
    title: 'My App',
    description: 'Built with Next.js',
    url: 'https://myapp.com',
    siteName: 'My App',
    type: 'website',
  },
  twitter: { card: 'summary_large_image' },
};

Dynamic metadata for a blog post·tsx

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next';

type Props = { params: Promise<{ slug: string }> };

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: { images: [post.ogImage] },
  };
}

Dynamic OG image as JSX·tsx

// app/blog/[slug]/opengraph-image.tsx
import { ImageResponse } from 'next/og';

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

export default async function OG({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  return new ImageResponse(
    (
      <div style={{
        fontSize: 64, background: '#0f172a', color: 'white',
        width: '100%', height: '100%', padding: 48, display: 'flex',
        flexDirection: 'column', justifyContent: 'flex-end',
      }}>
        <div>{post.title}</div>
      </div>
    ),
    { ...size }
  );
}

Static metadata

Dynamic metadata

Open Graph images, generated server-side

Code

External links

Exercise

Progress

Comments 0