Allow customizing the way JSON-LD data is injected into pages

folliehiyuki · folliehiyuki · commit 5a169c7fa501 · 2026-02-11T21:46:48.000+07:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@ and this project try to adheres to [Semantic Versioning](https://semver.org/).
 Go to the `v2` branch to see the changelog of Lume 2.
 Go to the `v1` branch to see the changelog of Lume 1.
 
+## Unreleased
+### Added
+- `json_ld` plugin: allow customizing they way JSON-LD data is used inside pages
+
 ## [3.2.1] - 2026-02-10
 ### Fixed
 - LumeCMS: the preview url wasn't detected.
diff --git a/plugins/json_ld.ts b/plugins/json_ld.ts
@@ -170,11 +170,35 @@ function isEmpty(v: unknown) {
   return v === undefined || v === null || v === "";
 }
 
+export interface Options {
+  /**
+   * The function executed on each HTML page file to inject the JSON-LD
+   * data into the document. It receives the Page object and the assembled
+   * JSON-LD string as its arguments.
+   *
+   * By default a <script> tag with the data is inserted into <head>.
+   */
+  renderFn: (page: Page, jsonLdData: string) => void;
+}
+
+export const defaults: Options = {
+  renderFn: (page, jsonLdData) => {
+    const { document } = page;
+    const script = document.createElement("script");
+    script.setAttribute("type", "application/ld+json");
+    script.textContent = jsonLdData;
+    document.head.appendChild(script);
+    document.head.appendChild(document.createTextNode("\n"));
+  },
+};
+
 /**
  * A plugin to insert structured JSON-LD data for SEO and social media
  * @see https://lume.land/plugins/json_ld/
  */
-export function jsonLd() {
+export function jsonLd(userOptions?: Options) {
+  const options = Object.assign({}, defaults, userOptions || {});
+
   return (site: Site) => {
     site.mergeKey("jsonLd", "object");
     site.process([".html"], function processJsonLd(pages) {
@@ -235,11 +259,7 @@ export function jsonLd() {
         if (jsonLdData["@context"] === undefined) {
           jsonLdData["@context"] = "https://schema.org";
         }
-        const script = document.createElement("script");
-        script.setAttribute("type", "application/ld+json");
-        script.textContent = JSON.stringify(jsonLdData);
-        document.head.appendChild(script);
-        document.head.appendChild(document.createTextNode("\n"));
+        options.renderFn(page, JSON.stringify(jsonLdData));
       }
     }
   };
