How to Add Structured Data to Gatsby

Structured data describes precisely what the content of your website is, and are complementary to meta tags. You can, for example, describe anything you like, such as movie, a recipe or an article.

This structured data gives the opportunity for Google to displayed your pages differently in search results. In addition, these are always displayed at the top of results, which puts your website in the best position for getting that click through.

Using React Helmet

To add structured data with Gatsby, Helmet is the best tool. JSON-LD is the language used by structured data, so let's start by creating a component to output this:

import React from 'react'
import Helmet from 'react-helmet'

export function StructuredData({ children }) {
	return (
		<Helmet>
			<script type="application/ld+json">{JSON.stringify(children)}</script>
		</Helmet>
	)
}

Then you can import the component to add structured data in your pages:

import React from 'react'
import { Helmet } from 'react-helmet'
import { StructuredData } from '../components/structuredData'

export default function index() {
  return (
    <main>
      <Helmet>
        <title>My Website</title>
        <description>Website Description</description>
        <StructuredData>
          {{
            '@context': 'https://schema.org',
            '@type': 'Organization',
            url: 'http://example.com',
            name: 'Website Name',
            contactPoint: {
              '@type': 'ContactPoint',
              telephone: '+44 00000 000 000',
              contactType: 'Support',
            },
          }}
        </StructuredData>
      </Helmet>
      <h1>My Website Heading</h1>
    </main>
  )
}

Use the Rich Results Test provided by Google to make sure you've set everything up correctly and check your data is coming through as expected. And there you go! How to add structured data to Gatsby!