Skip to content

How to Do SEO in Gatsby

Gatsby/

You should pay attention to SEO (search engine optimization) if you want people to discover your website. Improving SEO helps people find your site using search engines like Google and Bing.

Here you will learn how to use React Helmet to add meta tags for improving SEO of your Gatsby site. You will see how to improve a blog, but the same principles are applicable to other types of websites.

Source Code

You can see how to use the code from this post in this GitHub repository.

Step 1 — Installing React Helmet

React Helmet is a component you use to manage the head of your site. By using this package, you can control the title and meta tags which improve SEO.

Install the package along with its Gatsby plugin.

npm install gatsby-plugin-react-helmet react-helmet

Add the configuration for the plugin in your gatsby-config.js file.

// gatsby-config.js

module.exports = {
  plugins: ['gatsby-plugin-react-helmet']
}

Now you are ready to create your own component that controls your website’s meta tags.

Step 2 — Creating a SEO Component

You need to create a separate component for SEO to make it reusable in other components.

But first, add some data to your gatsby-config.js about your website. You will use this data as a fallback if a component using the SEO component doesn’t pass anything to it.

module.exports = {
  siteMetadata: {
    url: 'https://example.com',
    title: 'Coolest Web Dev Blog',
    description: 'Learn how to do cool things in web development from the coolest blog.',
    image: 'https://example.com/public/images/picture.png'
  }
}

Create your SEO component in src/components/SEO.js. Since page title and other properties differ from page to page, you need to make them changeable by creating some props. Such setup will allow you to override what goes into SEO meta tags from any component.

import React from 'react';
import { graphql, useStaticQuery} from 'gatsby';
import { Helmet } from 'react-helmet';

export default function SEO({ title, description, image }) {
  const data = useStaticQuery(graphql`
    {
      site {
        siteMetadata {
          url
          title
          description
          image
        }
      }
    }
  `);

  const defaults = data.site.siteMetadata;

  const seo = {
    title: title || defaults.title,
    description: description || defaults.description,
    image: image ? `${defaults.url}${image}` : defaults.image,
  };

  return (
    <Helmet title={seo.title}>
      <html lang="en" />
      <meta name="description" content={seo.description} />
      <meta name="image" content={seo.image} />
    </Helmet>
  );
}

If the props contain values, then you use them. Otherwise, use the default data coming from gatsby-config.js.

You can now use the SEO component in other components. Use the data of a blog post to override the default values through props.

<SEO title={post.title} description={post.description} image={post.image} />

You should see meta tags appearing in head of your page in your browser’s Inspector.

The component currently sets basic meta tags, but there is a lot more we can do with this setup.

Step 3 — Improving Social Media Appearance

You can use meta tags to improve how social media sites present your website when someone shares it.

You can use Cards Markup Tags to control how Twitter displays your site’s links when people share them. Similarly, you use Open Graph protocol to do the same for Facebook.

Update your SEO component to include meta tags for social media. Add url and type to your seo settings object. These additional meta tags improve your website’s appearance on social media.

import { useLocation } from '@reach/router';

const SEO = ({ title, description, image, post }) => {
  // . . .
  const { pathname } = useLocation();
  const seo = {
    // . . .
    url: defaults.url + pathname
    type: post ? 'article' : 'website'
  };

  return (
    <Helmet title={seo.title}>
      {/* . . . */}
      <meta property="og:type" content={seo.type} />
      <meta property="og:title" content={seo.title} />
      <meta property="og:description" content={seo.description} />
      <meta property="og:url" content={seo.url} />
      <meta name="twitter:card" content="summary" />
      <meta name="twitter:title" content={seo.title} />
      <meta name="twitter:description" content={seo.description} />
      <meta name="twitter:url" content={seo.url} />
    </Helmet>
  );
}

You should explore the links above to see more markup tags available on both platforms. You might find something more you could do with what’s available.

After you have implemented the changes, you can test the results using Twitter’s Card validator and Facebook’s Sharing Debugger.

Similarly to social media, you can also improve the appearance of your website on Google with structured data.

Step 4 — Adding Structured Data

Google uses even more metadata to understand your website’s content better. Google uses structured data that follows a certain schema. You can write the markup for this schema in many ways, but Google recommends using the JSON-LD syntax.

You can play around this markup generator tool to see how structured data should look like.

Google has also made a tool called Structured Data Markup Helper that helps you create the markup for a website by interacting with its HTML.

Many schemas are available for different purposes. For a blog you can use the BlogPosting schema type.

Update your SEO component to include post prop. You must specify structured data within a script tag with type application/ld+json. So create a variable that will render it and fill it with values from the post.

const SEO = ({ title, description, image, type, post }) => {
  . . .
  const structuredData = post ? (
    <script type="application/ld+json">
      {JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'BlogPosting',
        headline: post.title,
        description: post.description,
        author: {
          '@type': 'Person',
          name: post.author,
        },
        datePublished: post.date,
      })}
    </script>
  ) : null;

  return (
    <Helmet title={seo.title}>
      . . .
      { structuredData }
    </Helmet>
  );
}

There is a lot more you can do with structured data, so once again, I encourage you to look it up yourself.

You can test your results using this tool after you deploy your website.

Summary

As you can see, there is a lot you can do to improve SEO with Gatsby. You learned how to set up basic meta tags using React Helmet. Likewise, you improved your website’s appearance on social media. You learned about structured data you can use to improve your presence on Google.

References