Gatsby SEO

Gatsby SEO is the practice of configuring a Gatsby site so search engines can crawl, index, and display its pages effectively, usually through metadata, canonical URLs, sitemaps, robots rules, and performance-focused rendering.

Beginner3 min readUpdated 2026-07-26Reviewed by Lucía Marín

Key takeaways

Gatsby SEO focuses on per-page metadata, sitemaps, and robots.txt.
Use gatsby-plugin-react-helmet for dynamic head tags.
Generate sitemap.xml and robots.txt with dedicated plugins.
Avoid duplicate titles, stray pages, and trailing-slash inconsistencies.

Gatsby generates fast static pages, but search engines still need clear signals to understand your content.

Example

A blog built with Gatsby uses gatsby-plugin-react-helmet to set a unique <title> and <meta name="description"> on each post. The site also generates a sitemap.xml via gatsby-plugin-sitemap and a robots.txt via gatsby-plugin-robots-txt. When a search engine crawls the site, it finds the correct metadata for every page and can discover all URLs through the sitemap.

When should I use this?

Use Gatsby SEO whenever you build a site with Gatsby that needs organic search traffic. It is especially important for:

Content-heavy sites (blogs, documentation, news)
Marketing or landing pages
E-commerce stores (with proper product metadata)
Any site where you control the code and can configure plugins

What it is not

Not a substitute for content quality or keyword research.
Not automatic — you must configure plugins and write per-page metadata.
Not limited to Gatsby — similar principles apply to other static site generators.
Not a guarantee of rankings — it only helps search engines understand your site.

Quick start

Install gatsby-plugin-react-helmet and react-helmet.
Create an SEO component that accepts title, description, and canonical props.
Add siteMetadata in gatsby-config.js with default values.
Install gatsby-plugin-sitemap and configure it in gatsby-config.js.
Install gatsby-plugin-robots-txt and set rules (e.g., allow all, disallow admin paths).
On each page, use the SEO component with unique metadata.
Build the site and verify sitemap.xml and robots.txt exist in the output.

Common mistakes

Using the same title tag or meta description across many pages instead of page-specific metadata.
Forgetting to generate or verify sitemap.xml and robots.txt after build.
Publishing unwanted generated pages or archive paths that should be excluded from indexing.
Allowing inconsistent trailing slashes or mixed URL formats across links and canonical tags.

Next step

What Is a SitemapLearn how to generate and verify your Gatsby sitemap.

FAQ

What is Gatsby SEO?

Gatsby SEO refers to the techniques and configurations used to ensure a Gatsby-built website is properly crawled, indexed, and ranked by search engines. This includes setting metadata, generating sitemaps, and optimizing performance.

How do I add meta tags in Gatsby?

Use gatsby-plugin-react-helmet to manage head tags per page. Define a reusable SEO component that accepts props for title, description, and canonical URL.

Does Gatsby automatically generate a sitemap?

No, you need to install and configure gatsby-plugin-sitemap in gatsby-config.js to generate sitemap.xml during build.

Sources

Gatsby SEO and social sharing cards tutorial — Primary Gatsby documentation covering canonical URLs, page metadata, and SEO component patterns.
Gatsby SEO guide — Explains practical Gatsby SEO implementation, including metadata, React Helmet, sitemap, and robots.txt plugins.
Technical SEO overview — Clear definition of technical SEO as the optimization of technical aspects that affect crawling and indexing.
Gatsby SEO mistakes article — Useful for common Gatsby-specific SEO pitfalls like stray pages and trailing-slash inconsistencies.

Reviewed by Lucía Marín, Founding editor.