Métadonnées, SEO et en-tête du document
Configurez les titres et descriptions des pages, les balises Open Graph et les favicônes avec l’API Metadata de Next.js 15 pour optimiser le SEO et le partage sur les réseaux sociaux.
Métadonnées, SEO et en-tête du document est une leçon Next.js 15 Fullstack Web Apps gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Next.js 15 Fullstack Web Apps, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Next.js 15 Fullstack Web Apps comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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.
Questions Fréquemment Posées
La leçon « Métadonnées, SEO et en-tête du document » est-elle gratuite ?
Oui — le texte complet de « Métadonnées, SEO et en-tête du document » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Next.js 15 Fullstack Web Apps, passe à CoddyKit PRO. Le cours Next.js 15 Fullstack Web Apps comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Métadonnées, SEO et en-tête du document » ?
Configurez les titres et descriptions des pages, les balises Open Graph et les favicônes avec l’API Metadata de Next.js 15 pour optimiser le SEO et le partage sur les réseaux sociaux. Tu pratiques Next.js 15 Fullstack Web Apps avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Next.js 15 Fullstack Web Apps ?
Aucune expérience préalable n'est requise. Next.js 15 Fullstack Web Apps sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Métadonnées, SEO et en-tête du document » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Next.js 15 Fullstack Web Apps ?
Oui. Chaque leçon Next.js 15 Fullstack Web Apps inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Introduction à Next.js 15
- Configuration et initialisation du projet
- Bases des pages, mises en page et routes
- Métadonnées, SEO et en-tête du document