A Technical Guide to SEO With Gatsby.js

Let’s learn together how give your website a head start with Google

Mariequittelier
Jun 18, 2020 · 7 min read

Most of the articles I read about why you should use Gatsby.js have one common point: SEO. Why? Websites created with Gatsby.js get good rankings on Google because they are fast and static. By virtue of being static, Google crawlers are able to access their data. They are part of the JAMSTACK (Javascript, API, Markdown) team:

Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.

From the JAMSTACK Website

Image for post
Image for post
Photo by Merakist on Unsplashed

🏛️ Let’s start with the basics!

But, what’s SEO? SEO means Search Engine Optimization. The goal of SEO is to understand what Google and other search engines are looking for. Once you understand this, you can make the better of it to make sure people find your website.

Image for post
Image for post
from https://moz.com/beginners-guide-to-seo

How does it work? Trying to figure out SEO, I found out this Mozlow’s pyramid for SEO. I found the idea brilliant, and could not help but to share it. Like in the Mozlow pyramid, you have to fulfill the most basic needs before you go to the most advanced one.

But what does it means for your website with Gatsby.js? I’m going to talk only about technics. Your content is a big part of what will make you rank better. But that’s a talk for another.

🏊‍♀ ️Crawl accessibility

Let’s start at the bottom of the pyramid with the crawl accessibility. What is it? It all comes down to how a search engine will work. First, they will crawl the web. Meaning, their team of robots (or crawlers) will go around from link to link to find new and updated content. Then, they will store and organized it. It’s called indexing. In the end, they will rank every link to be sure to provide the best answer to every search.

It’s pretty easy to find out if your website is indexed. Go to google, and search it with its address. Find it? It’s indexed. Otherwise, that’s how you can index it with Gatsby.js:

🧬 Compelling content

Let’s talk about content. You could say that your content has nothing to do with Gatsby.js. It’s true, but it’s also false. If you are using Netlify, you might end up deploying many versions of your website. Preview versions might be deployed on each pull-request. One of those versions might end up behind found by Google. And that’s how your website gets sanctioned for “duplicate content”.

To make sure Google will crawl your site in the way you want it to. You should add a Robots.txt file:

Greg Berge shared here a useful configuration to avoid netlify’s preview versions. For non-french speakers, it’s here:

💬 Keyword optimized

Now that you show up in the search result, your keywords will help you show up in the people’s research you targetted. You can check this resource to know how to pick those keywords. Do you have them? Good! But, where to put them? In your content for sure! But don’t forget the head of your document!

Every HTML page has two main parts: a head and a body. The head part contains all the document information such as its title, keywords,…. Using the Gatsby-plugin-react-helmet plugin allows you to access the head of your document. But you can also change its value.

React Helmet is a component which lets you control your document head using their React component.

With this plugin, attributes you add in their component, e.g. title, meta attributes, etc. will get added to the static HTML pages Gatsby builds.

From the gatsby doc

Most of Gatsby starters give you an SEO component. This SEO component uses the react helmet plugging. It will provide different metadata to your website. You’ll have to have the SEO component on each page. It’s designed in a way that you are either going to give the component its own props or use the default properties set. It’s a great example of how to use react helmet:

📈 Great user experience: performance

SEO is not only keywords and content. It’s also how your website is. So, the better it is, the better your SEO is. That’s where a static website has a strong advantage compared to the others. But, how to make sure you do better than the average gatsby website? Improve your performance. I guess there is no need to explain that performance is key in user experience. Who can tell me that he has never closed a page because it took too long to load? Yep, nobody! Especially not Google:

In July 2018, Google announced a new ranking factor for site speed, calling the algorithm update the “Speed Update”. Google will possibly rank pages higher in the search results for faster loading times, however, the intent of the search query is still very relevant and a slower page can rank higher if the content is more relevant.

From the Gatsby doc

Here are a few plugins to improve your website performance:

The objectify of this plugin is to make your website more resistant to bad networks.

It creates a service worker for the site and loads the service worker into the client.

Do you want to reduce the time to first meaningful paint? Here’s a plugin allowing you to render something before the fonts finish to load:

CSS can be a bit tricky sometimes. It’s cascading meaning that sometimes your styles are going to conflict, and you might not notice. So, here is a tool to purge your useless CSS:

Do you want to know more about improving your website performance? You can always check this article.

If you have any suggestions on how to improve your SEO with Gatsby.js, please feel free to let me know!

🕵️‍♂️ To go further:

Frontend Digest

Anything and everything frontend. JavaScript, CSS and HTML.

Sign up for Highlights

By Frontend Digest

The latest and greatest in frontend development Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Mariequittelier

Written by

I’m a junior web developer 💻 using Javascript, React, Gatsbyjs & ReactNative. I also have interests in photography 📷 , travelling 🗺️ and the environment 🌎

Frontend Digest

Anything and everything frontend. JavaScript, CSS and HTML.

Mariequittelier

Written by

I’m a junior web developer 💻 using Javascript, React, Gatsbyjs & ReactNative. I also have interests in photography 📷 , travelling 🗺️ and the environment 🌎

Frontend Digest

Anything and everything frontend. JavaScript, CSS and HTML.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store