Der App Router verfügt über eine eingebaute Metadata API für SEO-Tags (<title>, <meta>, Open Graph usw.) – Sie exportieren Metadaten aus einer layout.tsx oder page.tsx und Next.js rendert die korrekten <head>-Tags.
Der App Router verfügt über eine eingebaute Metadata API für SEO-Tags (<title>, <meta>, Open Graph usw.) – Sie exportieren Metadaten aus einer layout.tsx oder page.tsx und Next.js rendert die korrekten <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 liest das exportierte metadata-Objekt und generiert <title>, <meta name="description">, OG-Tags usw. – keine manuelle <head>-Bearbeitung erforderlich.
Für Seiten, deren Titel von abgerufenen Inhalten abhängt (ein Blogbeitrag, ein Produkt), exportieren Sie eine 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] },
};
}
Dies läuft auf dem Server und ermöglicht jeder dynamischen Seite präzise, inhaltsspezifische Metadaten – essentiell für SEO und Social-Sharing von dynamischen Inhalten.
// 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"
};
Metadaten, die in einem Layout definiert sind, werden mit (und können überschrieben werden von) Kindseiten zusammengeführt – so setzen Sie Website-weite Standardwerte einmal und seitenspezifische Werte bei Bedarf. Das template fügt automatisch den Sitenamen an.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Spezielle Dateien generieren automatisch entsprechende Metadaten/Routes.
Gute Metadaten fördern SEO und Social-Share-Vorschaubilder.
Die Metadata API macht es deklarativ und typsicher – statische metadata für feste Seiten, async generateMetadata für datengesteuerte Seiten und Layout-übergreifende Standardwerte mit Templates – was die manuelle <head>-Verwaltung durch ein sauberes, servergerendertetes System ersetzt.