React, structured data, and SEO

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:

Structured Data — Screenshot of JSON-LD sections in the BBC Good Food website

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

Single Structured Data as JSON — Screenshot of JSON-LD section transformed into a JavaScript Object Literal

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 calling JSON.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.

Over 200k developers use LogRocket to create better digital experiences

Learn more →

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.

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.