Ability to add structured data to head.tsx in /app #44629

trevorpfiz · 2022-12-23T00:55:59Z

trevorpfiz
Dec 23, 2022

Describe the feature you'd like to request

I would like to be able to add structured data to a Next.js 13 website using the appDir. This was a related discussion in app directory feedback.

Describe the solution you'd like

I would like to be able to add structured data to head.tsx in a similar way to this:

<script
      key="structured-data"
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
    />

Describe alternatives you've considered

<Script
    id='app-ld-json'
    type='application/ld+json'
    dangerouslySetInnerHTML={{
	    __html: JSON.stringify(content, null, '\t')
    }}
/>

It "works", but it is in the body and not the head.

nitinTJ · 2023-08-07T07:31:15Z

nitinTJ
Aug 7, 2023

I have tried the same but it is working on my localhost but not on the production url. Although I can see it when I am inspecting the page but unable to find it in the page source. Any help will be appreciated.

`import React from "react";

interface ClientScriptProps {
data: {};
}

function ClientScript({ data }: ClientScriptProps) {
return (

{/* Add JSON-LD to your page /}
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
/>
{/ ... */}

);
}

export default ClientScript;
`
I am using this component wherever I want to add JSON LD.

0 replies

roeean · 2023-10-05T07:56:35Z

roeean
Oct 5, 2023

I have the same problem:

Tried using /head.tsx, doesn't seem to work for each route.
Tried using the tag, which doesn't seem to be supported in the new /app directory.
Tried using next/script (from this solution) but that seems to load the script on the client, I want it to be added at build-time or on the server.
Tried using the new "config-based metadata", but it says that "script" tags are not supported.

1 reply

zain-sattar Dec 11, 2023

did you find any solution?

todor0v · 2024-06-14T21:19:12Z

todor0v
Jun 14, 2024

If anyone is struggling with this, I found out that as per the Google Search Central documentation and the Rich Results Test it should be absolutely fine to have structured data in the body. This is also the solution presented by the Next.js documentation.

If anyone needs dynamic data and still prefers the <head> approach, as do I, a possible solution is to make the request to that data twise. Once in the layout.tsx for the metadata and once in page.tsx for the remaining part. When you fetch the same data in a route more than once, React will automatically dedupe the requests without affecting the performance.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Ability to add structured data to head.tsx in /app #44629

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 3 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Ability to add structured data to head.tsx in /app #44629

Uh oh!

Uh oh!

trevorpfiz Dec 23, 2022

Describe the feature you'd like to request

Describe the solution you'd like

Describe alternatives you've considered

Replies: 3 comments · 1 reply

Uh oh!

nitinTJ Aug 7, 2023

Uh oh!

roeean Oct 5, 2023

Uh oh!

zain-sattar Dec 11, 2023

Uh oh!

todor0v Jun 14, 2024

trevorpfiz
Dec 23, 2022

Replies: 3 comments 1 reply

nitinTJ
Aug 7, 2023

roeean
Oct 5, 2023

todor0v
Jun 14, 2024