Hvordan setter du sidemetadata (tittel, beskrivelse) i Next.js?

Question

Accepted Answer

App Router har en innebygd **Metadata API** for SEO-tagger (``, `<meta>`, Open Graph, osv.) — du eksporterer metadata fra en `layout.tsx` eller `page.tsx` og Next.js gjengivir de riktige `<head>`-taggene. ## Statisk metadata ```tsx // 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 leser det eksporterte `metadata`-objektet og genererer `<title>`, `<meta name="description">`, OG-tagger, osv. — ingen manuell `<head>`-redigering nødvendig. ## Dynamisk metadata (avhenger av data) For sider hvis tittel avhenger av hentet innhold (blogginnlegg, produkt), eksporter en asynkron `generateMetadata`-funksjon: ```tsx // 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 kjører på serveren og lar hver dynamisk side ha nøyaktig, innholdsspecifikk metadata — essensielt for SEO og deling på sosiale medier av dynamisk innhold. ## Metadata sammenslår seg ned i treet ```tsx // 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 definert i en layout **slås sammen** med (og kan overstyres av) underordnede sider — så du setter nettstedsomfattende standarder en gang og per-side-verdier der det er nødvendig. `template` legger automatisk til nettstedets navn. ## Filbasert metadata ```text app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts ``` Spesielle filer genererer automatisk de tilsvarende metadata-/rutene. ## Hvorfor det betyr noe God metadata driver SEO og forhåndsvisninger for sosial deling. Metadata API gjør det deklarativt og typesikkert — statisk `metadata` for faste sider, asynkron `generateMetadata` for datadrevne sider, og standarder på layoutnivå med maler — erstatning for manuell `<head>`-administrasjon med et rent, server-gjengivelsessystem.