JsonLd does not work in NextJs 13 App Router #56659

KMadhanSPM · 2023-10-10T13:28:15Z

KMadhanSPM
Oct 10, 2023

Summary

Need to render schema in Head tag. Unable to render it. Can you please explain?

Additional information

No response

Example

No response

icyJoseph · 2023-10-10T18:35:55Z

icyJoseph
Oct 10, 2023
Collaborator

What have you tried so far?

Their recommendation is to place it in a script tag wherever you need it:

https://nextjs.org/docs/app/building-your-application/optimizing/metadata#json-ld

I tried it with their code, placed it within a head tag at the root layout, and it worked, but I think that's not ideal. And it might not be possible for you. Why would it need to be in the head tag?

7 replies

icyJoseph Oct 11, 2023
Collaborator

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:

https://stackblitz.com/edit/nextjs-ch23gk?file=app%2Flayout.tsx (direct head injection)
https://stackblitz.com/edit/nextjs-tf9jjc?file=app%2Flayout.tsx (next/script with beforeInteractive strategy)

KMadhanSPM Oct 11, 2023
Author

@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?

mmspring13 Mar 18, 2024

use useServerInsertedHTML for that

bdlowery Aug 28, 2024

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:

https://stackblitz.com/edit/nextjs-ch23gk?file=app%2Flayout.tsx (direct head injection)

https://stackblitz.com/edit/nextjs-tf9jjc?file=app%2Flayout.tsx (next/script with beforeInteractive strategy)

There's not a single instance in the docs that has an example using <head> in app router. You probably shouldn't do it.
The second one causes hydration errors.

4anghyeon Jun 13, 2025

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:

https://stackblitz.com/edit/nextjs-ch23gk?file=app%2Flayout.tsx (direct head injection)

https://stackblitz.com/edit/nextjs-tf9jjc?file=app%2Flayout.tsx (next/script with beforeInteractive strategy)

There's not a single instance in the docs that has an example using <head> in app router. You probably shouldn't do it. The second one causes hydration errors.

using ⁠next/script with the ⁠beforeInteractive strategy, is the correct approach.
The hydration error occurs because the Script tag is placed directly below the ⁠html tag. It should be moved inside the ⁠body tag.

According to the Next.js documentation:

Good to know: Scripts with ⁠beforeInteractive will always be injected inside the head of the HTML document regardless of where it's placed in the component.

Uriyo · 2025-06-13T05:36:39Z

Uriyo
Jun 13, 2025

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

0 replies

Uriyo · 2025-06-13T07:50:06Z

Uriyo
Jun 13, 2025

Okay I have founhd solution for me
Try using next/script tag provided by the next js this worked for me with ssg

 <Script
        id="article-schema"
        type="application/ld+json"
        strategy="beforeInteractive"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(articleSchema).replace(/</g, '\\u003c'),
        }}
      />


const articleSchema = {
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": blog.title,
      "image": blog.image_url,  
      "author": {
        "@type": "Person",
        "name": blog.author_name
      },  
      "publisher": {
        "@type": "Organization",
        "name": "Prepzo",
        "logo": {
          "@type": "ImageObject",
          "url": "https://www.prepzo.ai/logo.png"
        }
      },
      "datePublished": blog.publish_date
  };

0 replies

JsonLd does not work in NextJs 13 App Router #56659

Uh oh!

KMadhanSPM Oct 10, 2023

Summary

Additional information

Example

Replies: 3 comments · 7 replies

Uh oh!

Uh oh!

icyJoseph Oct 10, 2023 Collaborator

Uh oh!

Uh oh!

icyJoseph Oct 11, 2023 Collaborator

Uh oh!

KMadhanSPM Oct 11, 2023 Author

Uh oh!

mmspring13 Mar 18, 2024

Uh oh!

Uh oh!

bdlowery Aug 28, 2024

Uh oh!

Uh oh!

4anghyeon Jun 13, 2025

Uh oh!

Uriyo Jun 13, 2025

Uh oh!

Uriyo Jun 13, 2025

KMadhanSPM
Oct 10, 2023

Replies: 3 comments 7 replies

icyJoseph
Oct 10, 2023
Collaborator

icyJoseph Oct 11, 2023
Collaborator

KMadhanSPM Oct 11, 2023
Author

Uriyo
Jun 13, 2025

Uriyo
Jun 13, 2025