Comprehensive Gatsby JS SEO Guide

DAte

Apr 30, 2023

Category

Headless

Reading Time

4 min

First things first: what is SEO?

"Search Engine Optimisation" is the process of making a website more visible to search engines, such as Google and Bing. In its simplest form, SEO aims to assist you in ranking organically for your given niche or service. Studies have shown that 65% of all the clicks coming from organic search results, are from the first page - meaning it's more important than ever to rank highly on Google.

SEO be divided into two main sections: On-Page SEO and Off-Page SEO. This article will be focusing on how to achieve strong On-Page SEO with Gatsby JS and JAMStack in general.

On-Page SEO

On-page SEO is the process of optimising your website‚Äôs content and other assets in order to improve your website's rankings in search engines. This section focuses on the most important on-page SEO factors. In the past, you could get a good ranking on Google by having a few keywords in your title tag, and by putting a few keywords in your description tag. Nowadays, there are hundreds of ranking factors. Google is smarter than ever before. And from May 2021 page experience signals play an important part in these ranking factors, and now so more than ever, having a Gatsby JS or JAMStack site can help you with this.

Before you delve into the deeper aspects of SEO, you must first ensure that you that your site is following core aspects of SEO, these include:

Ensuring your images URL's contain core keywords, and that they carry correct alt tags. Don't go overboard with your alt tags, this is known as keyword stuffing and Google can penalise you for that.
Setup a blog on your site, this allows you to continually publish relevant content to your given niche or service, without needing to alter the structure of your site and add additional pages. Your blog should always carry high quality content, as Google also penalises you for spammy blog posts.
Make sure your pages carry a meta description, while search engines do not rely on meta descriptions to rank your content, it can indirectly effect your ranking by influencing your click through rate - Which is the rate in which people click on your content when being presented it as a search result.
HTTPS. It's a way to protect you and your computer. HTTPS makes sure that no one can change the information you send to the computer. Since 2014 search engines like Google have penalised sites that do not offer secure connections, ensure that your site offers HTTPS, and redirects all HTTP traffic to HTTPS.
Brainstorm keyword optimisation strategies. Use SEO tools such as Semrush to identify what keywords your competitors are ranking for, use these keywords to guide your content creation.
Make sure you have a sitemap.xml on your page. We utilise the gatsby-plugin-advanced-sitemap plugin to achieve this.
Have a robots.txt on your website, we utilise gatsby-plugin-robots-txt to make this happen. In addition, you should link your sitemap in the plugin's configuration.

At 10SQ, to achieve these points, we use a mix of Gatsby JS plugins and methods to achieve this. Our Content Management System, or CMS, which is hosted with Prismic allows us to ensure all our images carry the correct alt tags, and allows us to rapidly produce content for our Blog. In follow the guide offered here, to ensure our pages have a meta description, title, and open graph tags (More about them later in this article). As mentioned before, we use Semrush to guide our content creation strategy, by analysing our competitors keywords.

When implementing your Gatsby SEO Component, ensure that your Open Graph tags are being populated. This ensures that the content you are producing can easily be understood by search engines and social media platforms, this can easily be achieved by making sure that you populate meta tags such as og:title, og:description and og:image - We simply pass these in via our CMS.

In addition, while you are focusing on Open Graph tags, research how you can implement Schema Markup on page, for example if you are hosting a blog on your site, make sure to include the BlogPosting @Type on your page. Once again, we utilise our CMS to populate this data. If you are struggling to digest the easiest way to implement this on page, you can review this Schema Markup Generator, which should give you a good idea on what markups you can use, such as the Breadcrumb, BlogPosting and Organization types.

Now coming back to Google's May 2021 Page Experience update, and why having a JAMStack website will be so important in the years to come.

Core Web Vitals

The goal of Core Web Vitals is to let you know how fast your website is, and what the user experience will be like. This focuses on measurable metrics that give a strong indication and site speed.

It focuses on a few core areas:

Largest Contentful Paint (LCP) measures the page loading speed, which refers to how long it takes for the largest above-the-fold element to show on the screen. More often than not, this is a hero image/video or the main block of text on the page.
First Input Delay (FID) measures a page‚Äôs responsiveness, referring to how long it takes for an element to respond when the visitor tries to interact with it, such as a button or link click.
Cumulative Layout Shift (CLS) measures how stable your page layout is while it loads. This means when a page load, how much of the page suddenly shifts as the styling loads, such as images or text shifting. This score focuses on how little or extreme this shift is (Hint, you want to have as little shift as possible). This speaks to user experience and how the page feels before the page fully loads.

First, by utilising GatsbyJS or any other JAMStack suite of tools, you are already making the right steps to ensure you are keeping these scores as good as technically possible.

Here are some broad tips to assist with boosting these scores:

Limit above the fold animations.
Inline important CSS and small images, and set fixed sizes for page elements, this will reduce the CLS. This is done in your styling.
Limit blocking elements that prevent user input, such as intense animations above the fold.
Optimise your images to use lazy loading, reducing page load times and CLS.

We utilise the following plugins to best assist with this:

gatsby-plugin-purgecss - Gatsby Plugin PurgeCSS assists with your site fast being fluid. While it's not exactly a plugin you can "set and forget" about, with careful configuration and testing it can remove unused css from css/sass/less/stylus files from your production builds. This will reduce page load times, and the time taken to process your CSS.
gatsby-transformer-sharp - Gatsby Plugin Sharp assists with allowing your images to be properly sized, allowing GraphQL nodes to be created from image types that are supported by the Sharp image processing library. This will result in faster page load times, in addition to a lower CLS as it implements lazy loading, meaning your content is less likely to shift.

You can test the results of the implementation of the plugins by monitoring the improvement of your Google PageSpeed score. Using these techniques, we managed to achieve a 99 on Google's PageSpeed score tool, which will be sure to help our SEO from May of 2021 onwards.

Another tool to help you analyse up to 500 pages on your website automatically is a tool we discovered called Experte depicted below. It can help you quickly and easily identify page elements such as videos or in our case images that may be affecting your page speed. Having these quick and easy comparison points between different pages has helped accelerate our optimisation of not only our website but the websites of countless clients.

If you follow this guide, you are guaranteed to see an improvement in your SEO and PageSpeed, and if you are looking to get assistance with your Gatsby JS website, feel free to reach out here. We are a Melbourne based JAMStack agency that focuses on producing groundbreaking Gatsby JS websites.