Structured Data for SEO using Gatsby or a SPA

Theorder
February 2, 2020
224 views
1 vote
2 Answers

Hello I am interested in adding the following JSON-LD structured data to my Gatsby Site. I have tagged React in this as the response in Gatsby is typically very low. What I would like to do is follow along the example here
https://developers.google.com/search/docs/guides/intro-structured-data

How do I add structured data to a Gatsby or a React site?

I am looking for both a static solution (i.e. for Contact Page) and a dynamic solution (i.e. for a Recipe Page ) to auto fill the values

Answers

The best practice for creating and adding SEO is described in this official Gatsby documentation.

You add an SEO component with React helmet:

// src/components/SEO.js

const SEO = ({ title, description, image, pathname, article }) => (
  <StaticQuery
    query={query}
    render={({
      site: {
        siteMetadata: {
          defaultTitle,
          titleTemplate,
          defaultDescription,
          siteUrl,
          defaultImage,
          twitterUsername,
        }
      }
    }) => {
      const seo = {
        title: title || defaultTitle,
        description: description || defaultDescription,
        image: `${siteUrl}${image || defaultImage}`,
        url: `${siteUrl}${pathname || '/'}`,
      }
      return ()
    }}
  />
)
export default SEO

On the bottom you can find some example links. The documentation describes both solutions for static and dynamic meta tags.

In your SEO component itself create two objects

First,

  const schemaOrgWebPage = {
    "@context": "http://schema.org",
    "@type": "WebPage",
    url: siteUrl,
    headline: "Your Headline here",
    inLanguage: "en",
    mainEntityOfPage: siteUrl,
    description: "your description here",
    name: "your name here",
    author: {
      "@id": "author name",
    },
    copyrightHolder: {
      "@id": "copyright holder name",
    },
    copyrightYear: "2020",
    creator: {
      "@id": "creator name",
    },
    publisher: {
      "@id": "publisher name",
    },
    datePublished: "date of your publication",
    image: {
      "@type": "ImageObject",
      url: "image url",
    },
  }

Second,

  const orgaCreator = {
    "@context": "http://schema.org",
    "@id": `${siteUrl}`,
    "@type": "WebPage",
    address: {
      "@type": "PostalAddress",
      addressCountry: "put your country name",
      addressLocality: "put your locality name",
    },
    name: "your name here",
    alternateName: "your nick name",
    description: description || defaultDescription,
    url: siteUrl,
    email: "your email address",
    founder: "founder name",
    foundingDate: "founding date",
    foundingLocation: "founding location",
    image: {
      "@type": "ImageObject",
      url: `${siteUrl}${image || defaultImage}`,
      height: "512",
      width: "512",
    },
    logo: {
      "@type": "ImageObject",
      url: `${siteUrl}${image || defaultImage}`,
      height: "60",
      width: "60",
    },
    sameAs: [
      "https://www.facebook.com/put-your-user-id-here",
      "https://stackoverflow.com/put-your-user-id-here",
      "https://github.com/put-your-user-id-here",
      "https://www.instagram.com/put-your-user-id-here",
      "https://twitter.com/put-your-user-id-here",
      "https://www.linkedin.com/put-your-user-id-here",
    ],
  }

Then finally add this inside Helmet tag

<Helmet>
    <html lang="en" />
    ....
    ....
      <script type="application/ld+json">
            {JSON.stringify(schemaOrgWebPage)}
          </script>
          <script type="application/ld+json">{JSON.stringify(orgaCreator)} 
   </script>
</Helmet>

If you want to test your structured data, once your site is deployed goto
https://search.google.com/structured-data/testing-tool/u/0/ and put your website url in there, it will give you an insight on your structured data.

Please signup or login to give your own answer.

Click here to cancel reply.