Duplicate JSON-LD scripts #14797
Replies: 0 comments 3 replies
-
|
@Ammar123890 you nailed the diagnosis. the key IS the JSON content, and the meta API doesn't let you change it. in if ("script:ld+json" in metaProps) {
let json = JSON.stringify(metaProps["script:ld+json"]);
return (
<script
key={`script:ld+json:${json}`}
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: escapeHtml(json) }}
/>
);
}no attributes are spread, so the duplicate happens because cloudflare minifies the inline script content. on hydration, react calls fix options:
export default function Route() {
return (
<>
<script
id="json-ld-product"
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(yourSchema) }}
/>
{/* route content */}
</>
);
}option 2 gives you full control over |
Beta Was this translation helpful? Give feedback.
-
|
@sunnypatell Google can read scripts from both the head and the body, so that part isn’t an issue. LINK However, I still believe this needs a proper fix otherwise, what’s the point of having meta if we’re essentially bypassing them? |
Beta Was this translation helpful? Give feedback.
-
|
@Ammar123890 agreed, option 2 is the better path for production. and good point about head vs body placement, google's docs confirm they parse structured data from anywhere in the document. solid solution. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
I am running into a persistent hydration issue in v7.10.1 regarding JSON-LD structured data in the
metafunction. I noticed that structured data tags are being duplicated in the DOM in Production, but it is intermittent, it happens on some page loads but disappears on a hard refresh. After digging through the source, I believe the culprit is how theMetacomponent handles thescript:ld+json, where the framework uses the entire stringified JSON content as the Reactkey:This is extremely fragile for production environments using a CDN like Cloudflare with Automatic Platform Optimization (APO) and Auto-Minify enabled. Sometimes, the Cloudflare Edge serves a minified version of the HTML, stripping whitespaces from the script. When React hydrates, it generates its own string with standard
JSON.stringifyspacing. Because the Key = Content, React sees a mismatch and appends a duplicate tag. On a refresh, if the CDN serves a non-minified version, the strings match and the duplicate doesn't appear.I tried to provide a stable
idto the script to force reconciliation despite the whitespace diff, but the framework currently blocks every attempt. The shorthand API ignores sibling properties likeid, and the explicit req is blocked by the internalisValidMetaTagvalidator:This regex effectively prevents us from using a
scripttag with a custom ID in themetafunction. As a result, Google Search Console is flagging "Invalid items" because it sees two conflicting schemas on the same page. Is there any supported way to define a stableidfor a script within themetafunction? Or is there any solution for it?Beta Was this translation helpful? Give feedback.
All reactions