JsonLd does not work in NextJs 13 App Router #56659
Replies: 4 comments 7 replies
-
|
What have you tried so far? Their recommendation is to place it in a script tag wherever you need it: I tried it with their code, placed it within a |
Beta Was this translation helpful? Give feedback.
-
|
Last but not least, although I think it is not very safe to inject these directly into the head yourself, you can do either of these:
|
Beta Was this translation helpful? Give feedback.
-
|
@icyJoseph We are having dynamic pages using slug. In that we are fetching schema based on route URL. If we are rendering schema in layout.jsx, we are not able to get the dynamic data. Can you give the solution for this? |
Beta Was this translation helpful? Give feedback.
-
|
use useServerInsertedHTML for that |
Beta Was this translation helpful? Give feedback.
-
There's not a single instance in the docs that has an example using |
Beta Was this translation helpful? Give feedback.
-
using next/script with the beforeInteractive strategy, is the correct approach. According to the Next.js documentation:
|
Beta Was this translation helpful? Give feedback.
-
|
I have also the same use case in which i am trying to add json ld for my different blog pages but the thing that is given in the docs does not works for me too i am on next:14 |
Beta Was this translation helpful? Give feedback.
-
|
Okay I have founhd solution for me |
Beta Was this translation helpful? Give feedback.
-
|
"next": "^14.2.26" with app router. // /public/next/scripts/ldJSON.js
(function (){
if (typeof window !== 'undefined') {
window.ldJSON = (data) => {
var script = document.getElementById('schema');
if (script) {
script.innerHTML = data;
return;
}
var node = document.getElementsByTagName('script')[0];
script = document.createElement('script');
script.key = 'structured-data';
script.type = 'application/ld+json';
script.id = 'schema';
script.innerHTML = data;
node.parentNode.insertBefore(script, node);
}
}
})()'use client';
import Script from 'next/script';
export function JsonLdScript({ schema }: { schema: Record<string, unknown> }) {
return (
<Script
src="/next/scripts/ldJSON.js"
onReady={() => {
if (window?.ldJSON) {
window?.ldJSON(JSON.stringify(schema));
}
}}
/>
);
} |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
Additional information
No response
Example
No response
Beta Was this translation helpful? Give feedback.
All reactions