App Router har en indbygget Metadata API til SEO-tags (<title>, <meta>, Open Graph osv.) — du eksporterer metadata fra en layout.tsx eller page.tsx og Next.js gengiver de korrekte <head>-tags.
App Router har en indbygget Metadata API til SEO-tags (<title>, <meta>, Open Graph osv.) — du eksporterer metadata fra en layout.tsx eller page.tsx og Next.js gengiver de korrekte <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 læser det eksporterede metadata-objekt og genererer <title>, <meta name="description">, OG-tags osv. — ingen manuel <head>-redigering.
Til sider hvor title afhænger af hentet indhold (et blogindlæg, et produkt) eksporterer du en asynkron generateMetadata-funktion:
// 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] },
};
}
Dette køres på serveren og lader hver dynamisk side have nøjagtig, indholds-specifik metadata — essentielt for SEO og social-deling af dynamisk indhold.
// 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"
};
Metadata defineret i et layout flettes med (og kan overskrives af) underordnede sider — så du sætter site-brede standarder én gang og per-side værdier hvor det er nødvendigt. template tilføjer automatisk sitenavn.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Specielle filer genererer tilsvarende metadata/ruter automatisk.
God metadata driver SEO og social-share-forhåndsvisninger.
Metadata API gør det deklarativt og type-sikkert — statisk metadata for faste sider, asynkron generateMetadata for datadrevne sider, og layout-niveau standarder med skabeloner — udskifter manuel <head>-styring med et rent, serverrendered system.