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.

Open official example (opens in new tab)

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.

Test

Check your understanding

At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥80% (enforced by the API) to save progress.

Checking your session…

15 questions · concept 5 · syntax 3 · practical 4 · logic 3

1. How do you set titles in App Router?

Concept

Render a <title> tag inside the page component’s JSXSet document.title in a useEffect in the layoutexport const metadata or generateMetadataAdd a <Head> component from next/head to the page

2. generateMetadata use?

Syntax

Regenerate the page’s metadata on every client renderGenerate metadata for all routes at build time onlyInject metadata into Client Components via a hookDynamic per-route metadata from params/data

3. Open Graph images?

Practical

Add a <meta property="og:image"> manually in the page bodyConfigure openGraph metadata for social previewsDrop an og.png in public/ and Next detects it automaticallySet the image via a NEXT_PUBLIC_OG_IMAGE variable

4. Why metadata matters?

Logic

Tabs, SEO, and link previewsIt configures which routes are statically cachedIt controls the page’s runtime performance budgetIt determines the order components hydrate in

5. Icons/favicons?

Concept

A favicon.ico in public/ must be linked manually in the headIcons are set with a <link rel="icon"> in a next/head tagmetadata.icons / app icons conventionsIcons are configured under an images key in next.config

6. Per-segment metadata merges?

Practical

Only the root layout’s metadata is ever usedNested segments can compose metadataChild metadata fully replaces the parent’s objectSibling segments’ metadata is merged into every route

7. Don’t put secrets in metadata?

Syntax

Metadata can be public in HTML — no secretsMetadata is stripped from the HTML before it reaches the clientMetadata is only visible to search engine crawlersServer-only metadata fields keep values out of the response

8. Twitter/card fields?

Logic

Supported via metadata social fieldsOnly supported by adding raw <meta name="twitter:card"> tagsConfigured separately in a twitter.config fileDerived from openGraph automatically and never set directly

9. Absolute canonical URLs?

Concept

Relative canonical URLs resolve to absolute ones without configSet the canonical URL under a domain key in next.configCanonical URLs are generated from the request host automaticallySet metadataBase / canonical wisely for prod domain

10. Which is correct?

Practical

Use next/head in the App Router for all metadataPlace all meta tags directly in the root layout’s <head>Use only generateMetadata, never the static metadata exportPrefer the Metadata API over manual head tags when possible

11. What does exporting metadata do?

Conceptintermediate

export const metadata = { title: 'Tickets' };

Sets the metadata for every route in the appRenders a visible heading at the top of the pageSets the page title (and other head metadata) for that routeConfigures the route’s caching behavior

12. Why use generateMetadata instead of a static export?

Syntaxadvanced

export async function generateMetadata({ params }) {
  const t = await getTicket(params.id);
  return { title: t.title };
}

Because static metadata can’t include a title fieldTo render the metadata inside a Client ComponentTo update the metadata after the page hydratesTo compute metadata dynamically from route params/data

13. What is openGraph used for?

Practicalintermediate

export const metadata = {
  openGraph: { title: 'Post', images: ['/og.png'] },
};

Improving the page’s search ranking directlySetting the browser tab’s title and faviconConfiguring which crawlers may index the pageRich link previews when the page is shared on social platforms

14. What is wrong with this metadata?

Logicadvanced

export const metadata = { title: 'Dashboard', description: process.env.SECRET_KEY };

process.env is undefined inside metadata exportsMetadata is rendered into public HTML — never put secrets theredescription must be under 160 characters or it is droppedIt is safe because metadata runs only on the server

15. Why set metadataBase?

Conceptintermediate

export const metadata = { metadataBase: new URL('https://example.com') };

To set the base path prefix for all the app’s routesSo relative OG/canonical URLs resolve to absolute production URLsTo choose which domain the app deploys toTo cache OG images at the specified origin

Checking your session…