Metadata, SEO en de document head
Configureer paginatitels, beschrijvingen, Open Graph-tags en favicons met de Next.js 15 Metadata API voor sterke SEO en delen op sociale media.
Metadata, SEO en de document head is een gratis Fullstackwebapps met Next.js 15-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Fullstackwebapps met Next.js 15. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.
Waarom metadata belangrijk is
Zoekmachines en sociale platforms lezen je metadata om resultaten en linkvoorbeelden samen te stellen — titels en beschrijvingen zorgen dus voor klikken en een hogere positie.
De Metadata-API
Next.js 15 vervangt handmatige bewerkingen van <head> door een declaratieve Metadata-API: exporteer een metadata-object of generateMetadata en Next.js genereert de tags.
Statische metadata exporteren
Voor metadata die nooit verandert, exporteer je een getypeerd metadata-object — Next.js voegt het automatisch samen met de documentkop.
export const metadata = {
title: 'My Dashboard',
description: 'Manage your account and settings',
};
export default function Page() {
return <h1>Dashboard</h1>;
}Titeltemplates
Stel in een layout een titeltemplate in, zodat onderliggende pagina's hetzelfde achtervoegsel krijgen. De tijdelijke aanduiding %s wordt vervangen door de eigen titel van elke pagina.
export const metadata = {
title: {
template: '%s | Acme',
default: 'Acme',
},
};Dynamische metadata
Wanneer de titel afhankelijk is van gegevens, exporteer je een asynchrone functie generateMetadata — deze ontvangt de routeparameters en kan gegevens ophalen voordat de pagina wordt weergegeven.
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return { title: post.title, description: post.excerpt };
}Open Graph-tags
Open Graph-metadata bepaalt hoe een link eruitziet wanneer deze wordt gedeeld. Voeg een veld openGraph toe met een titel, beschrijving en afbeelding.
export const metadata = {
openGraph: {
title: 'Acme Launch',
description: 'The new way to build apps',
images: ['/og-launch.png'],
},
};Twitter Cards
Twitter/X gebruikt eigen metadata voor kaarten. Stel het veld twitter in om het voorbeeld te bepalen dat wordt getoond wanneer je link wordt geplaatst.
export const metadata = {
twitter: {
card: 'summary_large_image',
title: 'Acme Launch',
images: ['/og-launch.png'],
},
};Favicons en pictogrammen
Plaats speciale bestanden in app/ en Next.js koppelt ze automatisch: favicon.ico voor het tabblad, icon.png voor de app en apple-icon.png voor iOS.
Dynamische OG-afbeeldingen
Next.js kan sociale afbeeldingen direct genereren: een opengraph-image.tsx met ImageResponse geeft JSX per pagina weer als PNG.
import { ImageResponse } from 'next/og';
export default function Image() {
return new ImageResponse(<div style={{ fontSize: 64 }}>Acme</div>);
}Robots en sitemaps
Stuur crawlers aan met een robots.ts-bestand en publiceer een sitemap.ts, zodat zoekmachines elke route kunnen vinden — beide exporteren gewone serialiseerbare gegevens.
export default function robots() {
return { rules: { userAgent: '*', allow: '/' }, sitemap: 'https://acme.com/sitemap.xml' };
}Best practices
Voor sterke SEO: gebruik per pagina een unieke titel en beschrijving, houd titels onder ongeveer 60 tekens, gebruik altijd een Open Graph-afbeelding en gebruik generateMetadata voor dynamische routes.
Korte controle
Test je kennis van metadata.
Samenvatting
Je hebt de Metadata-API geleerd: statische metadata tegenover generateMetadata, titeltemplates, voorbeelden met openGraph/twitter en de speciale pictogram- en SEO-bestanden.
Leer TypeScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 48
Veelgestelde vragen
Is de les “Metadata, SEO en de document head” gratis?
Ja — de volledige tekst van “Metadata, SEO en de document head” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Fullstackwebapps met Next.js 15 wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.
Wat leer ik in “Metadata, SEO en de document head”?
Configureer paginatitels, beschrijvingen, Open Graph-tags en favicons met de Next.js 15 Metadata API voor sterke SEO en delen op sociale media. Je oefent met Fullstackwebapps met Next.js 15 door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Fullstackwebapps met Next.js 15 te beginnen?
Ervaring vooraf is niet nodig. Fullstackwebapps met Next.js 15 op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Metadata, SEO en de document head”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Fullstackwebapps met Next.js 15?
Ja. Elke les over Fullstackwebapps met Next.js 15 bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Introductie tot Next.js 15
- Project instellen en configureren
- Basisprincipes van pagina’s, layouts en routing
- Metadata, SEO en de document head