Générer des données structurées en JavaScript (JSON-LD)
Générez vos données structurées en JavaScript avec Google Tag Manager ou du code maison, puis testez l'implémentation pour rester éligible.
Les sites modernes affichent une grande part de leur contenu via JavaScript. Vous pouvez aussi générer vos données structurées de cette manière, ce qui évite de dupliquer des informations déjà présentes sur la page. Bien menée, cette approche garde votre balisage cohérent avec le contenu et reste parfaitement lisible par Google, qui sait traiter les données structurées présentes dans le DOM au moment du rendu. Encore faut-il maîtriser les bases des données structurées, choisir la bonne méthode, garder le balisage synchronisé avec la page et tester le résultat une fois en ligne.
Quand le balisage est généré en JavaScript, le point de vigilance que je signale toujours, c’est la synchronisation : Google lit bien le JSON-LD présent dans le DOM au rendu, à condition qu’il soit cohérent avec le contenu affiché. L’erreur classique est de laisser le balisage et la page diverger après une mise à jour, d’où ma règle de toujours tester le résultat sur l’URL en ligne, pas seulement en local.
Deux méthodes courantes
Deux approches dominent pour générer des données structurées en JavaScript : Google Tag Manager et le code JavaScript personnalisé. Le tableau ci-dessous les compare pour vous aider à choisir.
| Méthode | Principe | Quand la privilégier |
|---|---|---|
Google Tag Manager |
Une balise HTML personnalisée injecte un bloc JSON-LD, alimenté par des variables |
Pour gérer le balisage sans modifier le code source du site |
JavaScript personnalisé |
Un script crée et insère le bloc JSON-LD dans le DOM |
Pour un contrôle fin ou pour compléter un balisage côté serveur |
Affichage côté serveur |
Le JSON-LD est inclus directement dans la sortie rendue |
Quand votre framework génère déjà le HTML côté serveur |
Générer le balisage avec Google Tag Manager
Avec Google Tag Manager, ajoutez au conteneur une balise HTML personnalisée contenant un bloc de données structurées compatibles, puis publiez le conteneur pour le déployer sur le site.
Le point clé est l’usage des variables. Plutôt que de recopier les informations dans l’outil, créez des variables qui extraient les données de la page (par exemple le titre de la page comme nom). Vous limitez ainsi le risque d’incohérence entre le contenu visible et le balisage inséré. Recueillez via des variables toutes les informations nécessaires au type que vous balisez.
Injecter du JSON-LD en JavaScript personnalisé
Avec du code personnalisé, vous générez l’ensemble du balisage ou vous complétez des données déjà rendues côté serveur. Quelle que soit l’approche, Google traite les données disponibles dans le DOM au moment du rendu, comme l’expliquent les bases du SEO JavaScript.
La démarche tient en trois temps : identifiez le type de données structurées visé, ajoutez à votre page un script qui crée le bloc et l’insère dans le document, puis testez. L’exemple ci-dessous récupère un balisage via une requête, puis crée une balise de script de type JSON-LD et l’ajoute à l’en-tête de la page. Adaptez la source des données et le type de balisage à votre cas.
fetch('https://api.monsite.fr/recipes/123')
.then(response => response.text())
.then(structuredDataText => {
const script = document.createElement('script');
script.setAttribute('type', 'application/ld+json');
script.textContent = structuredDataText;
document.head.appendChild(script);
});Tester votre implémentation
Pour confirmer que Google peut explorer et indexer vos données structurées générées en JavaScript, ouvrez le test des résultats enrichis et saisissez l’URL à contrôler ; notre guide pour tester vos données structurées détaille la marche à suivre. Indiquez l’URL plutôt que de coller le code : des restrictions s’appliquent au code brut, notamment côté chargement de ressources.
Si tout est correct et que votre type est compatible, le message d’éligibilité aux résultats enrichis s’affiche. Si des erreurs apparaissent, il s’agit souvent d’une syntaxe incorrecte ou d’une propriété manquante : relisez la documentation du type concerné, complétez les propriétés et retestez.
Si vous balisez des produits, sachez qu’un balisage généré dynamiquement peut rendre les explorations Shopping moins fréquentes et moins fiables. C’est risqué pour des données qui évoluent vite, comme le prix et la disponibilité. Assurez-vous que votre serveur supporte le surcroît de trafic provenant de Google.
À faire
- alimenter le balisage par des variables de page
- insérer le JSON-LD dans le DOM
- tester l’URL après publication
- relire la documentation du type visé
À éviter
- dupliquer des informations dans l’outil de gestion de balises
- générer dynamiquement un balisage Product critique
- tester uniquement du code collé
- négliger la charge serveur côté Shopping
Points clés à retenir
- Choisir entre Google Tag Manager, code maison et rendu côté serveur
- Utiliser des variables pour rester cohérent avec la page
- Injecter le bloc JSON-LD dans le DOM
- Tester l'URL avec le test des résultats enrichis
- Surveiller la fiabilité du balisage Product généré dynamiquement
L’essentiel pour un balisage JavaScript fiable.
Quiz : testez vos connaissances
Quiz : testez vos connaissances
-
Google lit-il les données structurées générées en JavaScript ?
- Oui, mais uniquement si elles sont dupliquées en HTML
- Oui, il traite celles présentes dans le DOM au moment du rendu
- Non, seules les données présentes dans le HTML brut comptent
Google comprend et traite les données structurées présentes dans le DOM au moment où il affiche la page.
-
Avec Google Tag Manager, faut-il recopier les informations de la page dans l'outil ?
- Non, il faut utiliser des variables qui extraient les informations de la page
- Oui, mais seulement pour les pages produit
- Oui, recopier les données est la méthode recommandée
Plutôt que de recopier les informations, utilisez des variables qui extraient les données de la page. Vous évitez ainsi les incohérences entre le contenu visible et le balisage inséré.
-
Pourquoi un balisage Product généré dynamiquement est-il risqué ?
- Il est purement et simplement ignoré par Google
- Il oblige à doubler chaque produit dans le HTML
- Il peut rendre les explorations Shopping moins fréquentes et moins fiables
Un balisage généré dynamiquement peut rendre les explorations Shopping moins fréquentes et moins fiables, ce qui est risqué pour un balisage
Productcritique.
À propos de l'auteur
Besoin d'un accompagnement SEO ?
Votre balisage JavaScript est-il bien lu et indexé par Google ?