SEO pour Next.js : guide de configuration et de publication

Le SEO de Next.js considère les routes, les données et les métadonnées comme une seule mise en production. App Router permet de déclarer des métadonnées statiques ou de les dériver des enregistrements ; ce guide vise App Router sans supposer que Pages Router suit les mêmes conventions.

Reliez les métadonnées aux données de la route

Utilisez des métadonnées statiques pour les pages fixes et generateMetadata lorsque les titres, descriptions ou URL canoniques dépendent d’un enregistrement. Examinez les layouts parents avec les pages enfants pour éviter que des valeurs génériques ne masquent les informations propres à chaque page. Configurez correctement une base d’URL de production lorsque vous utilisez metadataBase et vérifiez les variantes linguistiques. Les pages entièrement traduites ont besoin d’adresses distinctes ; ne désignez pas la langue par défaut comme canonique pour toutes les versions simplement parce qu’elles décrivent le même produit.

Concevez les états du contenu avec le rendu

Les routes publiques doivent fournir des informations utiles sans exiger de session. Gérez explicitement les enregistrements absents ou non publiés au lieu de laisser une structure de chargement indéfinie. Avec du contenu mis en cache ou régénéré, vérifiez quand les métadonnées et le corps deviennent à jour afin de ne pas associer un nouveau titre à un ancien article. Documentez l’invalidation selon l’architecture de déploiement plutôt que de choisir des durées de cache arbitraires pour améliorer un rapport ponctuel.

Assurez la cohérence entre robots et sitemaps

App Router propose des conventions de fichiers de métadonnées pour robots et les sitemaps. Signalez les URL publiées sur le domaine de production et protégez les données privées par des contrôles d’accès plutôt que par robots.txt uniquement. La livraison des métadonnées peut varier selon la diffusion progressive et le traitement de l’agent utilisateur. Examinez les réponses réelles et les outils Google si nécessaire au lieu de supposer qu’un simple analyseur HTML reproduit le traitement du moteur de recherche ou trouve toujours les balises à l’emplacement attendu dans l’en-tête initial.

Un scénario concret de publication

Exemple illustratif : une fiche produit App Router dérive son titre et sa description du même enregistrement produit. Définissez comment une modification du produit actualise à la fois les métadonnées et le corps du contenu, puis demandez directement les pages vietnamiennes et anglaises après déploiement. La navigation côté client ne suffit pas à valider un rendu serveur actualisé. Gardez les routes de prévisualisation hors des flux de découverte de production et conservez un enregistrement d’exemple pour les tests de non-régression du cache. Les développeurs disposent ainsi d’un contrat de publication concret plutôt que d’une consigne générale d’amélioration du rendu.

Une liste de contrôle réutilisable à chaque mise en ligne

Avant de modifier le site, dressez un petit inventaire des pages importantes : notez l’URL actuelle, le public visé, le titre et l’URL canonique souhaitée. Effectuez une seule catégorie de changements à la fois et conservez un moyen de restaurer la configuration précédente. Commencez par une page accessible et utile plutôt que d’optimiser un score alors que son contenu reste indisponible.

Pour les contenus traduits, publiez une version complète dans chaque langue à une adresse distincte. Vérifiez les balises canoniques autoréférentes et les liens linguistiques réciproques, puis ajoutez les URL éligibles au sitemap. Une page traduite n’est pas automatiquement un doublon simplement parce que son sens correspond à celui d’une autre langue. Les moteurs de recherche décident toujours des pages à indexer ; aucune configuration ne promet un classement ou une hausse du trafic.

Outils et conseils complémentaires

• Suivre le processus de diagnostic Next.js
• Vérifier une URL publique
• Examiner une chaîne de redirections

Références officielles

• Next.js : métadonnées et images OG
• Next.js : robots.txt
• Next.js : generateMetadata