App Router har ett inbyggt Metadata API för SEO-taggar (<title>, <meta>, Open Graph, etc.) — du exporterar metadata från en layout.tsx eller page.tsx och Next.js renderar rätt <head>-taggar.
App Router har ett inbyggt Metadata API för SEO-taggar (<title>, <meta>, Open Graph, etc.) — du exporterar metadata från en layout.tsx eller page.tsx och Next.js renderar rätt <head>-taggar.
// 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 exporterade metadata-objektet och genererar <title>, <meta name="description">, OG-taggar, etc. — ingen manuell <head>-redigering.
För sidor vars titel beror på hämtat innehål (ett blogginlägg, en produkt) exporterar du en async 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] },
};
}
Detta körs på servern och låter varje dynamisk sida ha korrekt, innehållsspecifik metadata — väsentlig för SEO och social delning av dynamiskt innehål.
// 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 definierad i en layout slås samman med (och kan åsidosättas av) underordnade sidor — så du ställer in webbplatsomfattande standardvärden en gång och värdena per sida där det behövs. template lägger automatiskt till webbplatsens namn.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Speciella filer genererar motsvarande metadata/vägar automatiskt.
God metadata driver SEO och förhandsgranskningar för social delning.
Metadata API gör det deklarativt och typesäkert — statisk metadata för fasta sidor, async generateMetadata för datadrivna sidor, och standardvärden på layoutnivå med mallar — ersätter manuell <head>-hantering med ett rent, serverrenderat system.