Next.js Metadata API: SEO Setup That Actually Works

Next.js 16's metadata API is the cleanest SEO setup any framework currently offers. You export a metadata object (or a generateMetadata function), and Next handles the rest. Done right, you get correct meta tags, working Open Graph, and structured data without any third-party plugin.

Static metadata at the layout level

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

export const metadata: Metadata = {
  metadataBase: new URL('https://example.com'),
  title: { default: 'Example', template: '%s | Example' },
  description: 'A short site description',
  openGraph: { siteName: 'Example', locale: 'en_US', type: 'website' },
  twitter: { card: 'summary_large_image' },
}

The title.template string is the under-rated feature. Set it once, and every page that exports its own title gets wrapped automatically: "Blog Post Title | Example".

Per-page generateMetadata

For dynamic routes, export an async generateMetadata function. Receive the route params, fetch the data you need, and return a Metadata object. Next runs it as part of rendering and includes the result in the static HTML.

Structured data

Next's metadata API does not include structured data (JSON-LD) directly. Add it as a <script type="application/ld+json"> in the page body. For blog posts, include Article schema with author, datePublished, and image. Search engines use this to render rich results.

Open Graph images

Use the opengraph-image.tsx file convention — Next generates the OG image from a React component at build time. No need to hand-make images for every post; the component reads the post title and produces the image. Search and social sites both use it.