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 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:
At Ten Squared, 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:
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:
We utilise the following plugins to best assist with this:
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.
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.