Gatsby SEO Guide

We've had a number of clients ask about Gatsby SEO and if it does a better job than other website solutions. This brief guide will give you five great tips on how to improve your Gatsby SEO.

Optimising websites for SEO is a headache for a lot of people out there. Google's ranking factor consists of many elements. The most important being the number of links to your pages, followed by the quality of content, core web vitals (performance), and user behaviour.

With performance being one of the most important ranking factors, Gatsby already gives us a leg up. But the factors above are not the only ones you should care about.

Our focus at Clean Commit for the past 6 months has been focused on optimising our client's websites (and our own!) for onsite SEO. After implementing a couple fixes we've managed to move Clean Commit's website's ahrefs score from 77% to 98%.

There are countless optimizations you can make to your site's overall performance, but we're going to be focusing on the 5 most important to boost your Gatsby website's SEO potential.

Tools to establish the issues with Gatsby SEO.

The first thing you should focus on is optimising the website's performance. That will have a huge impact on your website's rankings in the long term. Check the tools we use to measure performance to get an idea of what to improve.

For SEO there are 2 main tools I use - Ahrefs and Google's built-in Lighthouse test. When releasing websites we aim to achieve 90+ performance on desktop, 60+ performance on mobile, and 99+ when it comes to SEO scores.

Ahrefs provides more detailed analysis regarding potential on-site issues. Here's the list I worked with.

Let's start dealing with all the issues!

Provide metadata for better CTR with Gatsby

Ahrefs brought up issues concerning the meta tags on our website. When creating a Gatsby website it's important to use a good, reusable SEO component. This component will make sure all the relevant meta tags contain correct data.

We separate the SEO components into two separate components:\

1. The default one, which sets up our head params with Henlo (our Gatsby starter theme), and \
2. A smaller component that modifies each page.

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

function SEO({ data, children }) {
  const meta = useStaticQuery(graphql`
    query MetaDataQuery {
      site {
        siteMetadata {
          title
          separator
          baseTitle
          description
          keyword
          image
        }
      }
    }
  `);

  console.log(data);

  const metadata = meta.site.siteMetadata;
  const metaDescription = data.description || metadata.description;
  const title = data.title || metadata.title;
  const image = data.image
    ? `${metadata.siteUrl}${data.image.childImageSharp.fluid.src}`
    : metadata.image;

  const fullTitle = `${title} ${metadata.separator} ${metadata.baseTitle}`;

  return (
    <Helmet
      title={title}
      titleTemplate={`%s ${metadata.separator} ${metadata.baseTitle}`}>
      <meta name='description' content={metaDescription} />
      <meta property='og:title' content={fullTitle} />
      <meta property='og:image' content={image} />
      <meta property='og:description' content={metaDescription} />
      <meta name='twitter:title' content={fullTitle} />
      <meta name='twitter:description' content={metaDescription} />
      <meta name='twitter:image' content={image} />
      {children}
    </Helmet>
  );
}

export default SEO;

export const query = graphql`
  fragment SEO on MarkdownRemarkFrontmatter {
    seo {
      title
      description
      image {
        childImageSharp {
          fluid(maxWidth: 1200, quality: 100) {
            ...GatsbyImageSharpFluid_noBase64
          }
        }
      }
    }
  }
`;

The SEO Component comes with a fragment to load all information required without repeating code, making future changes quick and easy. Clean Commit uses Netlify CMS, so we setup SEO as partial using Manual Initialisation to reuse it across all content types.

Optimising metadata is important for SEO optimisation. The content of the metadata doesn't really impact your rankings, and Google can generate snippets ignoring the provided content. Saying that, good metadata content will impact your click-through rates (CTR).

You can think about metadata as a preview of the content, if you can outline the most important information there's a better chance of visitors clicking your link.

Use this tool to make sure your titles and descriptions have correct length and are easily readable.

Avoid redundant 301 redirects in Gatsby

The biggest issue that found to be impacting our Gatsby SEO scores were 301 redirects. 301 redirects are the correct way to redirect traffic, and shouldn't affect your search engine optimisation efforts directly. At the same time, 301 redirects add load time and are simply not necessary most of the time. It's important to make sure there are no 301 redirects present in internal links.

Out of the box Gatsby sets up paths with trailing slashes. If you want, you can remove trailing slashes from paths using gatsby-plugin-remove-trailing-slashes. Some people remove trailing slashes from paths directly in gatsby-node.js, but I would advise against doing it in.

When using Netlify it's better to use paths with trailing slashes. Netlify will match paths to redirect rules regardless of whether or not they contain a trailing slash. Paths without trailing slashes can potentially cause infinite redirect loops and unexpected behaviours.

To avoid creating accidental redirects make sure you're using correct paths in Link components.

This link can cause a 301 redirect (it will on Netlify)

<Link to='/about'>About us</Link>

This link won't cause a 301 redirect

<Link to='/about/'>About us</Link>

Avoid redirect chain in Gatsby on Netlify

Netlify causes a redirect chain out-of-the-box. It redirects http://www.domain.com to https://www.domain.com to https://domain.com.

This redirect is a pretty easy fix. All you have to do is add custom redirects to the _redirects file.

https://domain.netlify.app/* https://domain.com/:splat 301!
http://www.domain.com/* https://domain.com/:splat 301!
http://domain.com/* https://domain.com/:splat 301!

Generate a sitemap for better indexing

The next thing you should do is generate a sitemap for better indexing. This would be a mundane task but fortunately, we can leverage Gatsby’s plugins to do the heavy lifting.

My go-to plugin for sitemaps is gatsby-plugin-advanced-sitemap. If you don't want to modify the contents of the sitemap, all you have to do is add this plugin to the gatsby-config. Once your website is built, the sitemap will be available under https://domain.com/sitemap.xml.

To make sure Google fetches the website you can use Google Search Console tool. All you need to do is add the domain, verify it with a TXT record on your DNS.

After your domain is verified you can navigate to the Sitemap tab under the Index in the left-side navigation. There you can submit your sitemap's URL to let Google know your website is ready to be indexed.

Google's search console is a great tool to keep an eye on your rankings in Google, average CTR, and detect potential problems with pages.

Quick summary for optimising Gatsby SEO

1. Focus on performance improvements
2. Provide metadata information for better CTR
3. Avoid unnecessary 301 redirects
4. Avoid redirect chain when working with Netlify
5. Generate sitemap and submit it to Google Search Console

To get up & running with Gatsby quicker, check out our Gatsby starter with support for Netlify CMS & Tailwind