New! Our platform - Quizpipe is live!

Development

5 Guaranteed Ways To Boost SEO with Gatsby

Wojciech Kałużny
by Wojciech Kałużny
6 min

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%.

Score comparison from Ahrefs

In this article, I'll talk you through the 5 most important optimisation steps to complete in order 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.

Clean Commit's lighthouse score result for desktop

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

Ahrefs issues list for Clean Commit

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.

Search Console sitemap screen

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

Wojciech Kałużny
Wojciech Kałużny
WK is the technical wizard behind the technology delivered by Clean Commit. He picked up software development while completing his Masters of Law to keep himself entertained. He’s that kind of guy. While he’s known for his development skills, he’s also an excellent web designer and generally a jack of all trades in the technical space.

Have an idea you want to discuss?

We’re based in Canberra, Australia and we LOVE working with locals… but we work with clients all around the world.

From the U.S. to the U.K. From Norway to New Zealand. Where there’s a problem to solve, we’ll be there!

Insights

More insights from us

Why we use Tailwind CSS as our primary framework
Productivity

Why we use Tailwind CSS as our primary framework

Selecting the right CSS framework is key to scaling the team's capabilities and experience over time. When working with…
Case Study: FreshOnline
News & Announcements

Case Study: FreshOnline

Jeremy approached the Clean Commit team looking for help launching a new eCommerce business that aimed to deliver bulk…
Case Study: Complyant
Design

Case Study: Complyant

Project overview The Complyant team were scouting for a design and development partner to help redesign their…