SEO Next.js : rendu, métadonnées, sitemap et un blog qui se positionne

Le SEO Next.js consiste surtout à faire le bon choix route par route : ce qui est rendu sur le serveur, ce qui est mis en cache, et ce qui arrive dans le HTML avant l'exécution du moindre script. Google explique dans ses bases du SEO JavaScript qu'il traite les applications JavaScript en trois phases (exploration, rendu, indexation) et que le rendu côté serveur ou le prérendu « reste une excellente idée ». Next.js le fait par défaut. Ce guide couvre l'App Router (Next.js 13 et suivants), avec des remarques pour l'ancien Pages Router.

Next.js est-il bon pour le SEO ?

Oui. Une application React classique rendue côté client envoie un fichier HTML presque vide et construit la page dans le navigateur ; les moteurs doivent l'exécuter, et beaucoup de robots ne le font jamais. Next.js rend React sur le serveur : la réponse HTML contient déjà les titres, le texte, les liens et les métadonnées. Notre guide du SEO JavaScript explique pourquoi cette différence compte pour l'indexation.

Dans l'App Router, les composants sont des Server Components par défaut. Même les composants marqués 'use client' sont prérendus en HTML sur le serveur. Le point faible, ce sont les données : tout ce que vous chargez dans useEffect, ou seulement après un clic, est absent du HTML initial. Récupérez le contenu dans des Server Components et réservez les composants client à l'interactivité.

SSG, SSR, ISR ou CSR : quel mode de rendu choisir ?

Next.js permet de mélanger les modes route par route. Le choix influe sur la fraîcheur, la vitesse et ce que reçoivent les robots.

La documentation Next.js sur l'ISR en liste les avantages : mettre à jour du contenu statique « sans reconstruire tout le site » et gérer un grand nombre de pages sans builds interminables. Une route avec export const revalidate = 3600 est régénérée au plus une fois par heure ; pour un contrôle exact, appelez revalidatePath ou revalidateTag quand le contenu change. L'ISR ne fonctionne pas avec un export statique (output: 'export'). Pour les applications qui doivent rester rendues côté client, notre guide du SEO des applications monopages détaille les solutions.

Comment définir titres, descriptions et canoniques avec la Metadata API ?

La Metadata API remplace next/head dans l'App Router. Selon la documentation Next.js sur les métadonnées, vous exportez un objet metadata statique depuis un layout ou une page, ou une fonction generateMetadata quand les valeurs dépendent de données, et Next.js génère les balises du head. Les deux ne sont pris en charge que dans les Server Components.

export async function generateMetadata({ params }) {
  const { slug } = await params
  const post = await getPost(slug)
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `/blog/${slug}` },
    openGraph: { images: [post.cover] },
  }
}

Cinq règles qui évitent la plupart des problèmes :

• Définissez metadataBase dans le layout racine (votre domaine de production), pour que les canoniques relatives et les URL Open Graph deviennent absolues.
• Utilisez un modèle de titre dans le layout racine, par exemple '%s | Marque', pour que chaque page ait un titre unique avec la marque une seule fois.
• Donnez à chaque page indexable une canonique vers elle-même via alternates.canonical ; elle protège des doublons créés par les paramètres d'URL et les barres obliques finales. Notre fiche sur la balise canonique en rappelle les règles.
• Rédigez une description par page, générée à partir du contenu dans generateMetadata, jamais une valeur par défaut pour tout le site.
• Ajoutez des images Open Graph avec un fichier opengraph-image dans le dossier de la route, et contrôlez le résultat avec un outil d'aperçu Open Graph.

Sur les pages dynamiques, Next.js diffuse les métadonnées en flux après les premiers octets pour accélérer l'affichage. La documentation précise que ce flux est désactivé pour les robots qui attendent les métadonnées dans le head, détectés par leur user agent (Bingbot, Twitterbot et Slackbot font partie des exemples), et que l'option htmlLimitedBots permet d'adapter la liste. Si un robot qui compte pour vous n'y figure pas, ajoutez-le. Sur le Pages Router, l'équivalent est le composant Head de next/head, avec un attribut key pour éviter les balises en double.

Comment générer sitemap.xml et robots.txt avec Next.js ?

Ce sont deux fichiers spéciaux du dossier app. Un fichier sitemap.ts qui exporte une fonction renvoyant des URL devient /sitemap.xml ; un fichier robots.ts devient /robots.txt. La référence sur le sitemap indique que le fichier est mis en cache par défaut et que la limite de Google est de 50'000 URL par sitemap ; au-delà, generateSitemaps le découpe en plusieurs fichiers.

import type { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getPosts()
  return posts.map((p) => ({
    url: `https://example.com/blog/${p.slug}`,
    lastModified: p.updatedAt,
  }))
}

N'y mettez que des URL canoniques, indexables et qui répondent 200, avec la vraie date de mise à jour dans lastModified. Le sitemap accepte aussi alternates.languages pour les sites multilingues. Dans robots.ts, indiquez l'adresse du sitemap et décidez quels robots d'IA peuvent explorer le site ; notre article sur le robots.txt pour les robots des IA les recense. Le format est détaillé dans notre fiche sur le sitemap XML.

Quels détails techniques cassent le plus souvent le SEO d'un site Next.js ?

Tous ces défauts réduisent l'explorabilité : un robot doit pouvoir découvrir chaque URL par des liens et obtenir un code de statut propre.

Comment ajouter des données structurées dans Next.js ?

La documentation Next.js recommande de rendre le JSON-LD dans une balise script de type application/ld+json directement dans le composant de page ou de layout, à partir des mêmes données que la page, en échappant le caractère < dans le JSON sérialisé pour éviter toute injection. Comme il est rendu sur le serveur, Google et les robots des IA le voient dans le HTML brut. Utilisez Article (ou BlogPosting) pour les articles, Organization dans le layout racine, BreadcrumbList pour les pages profondes et Product en e-commerce. Un générateur de schema vous donne un bloc valide de départ, puis validez la page avec le test des résultats enrichis de Google.

Comment rendre un site Next.js assez rapide pour les Core Web Vitals ?

Next.js fournit les composants qui traitent les causes habituelles de mauvais Core Web Vitals :

• next/image : redimensionne les images, sert des formats modernes, charge en différé par défaut et exige des dimensions, ce qui évite les décalages de mise en page. Marquez l'image principale au-dessus de la ligne de flottaison comme prioritaire pour qu'elle ne soit pas différée (c'est souvent l'élément du Largest Contentful Paint).
• next/font : héberge les polices sur votre domaine et évite le décalage dû au remplacement tardif des polices.
• next/script : charge les scripts tiers avec une stratégie (afterInteractive, lazyOnload) au lieu de bloquer la page.
• Moins de JavaScript côté client : chaque frontière 'use client' ajoute du code à télécharger et à hydrater, ce qui pèse sur l'Interaction to Next Paint sur mobile.

Mesurez les données de terrain, pas seulement un score de laboratoire : notre guide de PageSpeed Insights montre comment lire les deux.

Comment faire un blog Next.js qui se positionne ?

Un blog Next.js prend en général l'une de ces trois formes : des fichiers MDX ou Markdown dans le dépôt (simple, mais chaque article demande un commit et un déploiement), un CMS headless (Sanity, Contentful, Strapi, Payload) interrogé dans des Server Components, ou un webhook de publication qui reçoit les articles d'un outil externe. Dans les trois cas, le schéma SEO est le même : une route dynamique app/blog/[slug] avec generateStaticParams, generateMetadata, l'ISR, un sitemap alimenté par la même source et une page d'index qui relie tous les articles.

Le webhook sort la publication du cycle de déploiement. Un Route Handler reçoit l'article, l'enregistre, puis revalide les pages concernées :

// app/api/publish/route.ts
import { revalidatePath } from 'next/cache'

export async function POST(request) {
  if (request.headers.get('authorization') !== `Bearer ${process.env.PUBLISH_SECRET}`) {
    return new Response('Unauthorized', { status: 401 })
  }
  const article = await request.json()
  await savePost(article)
  revalidatePath('/blog')
  revalidatePath(`/blog/${article.slug}`)
  return Response.json({ ok: true })
}

Comment le SEO Next.js aide-t-il à être cité par les IA ?

Le rendu serveur est la première condition du GEO (optimisation pour les moteurs génératifs). L'analyse de Vercel de décembre 2024, The rise of the AI crawler, conclut qu'« aucun des grands robots d'IA n'exécute actuellement JavaScript », en citant GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot et PerplexityBot, et compte 569 millions de requêtes de GPTBot et 370 millions de Claude sur son réseau en un mois. Une page Next.js qui prérend son texte, ses titres et son JSON-LD est lisible par tous ; une page rendue côté client ne l'est pas.

La seconde condition, c'est un contenu digne d'être cité : des articles qui répondent à une question par section, avec sources, chiffres et définitions nettes, publiés régulièrement. C'est la partie qu'automatise Sorank, notre produit. Sorank est un logiciel SEO et GEO en autopilote : il trouve vos mots-clés, et son générateur d'articles de blog rédige 20, 60 ou 120 articles par mois avec sources, liens internes et images. Sur un site Next.js, il se connecte par le webhook personnalisé décrit sur la page d'installation : votre Route Handler reçoit chaque article, l'enregistre et revalide le blog. Le suivi des mentions dans les IA vérifie ensuite chaque semaine si ChatGPT, Claude et Gemini citent votre marque.

En résumé : prérendez chaque page que vous voulez voir trouvée, définissez les métadonnées sur le serveur et alimentez le sitemap depuis la même source que le contenu. Next.js fournit les outils ; les positions et les citations par les IA viennent de ce que vous publiez avec. Pour alimenter un blog Next.js en articles, consultez les offres Sorank, à partir de 49€ par mois avec 3 jours offerts.