Skip to main content

From Need to Solution: The coffeecup_tech Plugin

· 5 min read
Florence Venisse
Florence Venisse
Expert Technical Writer

🎬 Previously, in Episode 1...​

See

"Structured Data: From Manual Root.js to a JSON-LD Plugin"

In Part 1, I explained why the usual approaches for managing structured data in Docusaurus eventually reach their limits: duplication, fragile maintenance, and complex multilingual setups.

Even with best practices such as @graph, the core problem remained: structured data lived next to the content instead of being a natural extension of it.

In this Part 2, we move from diagnosis to solution.

I'll show how this reflection led me to design a Docusaurus plugin, built from the ground up to:

  • rely on front matter as a single source of truth,
  • automatically generate JSON-LD compliant with schema.org,
  • handle multilingual content cleanly,
  • and remain maintainable over time.

⭐ The Solution: the CoffeeCup.tech Plugin

coffeeCup.tech délivre un plugin JSON-LD sur NPM pour Docusaurus

This architecture gave birth to the @coffeecup_tech plugin for Docusaurus.

It's easy to install via NPM and provides concrete benefits:

  • Simplified maintenance, centralized information
  • Clean, durable architecture
  • Native multilingual support
  • Consistent SEO
  • Rich snippets
  • No duplication
  • No manual Root.js to maintain

Getting the CoffeeCup.tech Plugin​

This plugin was developed internally by CoffeeCupTechWriting.
It is released under the MIT license:
"The MIT License allows people to do whatever they want with your code as long as they provide attribution and do not hold you liable." (GitHub)

🖤 NPM

Since January 17, 2026, the plugin is available on NPM:

@coffeecup_tech/docusaurus-plugin-structured-data

How the @coffeecup_tech Plugin Works​

The plugin requires a minimal amount of setup, ensuring that the structured data injected into your site actually matches your SEO strategy.

Your Role​

Start by installing the plugin from the NPM packages in your Doc project directory with the npm install command.

npm install --save @coffeecup/docusaurus-plugin-structured-data

Once installed:

  1. You define global properties in docusaurus.config.js.
  2. You enrich your front matter.

Concrete Example​

Here is an excerpt from the front matter of my Smart Services page, English version:

---
id: smart_services
title: Smart Services (Full Remote)
sidebar_label: 🆕 Smart Services
date: 2025-11-12
author: Florence Venisse
language: EN
description: "100% remote, modular services by an expert technical writer xxxxx."
sidebar_position: 1
tags:
  - xxx
  - xxx
  - Smart_Services
schema:
  type: Service
  keywords:
    - remote documentation services
    - xxx
    - xxx
  dateModified: 2025-11-14
---

The Plugin's Role​

Once definitions are in place, the plugin takes care of everything else. Running npm run build is enough to generate structured data.

During the build, the plugin:

  1. Scans front matter in Markdown/MDX files.
  2. Extracts relevant properties.
  3. Merges them with global information from docusaurus.config.js.
  4. Generates JSON-LD compliant with schema.org.
  5. Injects this JSON-LD into the <body> via an automatically generated Root.js file (never maintained by hand).
  6. Automatically handles multilingual content.

✅ No more manual Root.js maintenance.
✅ No duplication.
✅ Fewer errors.

🚫 What the plugin does not do
  • It does not decide your SEO strategy.
  • It does not create content for you.
  • It does not replace editorial thinking. It reliably and systematically applies the choices you make.

Concrete Example​

Here is an excerpt of the structured data generated for the same Smart Services page:

  '/docs/services/smart_services/': {
  "@type": "Service",
  "headline": "Smart Services (Full Remote)",
  "image": "https://www.coffeecup.tech/img/logo/coffeecuptech-social-card.webp",
  "description": "100% remote, modular services by an expert technical writer xxxx.",
  "keywords": [
    "remote documentation services",
    "xxx",
    "xxx",
    "xxxx",
    "xxxx"
  ],
  "datePublished": "2025-11-12T00:00:00.000Z",
  "dateModified": "2025-11-14T00:00:00.000Z"
},

The CoffeeCup.tech Plugin Delivers Clear Benefits​

Who is this plugin for?
  • Content-heavy Docusaurus sites
  • Multilingual projects
  • Docs-as-code teams
  • Creators focused on SEO, GEO, and LLM-readiness :::

Benefits for Technical Writers​

Before (methods 1, 2, or 3) / After the plugin:

BeforeAfter ✅
-Handwritten JSON-LD- Automatically generated JSON-LD
- Duplication with front matter- Front matter as a single source of truth
- Large Root.js file- Transparent Root.js
- @graph for global data- Global data centralized in config
- Difficult multilingual support- Native multilingual support

SEO Benefits​

From an SEO perspective, the plugin provides all the necessary information for effective snippets that are readable by search engines, social networks, and platforms like LinkedIn.

In the LinkedIn snippet below, you can see the image and description defined in the front matter of this article.

Example of a snippet from one of my articles on LinkedIn

From the CoffeeCup.tech Perspective​

This plugin was born from a very concrete need: documenting a modern, multilingual website designed for AI and search engines — without sacrificing consistency or maintainability.

I'm proud that it exists today, that it's open to everyone, and that it can help other creators structure their content in a clean, durable, SEO-friendly way.

What's Next?​

I submitted the plugin to Docusaurus to be listed among officially recommended plugins.
As a Docusaurus user since version 1, contributing back to the ecosystem this way is a real source of pride for me.

It is also part of the awesome-docusaurus project.

This plugin is intentionally simple today. It lays a solid foundation for more advanced use cases, including stronger validation, schema extensions, and deeper integration into docs-as-data pipelines.