If you have a website, making it discoverable is of paramount importance. In this guide, we’ll show you how to add structured data to your site.
Adding structured data helps search engines such as Google understand your content and get it in front of more eyeballs. We’ll illustrate how this works by building a simple React app that incorporates structured data.
What is structured data?
Google, DuckDuckGo, and other search engines are proficient at understanding the content of websites. However, scraping HTML is not a particularly reliable way to categorize content. HTML is all about presentation and it can be structured in a variety of ways.
To make it easier for search engines to digest the content of your site, you can embed a standardized format known as structured data within a page. This standardized format allows you to explicitly declare the type of content the page contains.
Let’s say you’ve written an article. You can reliably state in a language that Google understands, “This page is an article that has this title, a description, and and image and was published on this date.”
There are hundreds of types of structured data available. You can read about all of them in depth at Schema.org, which is maintained by representatives of the search engine community.
There are many types of structured data available, from popular options to those that are more niche. For instance, you’re likely to use Article a great deal more often than, perhaps, MolecularEntity.
Just like there are many different types of structured data, there is a wide range of formats you can use to provide it, including JSON-LD, Microdata, and RDFa. Google explicitly prefers JSON-LD, so that’s what we’ll focus on on this tutorial.
JSON-LD is effectively a rending of a piece of JSON inside a script
tag with the custom type of application/ld+json
. For example:
<script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "Recipe", "name": "Chocolate Brownie", "author": { "@type": "Person", "name": "John Reilly" }, "datePublished": "2014-09-01", "description": "The most amazing chocolate brownie recipe", "prepTime": "PT60M" } </script>
Structured data in action
While structured data is helpful for search engines in general, it can also impact the way your content is rendered inside search results. For instance, let’s search for “best brownie recipe” in Google and see what shows up:
When you look at the screenshot above, you’ll notice that at the top of the list (before the main search results) there’s a carousel that shows various brownie recipe links with dedicated pictures, titles and descriptions. Where did this come from? The answer, unsurprisingly, is structured data.
If we click on the first link, we’re taken to the recipe in question. Looking at the HTML of that page, we find a number of JSON-LD sections:

If we grab the content of one JSON-LD section and paste it into the devtools console, it becomes much easier to read:

If we look at the @type
property, we can see it’s a "Recipe"
. This means it’s an example of the Recipe schema.
If we look further at the headline
property, it reads "Best ever chocolate brownies recipe"
. That matches up with headline displayed in the search results.
Now we have a sense of what search engines are using to categorize the page and understand exactly what is powering the carousel in the Google search results.
Incidentally, there’s a special name for this carousel; it’s called a rich result. A rich result is a search result that the engine singles out for special treatment when it is displayed. Google provides a Rich Results Test tool that allows you to validate whether your site provides structured data that is eligible to be featured in rich results. More on this later.
Adding structured data to a website
To show how structured data works in practice, let’s create a React app and add structured data to it.
In the console, execute the following command:
npx create-react-app my-app
We now have a simple React app that consists of a single page. Let’s replace the content of the existing App.js
file with the following:
//@ts-check import "./App.css"; function App() { // https://schema.org/Article const articleStructuredData = { "@context": "https://schema.org", "@type": "Article", headline: "Structured data for you", description: "This is an article that demonstrates structured data.", image: "https://upload.wikimedia.org/wikipedia/commons/4/40/JSON-LD.svg", datePublished: new Date("2021-09-04T09:25:01.340Z").toISOString(), author: { "@type": "Person", name: "John Reilly", url: "https://twitter.com/johnny_reilly", }, }; return ( <div className="App"> <script type="application/ld+json"> {JSON.stringify(articleStructuredData)} </script> <h1>{articleStructuredData.headline}</h1> <h3> by{" "} <a href={articleStructuredData.author.url}> {articleStructuredData.author.name} </a>{" "} on {articleStructuredData.datePublished} </h3> <img style={{ width: "5em" }} alt="https://json-ld.org/ - Website content released under a Creative Commons CC0 Public Domain Dedication except where an alternate is specified., CC0, via Wikimedia Commons" src={articleStructuredData.image} /> <p>{articleStructuredData.description}</p> <p>Take a look at the source of this page and find the JSON-LD!</p> </div> ); } export default App;
If we look at the code above, we can see we’re creating a JavaScript object literal named articleStructuredData
that contains the data of an Article. articleStructuredData
is then used to do two things:
- Contribute to the content of the page
- Render a JSON-LD script tag,
<script type="application/ld+json">
, which is populated by callingJSON.stringify(articleStructuredData)
.
When we run our site locally with npm start
, we see a simple article site that looks like this:
Now let’s see if it supports structured data in the way we hope.
Using the Rich Results Test
There are two two ways to test your structured data using the Rich Results Test tool: by either providing a URL or providing code. In our case, we don’t have a public-facing URL, so we’re going to use the HTML that React is rendering.
In devtools, we’ll use the copy outerHTML feature to grab the HTML, then we’ll paste it into Rich Results:
Hit the TEST CODE button and you should see results that look like this:
So we’ve been successful in building a website that renders structured data. More than that, we’re doing it in a way that we know Google will recognize and can use to render rich results in search. That’s a really useful way to drive traffic to a website.
Further reading
In this tutorial, we demonstrated what it looks like to create an Article
. Google has some great resources on other types that it supports and prioritizes for rich results, which should help you build the structured data you need to amplify your content.
LogRocket: Full visibility into your production React apps
Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket combines session replay, product analytics, and error tracking – empowering software teams to create the ideal web and mobile product experience. What does that mean for you?
Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay problems as if they happened in your own browser to quickly understand what went wrong.
No more noisy alerting. Smart error tracking lets you triage and categorize issues, then learns from this. Get notified of impactful user issues, not false positives. Less alerts, way more useful signal.
The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.
Modernize how you debug your React apps — start monitoring for free.
i am getting error elJSON-LD
Missing ‘}’ or object member name.
If you’d like a working example to refer to, you can find one here: https://github.com/johnnyreilly/blog.johnnyreilly.com/blob/main/blog-website/src/pages/about.js
It powers this page: https://blog.johnnyreilly.com/about