Metadaten, SEO und der Dokumentkopf
Konfigurieren Sie Seitentitel, Beschreibungen, Open-Graph-Tags und Favicons mithilfe der Next.js-15-Metadata-API für bessere SEO und Social Sharing.
Metadaten, SEO und der Dokumentkopf ist eine kostenlose Next.js 15 Fullstack Web Apps-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Next.js 15 Fullstack Web Apps-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Next.js 15 Fullstack Web Apps-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Why Metadata Matters
Search engines and social platforms read your metadata to build results and link previews — so titles and descriptions drive clicks and ranking.
The Metadata API
Next.js 15 replaces manual <head> edits with a declarative Metadata API: export a metadata object or generateMetadata and it renders the tags.
Static Metadata Export
For metadata that never changes, export a typed metadata object — Next.js merges it into the document head automatically.
export const metadata = {
title: 'My Dashboard',
description: 'Manage your account and settings',
};
export default function Page() {
return <h1>Dashboard</h1>;
}Title Templates
In a layout, set a title template so child pages share a suffix. The %s placeholder is swapped for each page's own title.
export const metadata = {
title: {
template: '%s | Acme',
default: 'Acme',
},
};Dynamic Metadata
When the title depends on data, export an async generateMetadata function — it gets the route params and can fetch before rendering.
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return { title: post.title, description: post.excerpt };
}Open Graph Tags
Open Graph metadata controls how a link looks when shared. Add an openGraph field with a title, description, and image.
export const metadata = {
openGraph: {
title: 'Acme Launch',
description: 'The new way to build apps',
images: ['/og-launch.png'],
},
};Twitter Cards
Twitter/X uses its own card metadata. Set the twitter field to control the preview shown when your link gets posted.
export const metadata = {
twitter: {
card: 'summary_large_image',
title: 'Acme Launch',
images: ['/og-launch.png'],
},
};Favicons and Icons
Drop special files in app/ and Next.js wires them up: favicon.ico for the tab, icon.png for the app, apple-icon.png for iOS.
Dynamic OG Images
Next.js can generate social images on the fly: an opengraph-image.tsx using ImageResponse renders JSX to a PNG per page.
import { ImageResponse } from 'next/og';
export default function Image() {
return new ImageResponse(<div style={{ fontSize: 64 }}>Acme</div>);
}Robots and Sitemaps
Steer crawlers with a robots.ts file and publish a sitemap.ts so search engines find every route — both export plain serializable data.
export default function robots() {
return { rules: { userAgent: '*', allow: '/' }, sitemap: 'https://acme.com/sitemap.xml' };
}Best Practices
For strong SEO: unique title and description per page, titles under ~60 chars, always an Open Graph image, and generateMetadata for dynamic routes.
Quick Check
Test your metadata knowledge.
Recap
You learned the Metadata API: static metadata vs generateMetadata, title templates, openGraph/twitter previews, and the special icon/SEO files.
Lerne TypeScript mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 12
- Lektionen
- 48
Häufig gestellte Fragen
Ist die Lektion „Metadaten, SEO und der Dokumentkopf“ kostenlos?
Ja — der vollständige Text von „Metadaten, SEO und der Dokumentkopf“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Next.js 15 Fullstack Web Apps-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Next.js 15 Fullstack Web Apps-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Metadaten, SEO und der Dokumentkopf“?
Konfigurieren Sie Seitentitel, Beschreibungen, Open-Graph-Tags und Favicons mithilfe der Next.js-15-Metadata-API für bessere SEO und Social Sharing. Du übst Next.js 15 Fullstack Web Apps mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Next.js 15 Fullstack Web Apps zu starten?
Keine Vorkenntnisse erforderlich. Next.js 15 Fullstack Web Apps auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Metadaten, SEO und der Dokumentkopf“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Next.js 15 Fullstack Web Apps-Lektion Code schreiben und ausführen?
Ja. Jede Next.js 15 Fullstack Web Apps-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Einführung in Next.js 15
- Projekteinrichtung und Konfiguration
- Grundlagen von Pages, Layouts und Routing
- Metadaten, SEO und der Dokumentkopf