Add structured data (JSON-LD) with the Gatsby Head API  🗂 👤

How do you add structured data to your Gatsby site? With a little help from good old JSON.stringify() and the Gatsby Head API!

  1. Create the schema as an object
  2. Stringify the schema object
  3. Add to the head
// File: src/pages/{Email.slug}.js
import React from "react";
import { graphql, Link } from "gatsby";

export function Head({ data }) {
  const { ogImagePath, title, dateISO } = data.email || {};
  const { siteMetadata } = data.site || {};

  // 1️⃣ Create the schema as an object
  const schema = {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    headline: title,
    image: [`${siteMetadata.siteUrl}${ogImagePath}`],
    datePublished: dateISO,
    author: [
      {
        "@type": "Person",
        name: "Benedicte Raae",
        sameAs: "https://twitter.com/raae",
      },
    ],
  };

  // 2️⃣ Stringify the schema object (adding the "null, 2" gives you readable json)
  const schemaAsString = JSON.stringify(schema, null, 2);

  return (
    <>
      <title>{title}</title>
      {/* ... meta tags */}
      {/* 3️⃣ Add to the head */}
      <script type="application/ld+json">{schemaAsString}</script>
    </>
  );
}

export default function EmailPage({ data }) {
  const { title, date, dateISO, html } = data.email || {};
  return (
    <main>
      <h1>{title}</h1>
      <time datetime={dateISO}>{date}</time>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </main>
  );
}

export const query = graphql`
  query BlogById($id: String!) {
    site {
      siteMetadata {
        siteUrl
      }
    }
    email(id: { eq: $id }) {
      title
      date(formatString: "MMMM Do, YYYY")
      dateISO: date
      html
      ogImagePath: ogImage
    }
  }
`;

If you are not familiar with structured data or JSON for Linking Data (JSON-LD) I recommend reading through Understand how structured data works by Google.

 

All the best,
Queen Raae

You might also be interested in...

Stuck on a reef in the sharky waters around the Gatsby islands?

Book a 1-on-1 Gatsby Call with Queen Raae. Friendly advice you can put into action immediately, guaranteed!

Serious about Gatsby? Sign up for emails sent every weekday to help you get the most out of Gatsby!