L'App Router dispose d'une Metadata API intégrée pour les balises SEO (<title>, <meta>, Open Graph, etc.) — vous exportez les métadonnées d'un layout.tsx ou page.tsx et Next.js génère les balises <head> correctes.
Métadonnées statiques
// 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 lit l'objet metadata exporté et génère <title>, <meta name="description">, les balises OG, etc. — sans modification manuelle du <head>.
Métadonnées dynamiques (dépend des données)
Pour les pages dont le titre dépend du contenu récupéré (un article de blog, un produit), exportez une fonction async generateMetadata :
// 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] },
};
}
Cette fonction s'exécute sur le serveur et permet à chaque page dynamique d'avoir des métadonnées précises et spécifiques au contenu — essentielles pour le SEO et le partage social de contenu dynamique.
Les métadonnées fusionnent dans l'arborescence
// 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"
};
Les métadonnées définies dans une layout sont fusionnées avec (et peuvent être remplacées par) les pages enfants — vous définissez donc les valeurs par défaut au niveau du site une seule fois et les valeurs par page où nécessaire. Le template ajoute automatiquement le nom du site.
Métadonnées basées sur des fichiers
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Les fichiers spéciaux génèrent automatiquement les métadonnées/routes correspondantes.
Pourquoi c'est important
De bonnes métadonnées driving le SEO et les aperçus de partage social.
La Metadata API la rend déclarative et type-safe — metadata statiques pour les pages fixes, generateMetadata async pour les pages pilotées par les données, et les valeurs par défaut au niveau de la layout avec des templates — remplaçant la gestion manuelle du <head> par un système propre et rendu côté serveur.