Vagner Maltauro

Render JSON-LD Data in Next.js

Vagner

Vagner

@vagnermaltauro

Render JSON-LD Data in Next.js

Learn how to make JSON-D (application/ld+json) schemas work in Next.js and other ReactJS projects.

To render JSON-LD data in Next.js (or any React app) you need to use:

  • The < script > element.

  • The dangerouslySetInnerHTML attribute.

  • The JSON.stringify method (for serialization).

JSON-LD stands for JavaScript Object Notation for Linked Data. It’s a lightweight method to present Schema.org data to search engines about your website’s content.

Let’s look at an example.

Let’s say you have an HTML JSON-LD schema that is structured similarly to this:

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Name of service",
  "image": "https://somewebsite.com/static/images/some-image.jpg",
  "description": " I seek the means to fight injustice. To turn fear against those who prey on the fearful. Someone like you. Someone who'll rattle the cages. My anger outweighs my guilt.",
  "brand": "Company Name",
  "review": {
    "@type": "Review",
    "name": "Company Name ",
    "reviewBody": "It was a dog. It was a big dog. It's not who I am underneath but what I do that defines me. Well, you see... I'm buying this hotel and setting some new rules about the pool area.",
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": "5"
    },
    "datePublished": "2020-04-06",
    "author": {"@type": "Person", "name": "Emma"}
  }
}
</script>

To make this JSON-LD schema work in Next.js, start by removing the HTML <script> tags so that you’re left with a JSON-LD object.

Then assign the JSON-LD object to a variable, like this:

const schemaData =
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Name of service",
  "image": "https://somewebsite.com/static/images/some-image.jpg",
  "description": "I seek the means to fight injustice. To turn fear against those who prey on the fearful. Someone like you. Someone who'll rattle the cages. My anger outweighs my guilt.",
  "brand": "Company Name",
  "review": {
    "@type": "Review",
    "name": "Company Name ",
    "reviewBody": "It was a dog. It was a big dog. It's not who I am underneath but what I do that defines me. Well, you see... I'm buying this hotel and setting some new rules about the pool area.",
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": "5"
    },
    "datePublished": "2020-04-06",
    "author": {"@type": "Person", "name": "Emma"}
  }
}

Now you need to serialize your schemaData variable with JSON.stringify():

JSON.stringify(schemaData)

Finally you add JSON.stringify(schemaData) as an object value of the dangerouslySetInnerHTML attribute inside a < script > element to render it in the browser:

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

If you’re confused, here’s a complete page example, based on the code in his tutorial, which should work in all Next.js/React websites:

import React from 'react';
 
const schemaData =
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Name of service",
  "image": "https://somewebsite.com/static/images/some-image.jpg",
  "description": "I seek the means to fight injustice. To turn fear against those who prey on the fearful. Someone like you. Someone who'll rattle the cages. My anger outweighs my guilt.",
  "brand": "Company Name",
  "review": {
    "@type": "Review",
    "name": "Company Name ",
    "reviewBody": "It was a dog. It was a big dog. It's not who I am underneath but what I do that defines me. Well, you see... I'm buying this hotel and setting some new rules about the pool area.",
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": "5"
    },
    "datePublished": "2020-04-06",
    "author": {"@type": "Person", "name": "Emma"}
  }
}
 
const SomePage = () => {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
      />
      <div>Your content</div>
    </>
  );
};
 
export default SomePage;
See all posts