SEO technique Next.js : le guide complet (2026)

Un site Next.js peut avoir un excellent contenu et rester invisible sur Google. Le plus souvent, ce n'est pas un problème de rédaction. C'est un problème de configuration : des metadata dupliquées, un sitemap oublié, un contenu qui n'apparaît qu'après l'exécution de JavaScript.

Le SEO Next.js ne se résume donc pas à remplir quelques balises meta. Le mode de rendu, la gestion des metadata et l'indexation décident directement si Google comprend vos pages et les classe correctement. Voici ce que je vérifie systématiquement sur les projets que je livre.

Metadata Next.js : la base incontournable

Avec l'App Router, la fonction generateMetadata permet de définir le titre, la description et les balises Open Graph de chaque page. Elle s'exécute côté serveur, donc elle peut aller chercher les données en base avant de générer les balises :

// app/[locale]/blog/[slug]/page.js
export async function generateMetadata({ params }) {
  const { locale, slug } = await params;
  const post = await getPost(slug, locale);

  return {
    title: post.seoTitle,
    description: post.seoDescription,
    alternates: {
      canonical: `https://monsite.com/${locale}/blog/${slug}`,
      languages: {
        fr: `https://monsite.com/fr/blog/${slug}`,
        en: `https://monsite.com/en/blog/${post.enSlug}`,
      },
    },
    openGraph: {
      title: post.seoTitle,
      description: post.seoDescription,
      type: "article",
    },
  };
}

L'erreur la plus fréquente est de copier la même description sur plusieurs pages. Google ne pénalise pas directement, mais il a plus de mal à comprendre ce qui distingue vos URLs, et vos résultats de recherche se ressemblent tous. Chaque article et chaque page de service mérite un titre et une description à lui.

Vous remarquerez aussi le bloc alternates : c'est lui qui génère les balises canonical et hreflang, dont on reparle plus bas.

Sitemap et robots.txt Next.js

Inutile de maintenir un sitemap.xml à la main. Next.js le génère à partir d'un simple fichier, ce qui garantit qu'il reste synchronisé avec ce qui est réellement publié :

// app/sitemap.js
export default async function sitemap() {
  const posts = await getPublishedPosts();

  return posts.map((post) => ({
    url: `https://monsite.com/${post.locale}/blog/${post.slug}`,
    lastModified: post.updatedAt,
  }));
}

Même principe pour le robots.txt :

// app/robots.js
export default function robots() {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: ["/admin/", "/api/"],
    },
    sitemap: "https://monsite.com/sitemap.xml",
  };
}

Une fois le sitemap en ligne, soumettez-le dans Google Search Console. C'est aussi là que vous verrez quelles pages sont réellement indexées, et lesquelles Google a écartées.

Données structurées : aider Google à comprendre le contenu

Les données structurées (JSON-LD) décrivent explicitement la nature d'une page : un article, une organisation, un fil d'Ariane. Elles ne garantissent pas un affichage enrichi dans les résultats, mais elles donnent à Google des informations propres au lieu de le laisser deviner.

Sous Next.js, on les injecte côté serveur avec une simple balise script :

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "Article",
  headline: post.title,
  author: { "@type": "Person", name: "Bahaj Abderrazak" },
  datePublished: post.publishedAt,
  dateModified: post.updatedAt,
};

return (
  <script
    type="application/ld+json"
    dangerouslySetInnerHTML={{
      __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c"),
    }}
  />
);

Le replace final évite qu'un contenu contenant un caractère < ne casse la balise. Vous pouvez ensuite tester le résultat avec le test des résultats enrichis de Google.

Indexation JavaScript : le piège des applications React

Googlebot sait exécuter du JavaScript, mais il le fait dans un second temps, après avoir récupéré le HTML brut. Si votre contenu n'existe que dans le navigateur (rendu client pur, sans SSR ni SSG), il peut être indexé avec du retard, ou partiellement sur les pages complexes.

La règle que j'applique : tout ce qui doit être référencé (articles, pages de service, pages de catégories) est rendu côté serveur ou généré statiquement. Le rendu client est réservé aux parties interactives, comme un formulaire ou un tableau de bord derrière une connexion.

Le choix du mode de rendu est donc autant une décision SEO qu'une décision de performance. Je détaille les trois options dans Next.js : SSR, SSG ou ISR, choisir le bon mode de rendu.

Checklist SEO technique Next.js

Avant de mettre un site en ligne, je passe ces points en revue :

• Titre et description uniques sur chaque page, via generateMetadata

• sitemap.xml généré dynamiquement et soumis à Google Search Console

• robots.txt qui autorise les routes publiques et bloque l'administration

• Balises hreflang cohérentes entre les versions FR et EN de chaque page

• URLs canoniques explicites pour éviter le contenu dupliqué entre langues

• Données structurées JSON-LD sur les articles et les pages de service

• Pages importantes rendues en SSR ou SSG, jamais uniquement côté client

Référencement d'une application React : au-delà de Next.js

Choisir Next.js plutôt qu'une application React purement côté client (Create React App, Vite sans SSR) est déjà une décision de référencement. Avec une SPA classique, il faut ajouter du pré-rendu ou une solution de contournement pour obtenir ce que Next.js fait nativement. Si vous hésitez encore sur la technologie, lisez quelle stack technique choisir pour son application web en 2026.

Le SEO technique est un chantier continu

Une configuration propre aujourd'hui peut se dégrader avec le temps : une mise à jour qui supprime une balise canonique, une nouvelle page oubliée dans le sitemap, un composant passé en rendu client par erreur. Un audit régulier permet de le repérer avant que le trafic ne baisse.

Si vous voulez un regard extérieur sur votre site, c'est ce que je fais dans mon accompagnement en optimisation de performance web. Vous pouvez aussi me contacter avec l'adresse de votre site et je vous dirai par où commencer.

En résumé

Pour un bon SEO sous Next.js, il faut quatre choses : des metadata dynamiques et uniques, un sitemap et un robots.txt toujours à jour, des données structurées pertinentes, et un mode de rendu qui permet à Google de lire tout le contenu dès le premier passage. Ces bases techniques passent avant tout travail de contenu, parce qu'un bon article que Google n'indexe pas ne sert à rien.