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
dangerouslySetInnerHTMLattribute. - The
JSON.stringifymethod (for serlialization).
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;