Next.js Metadata (2025): App Router SEO that scales

Master nextjs metadata with App Router. Learn file-based config, generateMetadata, social cards, JSON-LD, canonical/robots, sitemaps, i18n, and performance-safe patterns for large sites.

App RouterOpen GraphJSON-LD2025

🔒 Remove metadata in your images — MetaRemover.com Official Next.js metadata docs →

Coverage

SEO primitives

OG/Twitter/JSON-LDFull

DX

File-based control

Complex sitesReady

Safety

No FOUC/CSR only

SSR-first SEOSolid

What is Next.js metadata?

In the App Router, nextjs metadata is a typed API to define SEO and social tags at the file system level. You can return metadata from generateMetadata (server) or place a metadata.ts file next to a page/layout. Client-only pages can still set tags via <Head> as shown here.

Rule of thumb

Prefer server metadata for crawlable, deterministic SEO. Use client <Head> only when a page must be a client component.

App Router metadata model

Where	What	Notes
layout.tsx	Site-wide defaults (title template, OG, twitter)	Inherit down the tree
page.tsx (server)	Route-specific metadata via generateMetadata	Fetch data to build dynamic tags
metadata.ts	Static metadata object	Tree-shakable, fast
client page	<Head> fall-back	Avoid heavy runtime logic

Working with screenshots or hero images for your social cards? Scrub hidden EXIF/GPS before publishing. Use a privacy-first, browser-only cleaner — MetaRemover.com.

generateMetadata vs metadata.ts

Dynamic metadata

Per request

// app/blog/[slug]/page.tsx (server component)
export async function generateMetadata({ params }) {
  const post = await fetchPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: { images: [{ url: post.ogImage }] },
    alternates: { canonical: 'https://example.com/blog/' + params.slug }
  };
}

Ideal for blogs, products, and anything data-backed.

JSON-LD patterns

Keep JSON-LD minimal, valid, and aligned with the visible content. Prefer server-side injection via generateMetadata.

<script type="application/ld+json">
{ "@" : "schema", "fixed": "Keep valid JSON here" }
</script>

Canonicals, robots & sitemaps

Set alternates.canonical or a canonical link in <Head>.
Use robots to control index/follow and preview settings.
Create app/sitemap.ts or an API route for dynamic sitemaps.

Performance & caching

Checklist

Avoid blocking data fetches in generateMetadata. Cache requests, precompute OG, and don’t overuse client <Head>updates that cause re-hydration work.

i18n alternates & OG locales

Provide alternates.languages and match localized OG titles/descriptions. Keep canonical pointing to the primary language.

CLI snippets & validation

Validate tags

Quick checks

# Check HTML head quickly
curl -s https://example.com | grep -Ei 'og:|twitter:|canonical|ld\+json' | sed -e 's/^/• /'

Use the Rich Results Test for JSON-LD, and Sharing Debugger for OG.

Pre-publish checklist

Ship with confidence

Title/description unique & within length
Absolute OG image URLs; 200 OK
Canonical set; no conflicting canonicals
Robots/sitemap present; hreflang correct

Image privacy for social cards

Social images often originate from photos or design exports that can carry hidden EXIF data. Before committing OG/Twitter images to your repo or CDN, scrub EXIF/GPS and authoring traces to avoid leaking locations or device info.

Use a privacy-first, browser-only cleaner — MetaRemover.com. It processes images locally (no uploads).

FAQ

Preparing OG/Twitter images? Sanitize them first with MetaRemover.com — quick, private, browser-only.

Ship great SEO — protect user privacy

Nail your Next.js metadata stack (OG, Twitter, JSON-LD, canonicals). For images, scrub hidden EXIF before pushing to your CDN.

Remove Metadata Now → MetaRemover.com