SEO in Gatsby

Overview

Search engine optimization (SEO) is available in Gatsby because Gatsby sites are rendered on the server side. This makes them available for crawling by Google and other search engines. Sites created by Gatsby get excellent rankings on search engines for their speed and for being static.

How to improve SEO

To increase our ranking further, we can take a few actions. This includes using meta tags and keywords, a robot.txt file, and site mapping.

The SEO component

To avoid code repetition and make the flow easier, we can create a single reusable SEO component that we can then import into our page components.

Note: These are already done for some starters, including the gatsby-starter-default, which is why we can see this in our Lark project.

This SEO component handles setting the titles of our site and pages, meta keywords, description, and HTML attributes. Some of these values pass down as prop while some are received from our siteMetadata defined in the gatsby-config.js file.

React Helmet

We can set these attributes above because of React Helmet. In Gatsby, we use this together with gatsby-plugin-react-helmet.