Topic

Add metadata and Open Graph images

Definition

Next.js metadata exports describe document and social-preview information, while Open Graph image routes can generate share images for a route.

In simpler words

Metadata is the title, description, and preview other tools see when people open, bookmark, search, or share a page.

Good metadata represents the current route accurately rather than repeating generic application copy.

After this you can

Set static title and description metadata
Generate data-dependent metadata
Explain the purpose of Open Graph images

Describe the route, not just the app

Static metadata is appropriate when a route’s description never depends on parameters. generateMetadata is appropriate when the title or description depends on a dynamic segment or server-rendered data.

Metadata should be concise, specific, and consistent with the visible page. Search engines and social clients may display it without any of the route’s page body.

Static Course metadata

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Course | Next.js foundations',
  description: 'Learn App Router foundations in this full-stack monorepo.',
};

A stable route can export metadata directly from its page or layout.

Mistake: using page text as metadata

// Wrong — a generic or misleading preview
export const metadata = { title: 'Welcome' };

// Right — name the route’s actual purpose
export const metadata = { title: 'Tickets | Course' };

Metadata must identify the destination when it is seen outside the app.

Generate social previews honestly

Definition

An Open Graph image is a visual summary that social platforms may show beside a shared URL.

In simpler words

It should identify the route and brand without promising content or status the page cannot deliver.

Use a route-specific image when sharing behavior justifies the work; a clear default is better than a misleading custom image.

Keep generated image text large enough to remain useful in small social cards.

Live playground

Metadata playground

Write metadata for a ticket route and predict its social preview.

Export metadata / generateMetadata per route.

next-metadata-og

Keep in mind

Write a title that distinguishes the route.
Use generateMetadata only when route data changes metadata.
Make OG images truthful and legible at small sizes.