Next.js et SEO technique : ce qui impacte vraiment les clics

Next.js offre tout ce qu’il faut pour un excellent référencement : rendu côté serveur, gestion fine des métadonnées, optimisation des images. Mais ces outils ne servent que s’ils sont bien utilisés. Sur les projets que nous auditons, les problèmes de SEO viennent rarement du framework, et presque toujours de quelques réglages oubliés. Voici ce qui influence réellement l’affichage dans Google et les clics, par ordre d’importance.

1. Le contenu doit être dans le HTML initial

Google sait exécuter du JavaScript, mais il le fait en différé et pas toujours complètement. Le texte principal, les titres et les liens internes doivent donc être présents dans le HTML envoyé par le serveur.

Avec l’App Router, les composants serveur produisent ce HTML par défaut. Le piège est de charger le contenu principal côté client (après un appel d’API dans le navigateur) : la page paraît normale pour un visiteur, mais vide pour un robot pressé. Vérifiez avec l’outil d’inspection d’URL de Google Search Console que le contenu apparaît dans le rendu.

2. Des titres et descriptions uniques, écrits pour cliquer

Le titre de page est le premier élément que voit l’internaute dans les résultats. L’API Metadata de Next.js permet de définir titre et description par page, y compris pour les pages générées dynamiquement.

Les erreurs fréquentes :

• un titre identique sur toutes les pages, hérité du layout ;
• des titres trop longs, coupés dans les résultats ;
• des descriptions génériques qui ne donnent pas envie de cliquer.

Les recommandations de Google sur les liens de titre restent la meilleure référence.

3. Les canonicals et les doublons

Un même contenu accessible à plusieurs adresses (avec ou sans paramètres, filtres, pagination, majuscules) dilue les signaux. Chaque page indexable doit déclarer son URL canonique, et les variantes sans valeur (filtres combinés, tris) doivent être exclues de l’indexation ou canonicalisées.

4. La performance mobile

Les Core Web Vitals mesurent la vitesse perçue (LCP), la réactivité (INP) et la stabilité visuelle (CLS). Next.js aide avec le composant Image, le chargement différé et le découpage du code, mais trois erreurs reviennent souvent :

• l’image principale de la page chargée en différé, alors qu’elle devrait être prioritaire ;
• des scripts tiers (chat, analytics, publicité) chargés trop tôt ;
• des composants client volumineux sur des pages qui pourraient être statiques.

5. Le maillage interne

Les liens entre vos pages aident Google à comprendre la structure du site et à répartir l’importance. Utilisez le composant Link avec des ancres descriptives, reliez les articles aux pages de services correspondantes, et évitez les pages orphelines qui ne reçoivent aucun lien.

6. Sitemap, robots et données structurées

Next.js permet de générer dynamiquement `sitemap.xml` et `robots.txt`. Le sitemap ne doit contenir que des pages indexables, avec leur URL canonique. Les données structurées (Organisation, LocalBusiness, Article, Produit) aident Google à comprendre vos pages ; les recommandations officielles précisent les champs attendus.

Ce qui compte moins qu’on le croit

• Le nombre de mots-clés dans la page : la pertinence et la clarté priment.
• La balise meta keywords : Google l’ignore.
• Changer de framework pour « faire du SEO » : sans contenu utile, aucun outil ne suffit.

Checklist avant mise en production

• ☐Contenu principal visible dans le HTML initial.
• ☐Titre et description uniques sur chaque page indexable.
• ☐Canonical présent et cohérent.
• ☐Image principale prioritaire, autres images optimisées.
• ☐Scripts tiers différés.
• ☐Sitemap limité aux pages indexables.
• ☐Redirections 301 pour les anciennes URL.
• ☐Inspection d’URL réussie dans Search Console.

Pour aller plus loin, notre article Next.js 15 et React 19 détaille les nouveautés utiles côté performance, et notre page développeur Next.js présente nos audits techniques.

FAQ

Next.js est-il bon pour le référencement par défaut ?

Il fournit les outils (rendu serveur, API de métadonnées, optimisation des images), mais ne les configure pas à votre place. Un site Next.js mal configuré peut avoir les mêmes défauts que n’importe quel autre site.

Faut-il tout rendre côté serveur ?

Le contenu important pour le référencement doit être présent dans le HTML initial. Les éléments interactifs secondaires peuvent être rendus côté client. Le bon réglage se fait page par page.

Quels outils pour vérifier le SEO technique d’un site Next.js ?

Google Search Console pour l’indexation et les clics, l’outil d’inspection d’URL pour voir la page comme Google, et PageSpeed Insights pour les Core Web Vitals sur mobile.