SEO·AEO·GEO
PricingSign inAudit

SEO by platform · Updated

Gatsby SEO: Head API, sitemaps and static HTML

Gatsby builds every page to static HTML at build time, so crawlers get full content. Use the Gatsby Head API for titles and meta tags, a sitemap plugin, and Gatsby's image component for fast, stable layouts.

Aalhad, Founder, SEO·AEO·GEO

Founder, SEO·AEO·GEO

Builds SEO·AEO·GEO and writes the crawler, schema, and citation research published here.

How Gatsby serves pages to crawlers

Gatsby pre-renders pages to HTML during the build (static site generation), with optional deferred or server rendering. The HTML includes the page content; React then hydrates it in the browser.

export const Head = ({ data }) => (
  <>
    <title>{data.post.seoTitle}</title>
    <meta name="description" content={data.post.description} />
    <link rel="canonical" href={`https://example.com${data.post.path}`} />
  </>
)

The Head API replaces react-helmet for most sites and renders tags into the static HTML.

Checklist

  • Add gatsby-plugin-sitemap and set siteUrl in gatsby-config.
  • Add a robots.txt (a plugin or a file in /static).
  • Query content at build time with GraphQL so it's in the HTML; avoid fetching it only in the browser.
  • Use gatsby-plugin-image for responsive images with dimensions.
  • Create a 404 page; Gatsby serves it with a 404 status on most hosts.
  • Output JSON-LD in the Head export.
  • Check robots.txt allows the AI search crawlers you want: OAI-SearchBot (ChatGPT search), Claude-SearchBot, PerplexityBot. See the AI crawler list and the robots.txt generator.
  • Check your host's or CDN's bot protection doesn't block them even when robots.txt allows them.
  • Make sure the main text is in the HTML the server sends. AI crawlers don't run JavaScript.
  • Avoid nosnippet and tiny max-snippet values on pages you want quoted; they also keep pages out of Google's AI Overviews.

Check it on your own site

What the free audit tests for this

  • Raw HTML visibility
  • Title tag
  • sitemap.xml
  • Image formats

One URL, about 20 seconds, no login. You get the result of every check and the exact fix for the top three issues.

Audit your website free

FAQ

Is Gatsby good for SEO?+

Yes. Pages are static HTML built ahead of time, which is ideal for crawlers, and the Head API handles metadata.

Do I still need react-helmet with Gatsby?+

No. The Gatsby Head API is the built-in way to add titles and meta tags.

Sources

  1. Gatsby Head API — Gatsby Docs
  2. Understand JavaScript SEO basics — Google Search Central