Preparing your Gatsby site for production

Gatsby is a wonderful framework for quickly building static sites using React and GraphQL. Here are some things to look out for when you’re ready to put your Gatsby site live.

Metadata fun

It’s not the most fun part of building a website, but good metadata will help your site be found in search engines and will encourage people to share it on social media. It will also help things like Google Assistant and Siri to gather knowledge from your website.

A good way to check what state your basic meta tags are in is by using a tool like metatags.io.

Within Gatsby, you’ll want to use react-helmet to set meta tags.

Specific things to look out for:

• Make sure each page has distinct titles and descriptions
• Add a social media image (og:image and twitter:image properties)
• Set canonical URLs for any pages that can be accessed via multiple URLs, to tell search engines which URL is the main access point for a specific bit of content

Console log no more

A good clean up exercise is to check if there are any console.log() statements left in your code. These might introduce bugs, and could slow down render performance if you’re logging large…