Checklist SEO pour l'App Router : metadata et generateMetadata, metadataBase, modèles de titre, canonical, hreflang, sitemap.ts, robots.ts et images OG, avec le code.
Dans l'App Router, les balises SEO viennent d'un objet metadata exporté ou d'une fonction generateMetadata dans les fichiers layout et page, qui ne fonctionnent que dans les Server Components. Définissez metadataBase une seule fois dans le layout racine, ajoutez app/sitemap.ts et app/robots.ts, donnez à chaque route une URL canonique via alternates, et placez un fichier opengraph-image à côté des pages qui en ont besoin.
Où se trouve chaque élément
L'App Router propose des réponses intégrées à presque toutes les tâches de SEO technique, mais elles sont dispersées sur une douzaine de pages de documentation. Cette checklist les rassemble dans l'ordre, avec du code à copier pour chaque point, et les cases à cocher vous permettent de suivre votre propre projet au fur et à mesure.
Non. L'objet metadata et generateMetadata ne sont pris en charge que dans les Server Components, car Next.js doit les résoudre sur le serveur avant le rendu. Gardez la page en Server Component et importez un composant client pour les parties interactives.
Les versions actuelles de Next.js passent params et searchParams sous forme de Promises, vous écrivez donc const { slug } = await params dans un generateMetadata async. Le code écrit pour d'anciennes versions qui lit params.slug directement doit être mis à jour.
Utilisez generateSitemaps dans un fichier sitemap.ts. Il renvoie une liste d'identifiants, et l'export par défaut construit un sitemap par identifiant. Dans Next.js 16, l'identifiant arrive sous forme de Promise. Les fichiers sont servis à des chemins comme /product/sitemap/1.xml.
Pas si vous n'en définissez pas. Ajoutez alternates.canonical dans les metadata de chaque route, généralement sous forme de chemin relatif comme /blog/my-post, et laissez metadataBase le transformer en URL complète.
Non, un segment de route peut exporter l'un ou l'autre. Utilisez l'objet statique quand rien ne dépend de la requête ou de données récupérées, et generateMetadata dans le cas contraire.
À définir une fois dans app/layout.tsx. Les pages enfants qui exportent title: "Pricing" s'affichent sous la forme Pricing | Northside.
params est attendu avec await. getPost représente votre propre fonction de données.
Renvoie une entrée par URL. changeFrequency et priority sont facultatifs et Google les ignore, ils sont donc omis.
Génère robots.txt à la racine du site.
Dessine une image de partage de 1200 par 630 à partir du titre de l'article avec ImageResponse de next/og. Les exports alt, size et contentType deviennent des balises og.
Images de partage sous forme de fichiers
metadataBase défini dans app/layout.tsx
Permet à tous les autres champs d'URL d'être des chemins relatifs
Modèle de titre et valeur par défaut dans le layout racine
Donne à chaque page un suffixe cohérent comme | Acme
Titre et description uniques sur chaque page
metadata statique ou generateMetadata par route
Canonical sur chaque route indexable
hreflang pour les routes traduites
alternates.languages, ou dans le sitemap
app/sitemap.ts ne liste que les URL canoniques en ligne
Découpez avec generateSitemaps quand il est volumineux
app/robots.ts avec une ligne sitemap
Bloque seulement des zones comme /admin ou /api
Image Open Graph pour les routes clés
Fichier opengraph-image avec texte alternatif
noindex sur les routes pauvres ou privées
robots: { index: false } dans les metadata de cette route
Contenu rendu sur le serveur
Vérifiez le code source de la page, pas seulement l'affichage du navigateur
{count} sur {total} terminés
Commencer gratuitement · Sans carte bancaire