Next.js Discord

Discord Forum

JSON-LD not detected by Google Rich Results Tes

Unanswered
Rapidement posted this in #help-forum
Open in Discord
RapidementOP
Hey!

I’m trying to get my JSON-LD metadata properly recognized by Google’s Rich Results Test, but it doesn’t seem to pick it up — even though the script is present in the rendered HTML.

I wanted to define structured data for myself as a Person (name, jobTitle, description, etc.) using JSON-LD, so that it’s recognized in Google Search.

In my Next.js app (app/layout.tsx), I include the JSON-LD like this:
export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en">
      <head>
        <link id="icon" sizes="any" rel="icon" />
        <style
          dangerouslySetInnerHTML={{
            __html: `
              html, body {
                background: #0a0a0a !important;
                color: #ededed !important;
                margin: 0;
                padding: 0;
              }
            `,
          }}
        />
      </head>
      <body className={inter.className}>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c'),
          }}
        />
        <SpeedInsights />
        {children}
      </body>
    </html>
  )
}

and you can see the js <script> here: https://dorian.grasset.dev/
Here is the rich test results, and it doesn't seem to find the script: https://search.google.com/test/rich-results/result?id=xZ0SjKF2vNxhrEMoSkd1fA

Does JSON-LD need to be in the <head> for it to be picked up by Google?
Any suggestions for debugging this?
Is this a known problem?
Maybe I shouldn't rely on this Google tool?

Thanks in advance for your help 🙏

17 Replies

RapidementOP
Here is the jsonld I use in the same app/layout.tsx file:
const jsonLd = {
  '@context': 'https://schema.org',
  '@type': 'Person',
  name: 'Dorian Grasset',
  image: 'https://dorian.grasset.dev/opengraph-image.jpg',
  description: 'Hey! I’m a student at Polytech Montpellier. I build efficient, automated digital solutions by blending dev and ops. Welcome to my portfolio.',
  jobTitle: 'DevOps Engineer Student',
  url: 'https://dorian.grasset.dev/',
  sameAs: ['https://linkedin.com/in/dorian-grasset', 'https://github.com/dorian-grst'],
  knowsAbout: ['Student', 'DevOps', 'Cloud Computing', 'Docker', 'Kubernetes', 'CI/CD', 'Infrastructure as Code'],
}
@Rapidement Hey! I’m trying to get my JSON-LD metadata properly recognized by Google’s Rich Results Test, but it doesn’t seem to pick it up — even though the script is present in the rendered HTML. I wanted to define structured data for myself as a Person (name, jobTitle, description, etc.) using JSON-LD, so that it’s recognized in Google Search. In my Next.js app (app/layout.tsx), I include the JSON-LD like this: export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) { return ( <html lang="en"> <head> <link id="icon" sizes="any" rel="icon" /> <style dangerouslySetInnerHTML={{ __html: ` html, body { background: #0a0a0a !important; color: #ededed !important; margin: 0; padding: 0; } `, }} /> </head> <body className={inter.className}> <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c'), }} /> <SpeedInsights /> {children} </body> </html> ) } and you can see the js <script> here: https://dorian.grasset.dev/ Here is the rich test results, and it doesn't seem to find the script: https://search.google.com/test/rich-results/result?id=xZ0SjKF2vNxhrEMoSkd1fA Does JSON-LD need to be in the <head> for it to be picked up by Google? Any suggestions for debugging this? Is this a known problem? Maybe I shouldn't rely on this Google tool? Thanks in advance for your help 🙏
Losti!
I've been reviewing this topic recently. JSON-LD schemas can be used in the head to describe the content more fully, and also in small sections of the body (I don't think this should cause any conflicts).
Just in case, you can consult this documentation to feel more confident about its implementation:

https://developers.google.com/search/docs/appearance/structured-data/search-gallery
You can consider using a library like Google's schema-ts to test if there are any changes in Google's search test.
https://github.com/google/schema-dts
The next.js documentation mentions that it's a good option to add json-ld to your application.
Again, I haven't tested any schema-dts or json-ld implementations with next.js in production yet (dev only), but I will soon and I hope this helps.
@Losti! Again, I haven't tested any schema-dts or json-ld implementations with next.js in production yet (dev only), but I will soon and I hope this helps.
RapidementOP
Thanks a lot for your detailed answer! 🙏
I’ll give the schema-dts package a try and see if it improves how Google picks up the JSON-LD metadata.

I’ll report back here once I’ve tested it in my Next.js setup. Hopefully it can help others too! 😊
RapidementOP
But after thinking about it I'm almost sure that the jsonld works even if it is not detected because when you type "dorian grasset dev" the title of my site is: "Dorian Grasset: DevOps Engineer Student Portfolio" and I have not used this text combination anywhere in my code
Losti!
Look for a page like tailwind.css and see how they use their titles and other metadata or json-ld. In my case, the title of the page I put in, the main title I use... but if it is a dynamic, you have to be more careful.
The main title (h1) is very important so if you put something like "I'm a full-stack dev looking to innovate | ImLosti" It's something I have to put as h1 on my page
@Losti! The main title (h1) is very important so if you put something like "I'm a full-stack dev looking to innovate | ImLosti" It's something I have to put as h1 on my page
RapidementOP
Super interesting, I'm going to deep dive into this and come back as soon as I have more answers. Thanks again!
@Rapidement Super interesting, I'm going to deep dive into this and come back as soon as I have more answers. Thanks again!
Losti!
I understand that optimizing metadata to score better in the results can be confusing, but cheer up you can do it.
@Losti! I understand that optimizing metadata to score better in the results can be confusing, but cheer up you can do it.
RapidementOP
Yes, after all it's just a small site that doesn't really have any impact, but I find the SEO so interesting.
Losti!
I consider next.js an excellent framework for studying rendering strategies and their impact on metadata.

SSG
ISR
PPR

I suggest creating an e-commerce project with dynamic routes to test metadata and JSON-LD from database requests.
In my case I almost made a blog, it's simple, but if you can go further and it works for you, it's excellent.
@Losti! In my case I almost made a blog, it's simple, but if you can go further and it works for you, it's excellent.
RapidementOP
So I tried using the schema-dts but Google's Rich Results Test still doesn't seem to detect my jsonld. Maybe I need to wait a few days while Google recrawls my website