De App Router heeft een ingebouwde Metadata API voor SEO-tags (<title>, <meta>, Open Graph, enz.) — je exporteert metadata uit een layout.tsx of page.tsx en Next.js renderdt de juiste <head>-tags.
De App Router heeft een ingebouwde Metadata API voor SEO-tags (<title>, <meta>, Open Graph, enz.) — je exporteert metadata uit een layout.tsx of page.tsx en Next.js renderdt de juiste <head>-tags.
// app/about/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "About Us",
description: "Learn about our company and team.",
openGraph: {
title: "About Us",
images: ["/og-about.png"],
},
};
export default function About() { return <h1>About</h1>; }
Next.js leest het geëxporteerde metadata-object en genereert <title>, <meta name="description">, OG-tags, enz. — geen handmatige <head>-bewerking nodig.
Voor pagina's waarvan de titel afhangt van opgehaalde inhoud (blogpost, product), exporteer je een async generateMetadata-functie:
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await getPost(params.slug); // fetch the post
return {
title: post.title,
description: post.excerpt,
openGraph: { images: [post.coverImage] },
};
}
Dit draait op de server en stelt elke dynamische pagina in staat om nauwkeurige, inhoudspecifieke metagegevens te hebben — essentieel voor SEO en het delen op sociale media van dynamische inhoud.
// app/layout.tsx — defaults + a title template
export const metadata: Metadata = {
title: { default: "My Site", template: "%s | My Site" }, // child titles become "About | My Site"
};
Metagegevens die in een layout zijn gedefinieerd, worden samengevoegd met (en kunnen worden overschreven door) onderliggende pagina's — dus je stelt sitewijde standaardwaarden één keer in en per-pagina-waarden waar nodig. De template voegt automatisch de sitenaam toe.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Speciale bestanden genereren automatisch de corresponderende metagegevens/routes.
Goede metagegevens stimuleren SEO en voorbeelden van social-shares.
De Metadata API maakt het declaratief en type-veilig — statische metadata voor vaste pagina's, async generateMetadata voor gegevensgestuurde pagina's, en standaardwaarden op layoutniveau met sjablonen — ter vervanging van handmatig <head>-beheer door een schoon, server-rendered systeem.