Données structurées JSON-LD en Next.js
David TouzetMise à jour le 4 août 20269 min de lectureLes données structurées sont un bloc invisible qui traduit votre page en information exploitable. Un article devient un article avec un auteur et une date, une fiche devient un produit avec un prix et une disponibilité. Next.js n'offre aucune fonction dédiée pour cela, contrairement au sitemap ou au robots. C'est du code que vous placez vous-même, avec une précaution de sécurité que la plupart des tutoriels oublient.
Où placer le JSON-LD dans l'App Router
La question qui bloque tout le monde au démarrage. Next.js ne fournit aucun champ dédié dans l'objet metadata, et personne ne le dit.
La méthode recommandée par la documentation officielle est directe. Vous placez une balise script de type application/ld+json dans le rendu de votre composant serveur, au même titre qu'un titre ou un paragraphe.
2 précisions importantes.
- Un composant serveur, pas un composant client. Le balisage doit être présent dans la réponse HTML initiale. Injecté après coup par du code exécuté dans le navigateur, il n'est pas garanti d'être vu.
- Pas le composant Script de Next.js. Il est fait pour du code exécutable et gère un chargement différé. Le JSON-LD n'est pas du code, c'est de la donnée. Une balise native est le bon outil.
Le partage entre gabarit et page suit une logique simple. Le gabarit racine porte ce qui décrit l'entreprise et le site, valable partout. Chaque page porte ce qui la décrit elle, article, produit ou établissement.
Un avantage souvent négligé. La fonction generateMetadata a déjà chargé la donnée de la page, et la page aussi. Grâce à la déduplication des requêtes, vous construisez votre balisage à partir de cette même donnée sans requête supplémentaire.
La faille d'injection que presque tous les tutoriels oublient
Ce point mérite un chantier à lui seul, parce qu'il est absent de la quasi-totalité des exemples que l'on trouve en ligne.
Pour injecter votre objet, il faut passer par la propriété React qui insère du HTML brut. C'est un passage obligé. Et la fonction qui convertit un objet JavaScript en chaîne ne nettoie absolument rien.
Le scénario d'attaque n'a rien de théorique. Un titre d'article ou un nom de produit venu de votre base contient une balise de fermeture de script suivie de code. Ce contenu est recopié tel quel dans votre page, la balise script se ferme prématurément, et le code s'exécute chez tous vos visiteurs.
La parade tient en une ligne. Avant l'insertion, remplacez chaque caractère inférieur par son équivalent unicode. Le JSON reste parfaitement valide et lisible par les moteurs, mais aucune balise ne peut plus se fermer.
La documentation officielle de Next.js signale ce point. Peu de guides le reprennent.
La règle générale à retenir. Toute donnée qui vient d'une base, d'une interface d'administration ou d'un formulaire est une donnée hostile jusqu'à preuve du contraire. Le fait qu'elle transite par du JSON ne la rend pas inoffensive.
Les types de balisage qui servent encore
Inutile de tout baliser. 5 types couvrent la quasi-totalité des besoins d'un site d'entreprise.
- Organization. L'identité de l'entreprise, son logo, ses profils sociaux. À poser une fois dans le gabarit racine.
- LocalBusiness. Pour un établissement physique, avec l'adresse, le téléphone et les horaires. Ces 3 informations doivent être identiques partout où elles apparaissent, sur le site comme sur la fiche Google.
- Article. Titre, auteur, date de publication et date de mise à jour. C'est la base de tout contenu éditorial.
- Product. Prix, devise, disponibilité, avis. C'est le type qui produit encore les affichages les plus visibles dans les résultats.
- BreadcrumbList. Le fil d'ariane, qui remplace l'adresse brute par un chemin lisible sous votre résultat.
2 types à ne plus attendre. Les résultats enrichis de type FAQ ont été retirés par Google le 7 mai 2026, et le format HowTo l'avait été dès 2023.
Faut-il les supprimer pour autant. Non, et c'est le point que tout le monde rate. Google continue de lire ces balisages, et les modèles de langage s'en servent pour repérer une question et sa réponse dans une page. Le bénéfice s'est déplacé de l'affichage vers la compréhension.
La clé @graph permet enfin de relier plusieurs entités sur une même page, par exemple un article rattaché à son auteur et à l'organisation qui le publie. Vous décrivez alors une structure, plus une pile d'objets séparés. Notre article de fond sur les données structurées détaille ces relations.
Balisage et référencement, ce qu'il faut en attendre
Le malentendu est répandu, autant le lever tout de suite.
Les données structurées ne sont pas un critère de classement. Elles ne font pas monter une page. L'effet est réel, mais il passe par 2 chemins indirects.
- Le taux de clic. Un résultat qui affiche un prix, une note ou un fil d'ariane attire davantage que la même ligne nue. Google a publié des mesures sur ce point, avec un site d'avis de cinéma passé à 25 % de clics supplémentaires sur 100000 pages balisées, et un grand groupe alimentaire à 82 % sur les pages affichées en résultat enrichi. Ce sont de très gros sites, l'ordre de grandeur ne se transpose pas tel quel.
- La compréhension. C'est devenu l'enjeu principal. Un robot de moteur de réponse lit moins bien une mise en page qu'un humain. Un balisage propre lui dit sans ambiguïté qui est l'auteur, quelle est la date, quel est le prix.
Une règle absolue pour finir, et elle ne se négocie pas. Ne balisez jamais une information absente de la page visible. Annoncer une note de 5 étoiles ou un prix qui n'apparaît nulle part expose à une pénalité manuelle. C'est la faute la plus sanctionnée dans ce domaine, et elle se répare lentement.
Le balisage décrit ce que la page dit déjà. Il ne le complète pas.
Les liens à garder sous la main
Gardez ces pages ouvertes pendant que vous posez votre balisage.
Questions fréquentes
Un site Next.js rapide, conçu pour durer
Next.js offre vitesse et modernité, on en fait un vrai atout. On conçoit et développe votre site à Montpellier, performant et taillé pour le référencement.
Faire le point sur votre siteDes agents IA pour un site au top
L’Agent Webmaster optimise votre code et votre vitesse, l’Agent SEO travaille votre visibilité et l’Agent Rédactionnel l’alimente. 12 agents IA au travail.
Voir les 12 agents