« Un agent qui compare des prix entre plusieurs boutiques ne lit jamais un bandeau promotionnel en rouge clignotant. » Cette phrase, glissée dans une réunion de cadrage d’un site e-commerce headless, résume assez bien la question de fond : un contenu pensé uniquement pour un rendu visuel humain devient largement illisible pour un programme qui doit en extraire une information fiable.
Avec la multiplication des agents automatisés capables de naviguer et de comparer des offres pour le compte d’un utilisateur, un site headless dispose d’un avantage structurel : son contenu existe déjà sous forme de données avant d’être transformé en HTML. Encore faut-il exposer ces données de façon exploitable, ce qui va bien au-delà d’ajouter quelques balises <meta> pensées pour le référencement classique.
Ce qu’un rendu HTML pour humain ne dit pas à une machine
Un prix affiché « À partir de 49,90 € » dans une fiche produit contient, pour un humain, une information immédiatement compréhensible : un tarif de départ, potentiellement variable selon des options. Pour un programme qui analyse le DOM sans comprendre le contexte visuel environnant, cette chaîne de caractères reste ambiguë : s’agit-il d’un prix TTC ou HT, dans quelle devise, la mention « à partir de » modifie-t-elle la structure attendue d’un prix fixe ?
Le schéma schema.org/Offer, sérialisé en JSON-LD, répond précisément à ce problème en typant chaque valeur plutôt qu’en la décrivant en langage naturel.
Structurer un flux qui reste exploitable sans le rendu visuel
Sur ce projet, le flux JSON-LD est généré côté WordPress à partir des mêmes données que celles servies par l’API REST au frontend, garantissant qu’aucune valeur ne diverge entre l’affichage humain et la donnée structurée :
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Formation développement WordPress headless",
"offers": {
"@type": "Offer",
"price": "490.00",
"priceCurrency": "EUR",
"availability": "https://schema.org/InStock",
"priceValidUntil": "2023-12-31"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.6",
"reviewCount": "87"
}
}
Chaque champ porte un type explicite : price est une valeur numérique sous forme de chaîne normalisée, availability pointe vers une URL de référence plutôt qu’un texte libre comme « en stock », et priceValidUntil donne une date d’expiration exploitable sans ambiguïté de format.
Trois erreurs qui rendent un flux inexploitable
- Mélanger dans un même champ une valeur et son unité (« 49,90 € » plutôt que
price: "49.90"etpriceCurrency: "EUR"séparément) - Décrire une disponibilité en texte libre plutôt qu’avec les valeurs standardisées de
schema.org/ItemAvailability - Ne mettre à jour le flux structuré qu’au moment du déploiement, alors que le stock ou le prix change en temps réel côté back-office
Rendre le flux accessible indépendamment du rendu
Un agent automatisé ne rend généralement pas le JavaScript d’une page comme le ferait un navigateur complet. Le flux JSON-LD doit donc être injecté côté serveur, dans le HTML initial de la page, et non ajouté dynamiquement après l’hydratation d’un composant côté client. Sur ce projet, la génération du bloc JSON-LD se fait directement dans le rendu serveur du frontend, à partir de la même réponse API que celle qui alimente l’affichage visuel.
Un flux JSON-LD exposé séparément, à une URL dédiée (par exemple /produits.json), permet en complément à un agent de récupérer l’ensemble du catalogue sans avoir à parcourir chaque page individuellement, ce qui réduit considérablement le nombre de requêtes nécessaires pour une comparaison à grande échelle.
Ce que ce flux ne remplace pas
Cette approche ne se substitue en rien à une stratégie de référencement classique : elle concerne exclusivement la lisibilité du contenu par des programmes qui en extraient une information structurée, indépendamment de tout objectif de positionnement dans les résultats de recherche traditionnels.
Notre verdict
Un site headless a la structure de données en interne dès l’origine ; le vrai travail consiste à ne pas la perdre en cours de route en la traduisant uniquement en présentation visuelle. Un flux JSON-LD rigoureusement typé, cohérent avec les données réelles de disponibilité et de prix, prépare un contenu à être compris aussi bien par un humain que par un programme, sans devoir maintenir deux sources de vérité distinctes.
