JSON-LD function similar to generateMetadata #56420

Frozies · 2023-10-04T15:23:47Z

Frozies
Oct 4, 2023

Goals

Should provide an easier way to generate JSON LD structured data in the head element. using generateStructuredData
Should be rendered into the head without any javascript for google rich results
Stop the use of dangerouslySetInnerHTML

 <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />

Background

The current documentation for JSON-LD on the website doesnt work when pushed to production, as it needs to be wrapped in a vanilla tag, which is not stated.

export default async function Page({ params }) {
  const product = await getProduct(params.id)
 
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.name,
    image: product.image,
    description: product.description,
  }
 
  return (
    <section>
      {/* Add JSON-LD to your page */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      {/* ... */}
    </section>
  )
}

When the web page is pushed to production, Schema Markup Validator passes and Google Rich Results only sees

<script>
    self.__next_f.push([
        1,
        '12:["$","section",null,{"children":[["$","head",null,{"children":["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{".... rest of json ld
    ]);
</script>

However if you copy and paste the entire website html code from the browsers development tools into the code test on rich results it DOES pass as the javascript has had time to run.

Proposal

I believe copying a similar structure to generateMetadata will work for generateStructuredData and adding in schema-dts as a dependency for next would be cool too.

Illyism · 2023-10-25T05:32:45Z

Illyism
Oct 25, 2023

Seeing how important this is for SEO, this should be a 1st class feature

0 replies

pranavks · 2023-11-01T05:40:14Z

pranavks
Nov 1, 2023

+1

Although I'd prefer adding the schema functionality in the existing generateMetadata function itself to make things simpler.

In our codebase, in every page we use generateMetadata and inside it we have a helper function that handles metadata that comes from a CMS. To setup schema markup, as of now we have to remember to add the script tag for JSON-LD inside the Page component in all pages. If we can get it done inside the generateMetadata function itself it will make all our pages consistent with SEO practices and we'll have to deal with less code.

3 replies

Frozies Nov 1, 2023
Author

I like that idea too. Originally my thoughts were to keep them separate as they were different schemas, but to simplify it to one json object would be an interesting idea.

kweheliye Jan 3, 2024

+1 adding schema functionality to generateMetadata function would help and make things easier

WalterOkumu Jan 22, 2024

I have something similar, I am dynamically generating metadata using generateMetadata, I was hoping to simply create a function and pass variables to create schema

hungnv1312 · 2024-01-13T19:00:41Z

hungnv1312
Jan 13, 2024

yes, I fixed it use if else if own page res schema Markup json from server to client

1 reply

cap-mfm Apr 10, 2025

?

don-esteban · 2024-01-14T12:29:20Z

don-esteban
Jan 14, 2024

I tested the official solution. Everthing seem doing well. I did a first quick check with curl http://localhost:3000/ in local dev and production mode and I deployed the site to Vercel.

Enhanced support, similar to what generateMetadata offers, would be nice, but it is merely a nice-to-have.

0 replies

saldomik · 2024-05-16T18:57:09Z

saldomik
May 16, 2024

Can not putting the Json/LD script inside the head tag of the page cause SEO problems?

1 reply

don-esteban May 16, 2024

Check in Google Search Console or in another tool, if your schema.org is recognized. It does not has to be in the <head>.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

JSON-LD function similar to generateMetadata #56420

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 5 comments 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

JSON-LD function similar to generateMetadata #56420

Goals

Background

Proposal

Replies: 5 comments · 5 replies

Frozies Nov 1, 2023 Author

Replies: 5 comments 5 replies

Frozies Nov 1, 2023
Author