Everything you need to Optimize SEO for your Gatsby Site


I like my tutorials to get straight to the point. If you are a newbie you will find this easy to follow. I will show you everything I did to make my Gatsby site SEO optimised. Please feel free to copy my steps and code. There is no particular order to doing these but just ensure they are done to have a fully optimised SEO Gatsby site for your project or your clients.

Here is everything I do SEO wise for my blog and for each and every one of my clients.

There are 3 simple steps overall:

  1. On Page SEO The first step is to optimise your Gatsby on page SEO by adding unique titles, descriptions, keywords, page images and your twitter username(if you have a twitter account) to every page.

Let's get started just follow these steps without doubt:

Install prop-types In your terminal run: npm install --save prop-types

Install gatsby-plugin-react-helmet and react-helmet In your terminal run: npm install --save gatsby-plugin-react-helmet react-helmet

In your gatsby-config.js file add the following code:

module.exports = { siteMetadata: { title: 'Websites By Mo', description: 'Professional London web design specialising in bespoke website design. React, Gatsby, WordPress CMS, Mobile Friendly & SEO optimised website experts.', keywords: 'web design, web development, react development, gatsby web design, london websites, interactive wev design, bespoke web development', siteUrl: https://www.websitesbymo.com, url: "https://www.websitesbymo.com", titleTemplate: "%s · Websites By Mo", image: "/images/wbm-homepage.jpg", twitterUsername: "@websitesbymo", }, plugins: [ 'gatsby-plugin-react-helmet', ] }

You are storing default values in this file. Replace all the values in siteMetadata with values that are relevant to your project. For titleTemplate, it is important to keep the same structure %s . yourwebsitename. This will give you the following structure for every page which I like: title which you will define uniquely for every page - yourwebsitename. So for example my homepage title on the browser tab would display: Bespoke Web Design & Development - Websites By Mo.

Creating the main SEO Component

In the following folder: src > components - create a new file called head.js and add the following code:

import React from "react" import PropTypes from "prop-types" import { Helmet } from "react-helmet" import { useLocation } from "@reach/router" import { useStaticQuery, graphql } from "gatsby" const HEAD = ({ title, description, keywords, image, article }) => { const { pathname } = useLocation() const { site } = useStaticQuery(query) const { defaultTitle, titleTemplate, defaultDescription, defaultKeywords, siteUrl, defaultImage, twitterUsername, } = site.siteMetadata const head = { title: title || defaultTitle, description: description || defaultDescription, keywords: keywords || defaultKeywords, image: ${siteUrl}${image || defaultImage}, url: ${siteUrl}${pathname}, } return ( {head.url && } {(article ? true : null) && } {head.title && } {head.description && ( )} {head.image && } {twitterUsername && ( )} {head.title && } {head.description && ( )} {head.image && } ) } export default HEAD HEAD.propTypes = { title: PropTypes.string, description: PropTypes.string, keywords: PropTypes.string, image: PropTypes.string, article: PropTypes.bool, } HEAD.defaultProps = { title: null, description: null, keywords: null, image: null, article: false, } const query = graphqlquery HEAD { site { siteMetadata { defaultTitle: title titleTemplate defaultDescription: description defaultKeywords: keywords siteUrl: url defaultImage: image twitterUsername } } }

Adding the component to all Gatsby Pages and Templates

We are going to import the HEAD component that we have created to all our pages and templates. As mentioned above the head.js file is located in src > components Let us assume your folder structure for pages is as follows which is standard:

Pages > index.js

Pages > about.js

Pages > contact.js

Add the following line to all your pages including template pages:

import Head from '../components/head'

Let us use the index.js page to demonstrate where we can call the HEAD function. I place it right at the top where we render the page content.

const IndexPage = () => ( )

Repeat this process for all of your pages and give each and every one of your pages or template page a unique title, description, image and keyword. To check if everything is fine after following all these steps. Open your site on a browser like chrome and go to developer tools to inspect your pages. In between the

tags you should see your title, description, keywords, image and meta content:

meta d

  1. Install gatsby-plugin-canonical-urls In your terminal run: npm install --save gatsby-plugin-canonical-urls

In your gatsby-config.js file add the following inside the plugins open and close tags. Just replace websitesbymo with your domain.

module.exports = { plugins: [ { resolve: gatsby-plugin-canonical-urls, options: { siteUrl: https://www.websitesbymo.com, stripQueryString: true, }, }, ], }

As per the Gatsby doc: "This implementation is primarily helpful for distinguishing between https/http, www/no-www but could possibly be extended to help with when sites add multiple paths to the same page."

  1. Install gatsby-plugin-robots-txt In your terminal run: npm install --save gatsby-plugin-robots-txt

In your gatsby-config.js file add the following inside the plugins open and close tags. Just replace websitesbymo with your domain. You may have noticed i added a link to my sitemap.xml file too. Learn how to add generate a sitemap for your Gatsby website.

{ resolve: 'gatsby-plugin-robots-txt', options: { host: 'https://www.websitesbymo.com', sitemap: 'https://www.websitesbymo.com/sitemap.xml', policy: [{ userAgent: '*', allow: '/' }] }, },

This tells Google that you give permission for the site to be crawled.

Bonus SEO steps A bonus to avoid being penalised by Google for duplication. If you are hosting your site on Netlify you should redirect the preview URL that Netlify generates to your main URL. This can be done in exactly these steps:

You should have a static folder in your root same level as your src folder.

Create a new file in the static folder and call it _redirects.

Just add the following lines of code and save the file:

Redirect default Netlify subdomain to primary domain https://yournetlifydomain.netlify.app/* https://www.websitesbymo.com/:splat 301!

Make sure to replace "yournetlifydomain" with the preview domain generated by Netlify and websitesbymo with your main domain.

You can test if this works by trying to access the Netlify domain it should be redirected immediately to your main domain.

That's it. Now your Gatsby website is SEO optimised and it is down to you to create great content to rank even higher!

If you have any questions get in touch with me on Instagram or Twitter: @websitesbymo

Happy Coding!