Next.js JSON-LD : Comment ajouter des données structurées pour le SEO

En bref : Next.js JSON-LD désigne l’implémentation technique des données structurées au format JSON-LD dans une application Next.js, notamment sous l’App Router. Cette brique sémantique aide Google et les moteurs d'IA à comprendre précisément vos contenus pour générer des résultats enrichis. Pour comprendre d'abord les bases de ces balises et les types de schémas, consultez notre Guide Général des Données Structurées JSON-LD.

Réponse rapide : Comment intégrer du JSON-LD dans Next.js ?

Méthode recommandée : Déclarez votre objet JSON-LD dans vos composants layout.tsx ou page.tsx sous forme de balise script en utilisant dangerouslySetInnerHTML.
Validation : Utilisez l'outil officiel Rich Results Test de Google pour vérifier l'éligibilité de vos données structurées.
Sécurité de type : Utilisez la bibliothèque schema-dts en TypeScript pour éviter toute erreur de syntaxe.

Intégrer du JSON-LD dans un framework moderne comme Next.js requiert de respecter les conventions de l'App Router. Faut-il utiliser next/script ou injecter du code brut côté serveur ? Où positionner les balises pour éviter les avertissements d'hydratation côté client ? Ce guide pratique détaille la méthode d'implémentation recommandée et les écueils techniques fréquents.

Si vous construisez un projet et souhaitez un accompagnement sur l'architecture, vous pouvez solliciter nos experts en optimisation SEO technique.

Comment ajouter du JSON-LD dans Next.js App Router

La recommandation officielle Next.js est simple : utiliser une balise native <script type="application/ld+json"> dans un composant page.tsx ou layout.tsx, avec dangerouslySetInnerHTML. Le composant next/script n’est pas adapté ici, car JSON-LD n’est pas du JavaScript à exécuter.

Voici un exemple minimal pour une page service :

// app/services/creation-site-vitrine/page.tsx
import type { WithContext, Service } from "schema-dts";

export default function Page() {
  const jsonLd: WithContext<Service> = {
    "@context": "https://schema.org",
    "@type": "Service",
    name: "Création de site vitrine Next.js",
    provider: {
      "@type": "Organization",
      name: "Exemple Studio",
      url: "https://www.example.fr"
    },
    areaServed: {
      "@type": "Country",
      name: "France"
    }
  };

  return (
    <main>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c")
        }}
      />
      <h1>Création de site vitrine Next.js</h1>
      <p>
        Nous concevons des sites rapides, sécurisés et optimisés pour l

Quelques points importants sur cet exemple :

Sécurité sémantique : le .replace(/</g, "\\u003c") est recommandé par Vercel pour neutraliser les injections de scripts malveillants (failles XSS). Ne faites jamais un JSON.stringify brut si vos données proviennent d'une source externe ou d'un CMS.
Typage strict : l'utilisation de schema-dts de Google assure que vos objets respectent scrupuleusement la structure officielle de Schema.org à la compilation.
Cohérence du contenu : les données transmises dans la balise doivent correspondre exactement aux éléments textuels rendus visibles pour l'utilisateur sur la page.

Vous cherchez à concevoir un site vitrine Next.js rapide et parfaitement optimisé pour le référencement naturel local ? La gestion sémantique est un pilier de notre méthodologie de développement.

Où placer le JSON-LD : layout.tsx ou page.tsx ?

Google explore et interprète le JSON-LD qu’il soit situé dans le <head> ou dans le <body> de votre document. Dans Next.js App Router, vous devez organiser vos scripts sémantiques de la manière suivante :

Dans vos fichiers layout.tsx : Idéal pour les données partagées par tout le site ou par un répertoire entier, comme les schémas Organization ou WebSite.
Dans vos fichiers page.tsx : Recommandé pour les schémas spécifiques à une seule URL, tels que Service, Product ou BreadcrumbList.

Et l'API generateMetadata ? Cette méthode native de Next.js sert exclusivement aux balises de métadonnées classiques (titre, description, Open Graph, etc.). Elle ne gère pas les scripts de données structurées. Le rendu via une balise <script> dans le composant reste la méthode officielle.

Les erreurs fréquentes d'intégration avec Next.js

Rendre le JSON-LD uniquement côté client

Si vous assemblez ou injectez votre schéma dans un composant client (par exemple, dans un hook useEffect), la balise risque d’apparaître dans votre navigateur après l'hydratation mais d'être totalement absente du code HTML initial reçu par Googlebot. Assurez-vous de générer vos données structurées au sein de Server Components (rendus côté serveur ou pré-générés en statique).

Utiliser le composant `next/script`

Le composant next/script de Next.js est conçu pour charger et différer l’exécution de fichiers JavaScript externes (comme des tags analytics). Le JSON-LD étant une simple chaîne de données sémantiques et non du code exécutable, l’utilisation d'une balise HTML standard <script> est requise.

Générer des doublons accidentels

Si votre template de layout et votre page spécifique déclarent tous deux un schéma Organization, Google recevra des signaux contradictoires. Veillez à isoler vos schémas globaux et vos schémas spécifiques.

Lors d'une refonte de site web, le plan de migration doit systématiquement valider la présence et la conformité de ces balises sur le nouvel environnement.

À retenir pour votre intégration Next.js :

Server-Side First : Ne générez jamais de JSON-LD côté client (évitez useEffect) pour garantir la détection par les crawlers.
Neutralisez le XSS : Utilisez la méthode de remplacement des caractères HTML .replace(/</g, "\\u003c") conseillée par Vercel.
Faites un test de validation : Testez votre page en production avec le validateur officiel de Google pour valider l'éligibilité aux résultats enrichis.

Questions fréquentes

Faut-il mettre le JSON-LD dans le <head> en Next.js ?

Ce n’est pas obligatoire. Google est tout à fait capable de lire et traiter le JSON-LD qu’il soit injecté dans le <head> ou le <body>. Dans l'App Router de Next.js, la méthode la plus simple consiste à rendre la balise script directement dans le composant de page.

Peut-on utiliser generateMetadata pour injecter le JSON-LD ?

Non. generateMetadata sert aux métadonnées standards (titre, description, balises robots). Pour le JSON-LD Next.js, la méthode recommandée est de le rendre sous forme de composant script nativement au sein de votre page ou de votre layout.

Peut-on générer le JSON-LD dans un Client Component ?

C’est fortement déconseillé. Si le script sémantique est généré au runtime côté client, Googlebot risque de ne pas l'exécuter ou de ne pas le détecter lors de sa phase d'indexation initiale. Privilégiez toujours l'injection de données sémantiques dans un composant serveur.

Besoin de valider la conformité de vos balises sémantiques ou de concevoir un site web optimisé dès sa création ? Contactez Orbessia Studio pour échanger sur vos projets.