Du besoin à la solution : le plugin coffeecup_tech
🎬 Précédemment, dans l'épisode 1...
Dans la partie 1, j'expliquais pourquoi les approches classiques pour gérer les données structurées dans Docusaurus finissaient par montrer leurs limites : duplication, maintenance fragile, multilingue compliqué.
Même avec de bonnes pratiques comme @graph, le problème de fond restait entier : les données structurées vivaient à côté du contenu, au lieu d'en être une extension naturelle.
Dans cette partie 2, on passe du constat à la solution.
Je vais vous montrer comment cette réflexion m'a menée à concevoir un plugin pour Docusaurus, pensé dès le départ pour :
- s'appuyer sur les front matter comme source de vérité,
- générer automatiquement du JSON-LD conforme à schema.org,
- gérer le multilingue proprement,
- et rester maintenable dans le temps.
⭐ La solution : le plugin CoffeeCup.tech
C'est de cette architecture qu'est né le plugin @coffeecup_tech pour Docusaurus.
Un plugin facile à installer depuis le gestionnaire de packages NPM, pour des bénéfices concrets :
- Maintenance simplifiée, informations centralisées
- Architecture propre et durable
- Multilingue natif
- SEO cohérent
- Snippets enrichis
- Plus de duplication
- Plus de Root.js manuel à maintenir
Obtenir le plugin CoffeeCup.tech
Ce plugin a été développé en interne par CoffeeCupTechWriting.
Il est sous licence MIT :
"La License MIT (...) permet aux gens de faire ce qu'ils veulent avec votre code tant qu'ils vous en retournent l'attribution et ne vous tiennent pas responsables." (info GitHub)
Depuis le 17 janvier 2026, le plugin est disponible sur NPM :
Comment fonctionne le plugin @coffeecup_tech
Le plugin vous demande un minimum de travail, ce qui vous assure que les informations que vous voulez injecter correspondent à votre politique SEO.
Votre rôle
Commencez par installer le plugin depuis les packages NPM dans le répertoire de votre projet Doc avec la commande npm install.
npm install --save @coffeecup/docusaurus-plugin-structured-data
Une fois installé :
- Vous définissez les propriétés globales dans
docusaurus.config.js. - Vous enrichissez vos front matter.
Consultez le Readme du plugin sur NPM pour les informations d'installation, de configuration et d'utilisation du plugin.
Exemple concret
Voici un extrait du front matter de ma page Smart Services, version française :
---
id: smart_services
title: Smart Services (100% à distance)
sidebar_label: 🆕 Smart Services
date: 2025-11-12
author: Florence Venisse
language: FR
description: "Services experts en rédaction technique, modulaires et 100% à distance xxx."
sidebar_position: 1
tags:
- xxx
- xxx
- Smart_Services
schema:
type: Service
keywords:
- services de documentation à distance
- xxx
- xxx
dateModified: 2025-11-14
---
Le rôle du plugin
Une fois le travail de définition effectué, le plugin s'occupe de tout le reste : il suffit de lancer la commande npm run build pour générer les données structurées.
Lors du build, le plugin :
- Scanne les front matter des fichiers Markdown/MDX.
- Extrait les propriétés pertinentes.
- Fusionne ces données avec les informations globales présentes dans
docusaurus.config.js. - Génère un JSON-LD conforme à schema.org.
- Injecte ce JSON-LD dans le
<body>via un fichier Root.js généré automatiquement (et donc jamais maintenu à la main). - Gère automatiquement le multilinguisme.
✅ Plus besoin de maintenir un Root.js manuel.
✅ Plus de redondance.
✅ Plus de risque d'erreur.
- Il ne décide pas de votre stratégie SEO.
- Il ne crée pas de contenu à votre place.
- Il ne remplace pas la réflexion éditoriale. Il applique, de façon fiable et systématique, les choix que vous avez faits.
Exemple concret
Voici un extrait des données structurées dans le JSON-LD généré, pour la même page Smart Services :
'/fr/docs/services/smart_services/': {
"@type": "Service",
"headline": "Smart Services (100% à distance)",
"image": "https://www.coffeecup.tech/img/logo/coffeecuptech-social-card.webp",
"description": "Services experts en rédaction technique, modulaires et 100% à distance xxxx.",
"keywords": [
"services de documentation à distance",
"xxx",
"xxx",
"xxx",
"xxx"
],
"datePublished": "2025-11-12T00:00:00.000Z",
"dateModified": "2025-11-14T00:00:00.000Z"
},
Le plugin CoffeeCup.tech a de nombreux bénéfices
- Sites Docusaurus riches en contenu
- Projets multilingues
- Équipes docs-as-code
- Créateurs soucieux de SEO, GEO et LLM-readiness
Bénéfices pour le rédacteur
Avant (méthode 1, 2 ou 3) / Après le plugin : des bénéfices clairs.
| Avant | Après ✅ |
|---|---|
| - JSON-LD écrit à la main | - JSON-LD généré automatiquement |
| - Duplication avec les front matter | - Front matter = source de vérité |
| - Root.js volumineux | - Root.js transparent |
| - @graph pour les données globales | - Données globales centralisées dans le fichier de configuration |
| - Multilingue difficile | - Multilingue natif |
Bénéfices SEO
Côté SEO, le plugin a fourni les informations nécessaires au SEO et à un snippet efficace et parlant, lisible par les moteurs de recherche, les réseaux sociaux et autres partages sur LinkedIn.
Dans le snippet LinkedIn ci-dessous, on voit l'image et la description renseignée dans le front matter de cet article de blog.
Du point de vue de CoffeeCup.tech
Ce plugin est né d'un besoin très concret : documenter un site moderne, multilingue, pensé pour l'IA et pour les moteurs de recherche, sans sacrifier la cohérence ni la maintenabilité.
Je suis fière qu'il existe aujourd'hui, qu'il soit accessible à tous, et qu'il puisse aider d'autres créateurs à structurer leurs contenus de manière propre, durable et SEO-friendly.
Et après ?
J'ai soumis mon plugin à Docusaurus pour qu'il figure parmi les plugins agréés par le framework.
En tant qu'utilisatrice Docusaurus depuis la 1ère version, c'est pour moi une fierté de contribuer ainsi au projet.
Il fait partie également du projet awesome-docusaurus.
Ce plugin est volontairement simple aujourd'hui. Il constitue une base saine pour aller vers des usages plus avancés : validation renforcée, extensions de schémas, ou intégration plus poussée dans des pipelines docs-as-data.