Le SEO avec le App Router de Next.js : metadata, sitemaps et données structurées

Le App Router de Next.js fournit tout ce qu’un setup SEO techniquement excellent demande (metadata, sitemaps, données structurées, rendu serveur en streaming), mais les pièces sont réparties entre des conventions faciles à utiliser à moitié. Voici le setup qui fait tourner le site que vous lisez, avec le raisonnement derrière chaque pièce.

Commencer par metadataBase et un template de titre

Chaque page a besoin d’un titre et d’une description uniques, et chaque URL relative de vos metadata a besoin d’une base pour se résoudre. Les deux vivent dans le layout racine :

// app/layout.tsx
export const metadata: Metadata = {
  metadataBase: new URL("https://example.com"),
  title: {
    default: "Nom du site | ce qu'il fait",
    template: "%s | Nom du site",
  },
  description: "Une phrase honnête sur le site.",
};

Grâce au template, les pages enfants ne déclarent que leur partie :

// app/services/page.tsx
export const metadata: Metadata = {
  title: "Services", // rendu : "Services | Nom du site"
  description: "Une description unique pour cette page.",
  alternates: { canonical: "/services" },
};

Deux détails qui séparent un setup correct d’un setup bâclé :

• Une canonique sur chaque page indexable. Avec metadataBase défini, un alternates.canonical relatif suffit, et il vous protège quand les URLs attrapent des paramètres (tags UTM, pagination).
• Des descriptions uniques. Les meta descriptions dupliquées sont le constat d’audit le plus fréquent sur les sites de développeurs. Si deux pages ont besoin de la même description, l’une des deux ne devrait sans doute pas être indexée.

Sitemap et robots en code

Le App Router les traite comme des routes, ce qui veut dire qu’ils ne peuvent pas se désynchroniser s’ils lisent la même source de vérité que vos pages :

// app/sitemap.ts
export default function sitemap(): MetadataRoute.Sitemap {
  const pages = ["", "/services", "/about", "/contact"];
  const articles = posts.map((post) => `/writing/${post.slug}`);
  return [...pages, ...articles].map((path) => ({
    url: `https://example.com${path}`,
  }));
}

L’habitude qui compte : générer les entrées du sitemap depuis le même registre qui rend le contenu. Un sitemap maintenu à la main est un sitemap qui ment.

Données structurées sans bibliothèque

Le JSON-LD est une balise <script> avec une charge JSON ; aucun package n’est nécessaire :

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd) }}
/>

Ce qui compte, c’est la discipline, pas le volume. Émettez Person et WebSite une fois depuis le layout, Article sur les articles, BreadcrumbList là où des fils d’Ariane existent, et rien qui ne corresponde pas au contenu visible. Des données structurées qui trompent sur la page sont pires que pas de données du tout : c’est la seule partie du SEO où la surenchère porte une pénalité explicite.

Des images Open Graph générées par une route

Plutôt que d’exporter des images statiques d’un outil de design, la convention de fichier opengraph-image les génère au build avec du JSX. Un seul template typographique produit une carte correcte et cohérente pour chaque article, et elle ne peut jamais montrer un titre périmé, puisqu’elle rend à partir des mêmes données que la page.

La stratégie de rendu est une décision SEO

L’avantage discret du App Router : avec les Server Components et la génération statique, un site SEO-first ne livre presque pas de JavaScript par défaut. Tout ce qui précède (metadata, sitemap, JSON-LD) est le minimum requis ; le classement se joue aussi sur les Core Web Vitals, et aucune metadata ne compense une page lente. Mes règles de base :

• Génération statique pour tout ce qui est du contenu ; l’interactivité en petits îlots clients, pas en pages clientes.
• next/image et next/font dès le premier jour, parce que rattraper la stabilité de layout après coup est un travail pénible.
• Les scripts tiers sont coupables jusqu’à preuve de leur nécessité.

Le volet performance de ce sujet mérite son propre article : La performance React en pratique.

La checklist

Pour chaque page indexable : titre unique, description unique, URL canonique, hiérarchie de titres correcte avec un seul h1, données structurées conformes au contenu visible. Au niveau du site : sitemap et robots générés par le code, cartes Open Graph, Core Web Vitals rapides.

Rien de tout ça n’est glamour. Tout se cumule. Le SEO technique est l’un des rares investissements marketing qui continue de payer sans maintenance. Ce site applique ce que cet article prêche ; si vous voulez que le site ou l’application de votre produit fasse pareil, c’est un travail que je prends, alors parlons-en.