Gatsby SEO automation: publish without a pull request per post
AutoSEO delivers finished articles as signed webhook payloads to an endpoint you own, which writes them into whichever data source your Gatsby build already sources from.
Try AutoSEO with GatsbyQuick answer
AutoSEO has no dedicated Gatsby connector; you use the generic Custom webhook. Each finished article is POSTed as HMAC-signed JSON to an endpoint you control, which writes it into whatever your Gatsby site sources from — MDX files in the repo, or a headless CMS — and your existing build publishes it. The research, writing, optimisation, metadata and schema are all handled before the hand-off.
The generic Custom webhook — there is no Gatsby-specific connector in AutoSEO. The article arrives at your endpoint as HMAC-signed JSON (title, slug, HTML body, excerpt, meta fields, canonical, keywords, hero image, structured data, stable external ID). For Gatsby that endpoint usually writes an MDX file into the repo or a record into the headless CMS your gatsby-source plugin already reads, then lets your normal build pick it up.
To be clear about what exists: there is no dedicated Gatsby connector in AutoSEO today. Gatsby is reached through the generic Custom webhook, with an endpoint you run doing the final placement. If a one-click Gatsby install appears later, this page will say so — until then it does not.
Step-by-step setup lives in the webhook integration guide.
Generic SEO advice fails on Gatsby for platform-specific reasons. These are the ones that actually change what you should do.
Gatsby's GraphQL layer means it does not matter much where content physically lives — MDX, a CMS, or a database — as long as a source plugin reads it. That flexibility is why a webhook into your data source is the cleanest hand-off.
On a large Gatsby site, full rebuilds are slow enough that people batch posts rather than publish steadily. Incremental builds and per-post triggers are worth configuring before you increase cadence, not after.
React Helmet or Gatsby Head, a sitemap plugin, a robots plugin, a schema snippet — four sources of truth for one <head>. Consolidating before adding content saves debugging why a canonical is wrong on exactly one template.
Generative engine optimisation is a different job from ranking. An answer engine lifts a passage and decides whether to credit a source — so the questions that matter on Gatsby are whether AI crawlers can read the page, whether you control what they're told, and whether the page carries attribution they can resolve.
The pattern across every platform is the same: content quality is rarely what stops a citation — missing attribution is. Check what an engine can currently see with the free SEO tools, or read the SEO automation overview.
What is Gatsby SEO automation?
How do you improve SEO on Gatsby?
| Manual on Gatsby | AutoSEO | |
|---|---|---|
| Keyword research | Occasional, when someone has time | Scheduled, before every article |
| Writing | In-house hours or a freelancer | AI-drafted, reviewed as much or as little as you want |
| Getting it into Gatsby | Copy, paste, format, fix | Signed delivery to your endpoint |
| Meta, schema, internal links | Remembered sometimes | Applied to every article |
| Refreshing old content | Rarely — nothing prompts it | Decay detection flags it |
| Rank + AI-visibility tracking | — | ✓ |
| Ongoing cost | Writers and tools billed separately | One subscription — see pricing |
Key takeaways
Gatsby generates static HTML at build time using React and GraphQL. Every page your visitors and search engines receive is pre-rendered HTML, not a JavaScript bundle that requires client-side execution to produce content. This single architectural fact is the foundation of every SEO decision you make on Gatsby — and it separates Gatsby from frameworks like Next.js in SSR mode or client-side-only React apps where Googlebot must execute JavaScript to see content.
When Googlebot crawls a Gatsby page, it receives a complete HTML document immediately. There is no render budget to worry about, no hydration delay before content appears in the DOM, and no dependency on JavaScript execution for indexable text. This gives Gatsby a structural SEO advantage that you can still undermine with poor implementation choices.
Gatsby builds pages through three distinct mechanisms, each with different SEO implications:
gatsby-node.js: You call createPage() inside createPages to generate pages from data sources — CMS entries, markdown files, JSON, APIs. These pages share a template component and receive context data. URL structure, canonical tags, and metadata are all defined here at scale.src/pages/: Any React component placed in this directory becomes a page at a predictable URL. src/pages/about.js becomes /about/. Simple, but easy to accidentally create duplicate or unintended routes.src/pages/blog/{mdx.slug}.js, Gatsby auto-generates pages from a data collection without touching gatsby-node.js. URL structure is constrained by the field you reference, so choose your slug fields carefully.The output of every build is a directory of static HTML files, a public/ folder, with each page as either an index.html inside a directory (producing clean URLs like /blog/my-post/) or a flat HTML file. Gatsby defaults to the directory structure, which produces trailing-slash URLs. This matters because /blog/my-post and /blog/my-post/ are technically different URLs. Gatsby's default behavior adds trailing slashes, and your canonical tags, sitemap entries, and internal links must all match this consistently.
Gatsby does not have a built-in routing configuration file like Next.js's next.config.js rewrites. URLs are determined by file location or the path you pass to createPage(). To control URL structure programmatically, you set the path argument in createPage() — this is where you enforce lowercase slugs, remove special characters, and build hierarchical paths like /category/subcategory/post-slug/.
Gatsby's gatsby-config.js exposes a trailingSlash option (introduced in Gatsby 4) with three values: "always", "never", and "ignore". Set this explicitly. Leaving it undefined creates inconsistency between your HTML output and any redirect layer you configure on your CDN or hosting platform.
Gatsby does not inject page metadata automatically. You are responsible for every <title>, <meta name="description">, and canonical tag on every page. The two main approaches are:
Head function from your page component. Gatsby renders this server-side into the document <head>. This is the current recommended approach and produces clean, statically rendered head elements without a third-party dependency.For programmatic pages, pass all metadata fields through the pageContext object in createPage() and consume them in your Head export. Never hardcode titles or descriptions in templates — every page needs unique, data-driven metadata.
Gatsby does not generate a sitemap by default. You add gatsby-plugin-sitemap to your project. This plugin runs during the build and produces an XML sitemap from all pages Gatsby is aware of. Key configuration decisions:
siteUrl field in gatsby-config.js — the plugin uses this to construct absolute URLs. Without it, your sitemap entries will be relative or malformed.excludes option to remove pages that should not be indexed: thank-you pages, preview routes, paginated duplicates, admin paths.query option to pull custom fields like lastmod dates from your GraphQL data layer. Wire this to your CMS's last-modified timestamps for accurate change frequency signals./sitemap/sitemap-index.xml in recent plugin versions — verify this matches what you submit.Gatsby has no built-in structured data system. You inject JSON-LD directly inside your Head export using a <script type="application/ld+json"> tag. Build your schema objects as JavaScript objects in your page templates or in a dedicated utility function, then serialize them with JSON.stringify(). For sites with many content types — articles, products, FAQs, breadcrumbs — create a schema factory function per type and call it with page-specific data from pageContext.
Do not use a generic Gatsby SEO plugin and assume it handles schema correctly for your content type. Most plugins produce only basic WebPage or WebSite schema. Article, Product, BreadcrumbList, and FAQPage schemas require custom implementation tied to your actual data fields.
Gatsby's performance defaults are strong but not automatic. The framework ships with:
gatsby-image. Use the StaticImage and GatsbyImage components for all images. These handle WebP/AVIF conversion, responsive srcsets, lazy loading, and low-quality image placeholders (LQIP) automatically. Using standard <img> tags instead of these components is one of the most common performance mistakes on Gatsby sites.gatsby-plugin-webfonts or self-host fonts and preload them in your Head export to eliminate render-blocking font requests.| Mistake | What Goes Wrong | The Fix |
|---|---|---|
No siteUrl in gatsby-config.js |
Sitemap and canonical tags produce relative or broken URLs | Set siteUrl to your production domain with no trailing slash |
| Inconsistent trailing slashes | Google indexes both versions, splitting link equity | Set trailingSlash: "always" and match it in canonical tags and sitemap |
| Missing canonical tags on paginated pages | Page 2, 3, etc. compete with page 1 for the same query | Add self-referencing canonicals on all paginated pages; do not canonical page 2+ to page 1 unless content is truly duplicate |
Using <img> instead of gatsby-plugin-image |
No WebP, no lazy loading, poor LCP scores | Replace all content images with GatsbyImage or StaticImage |
| Indexing preview or staging routes | Duplicate content indexed from CMS preview URLs | Add preview paths to sitemap excludes and set noindex in the Head export for those routes |
| No robots.txt configuration | Gatsby does not generate robots.txt by default; crawlers have no directives | Use gatsby-plugin-robots-txt and configure it to match your environment — block staging, allow production |
| Hardcoded metadata in templates | Every blog post or product page shares the same title and description | Pass unique metadata through pageContext from your data source |
Gatsby does not create a robots.txt file during a build unless you explicitly configure it. Without this file, search engines crawl everything, including paths you may not want indexed. Install gatsby-plugin-robots-txt and use its env option to serve a disallow-all robots.txt on staging environments and a permissive one on production. This prevents your staging site from being indexed if it is publicly accessible, which is a frequent cause of duplicate content issues on Gatsby projects deployed to preview URLs on Netlify or Vercel.
Gatsby generates a 404.js page in src/pages/ automatically when you create that file. However, whether your hosting platform actually serves this as a true 404 HTTP status code depends on your hosting configuration. On Netlify, add a _redirects file or netlify.toml rule to serve your 404 page with a 404 status. On Vercel, configure vercel.json. A 404 page served with a 200 status code is a soft 404 — Google will eventually deindex it or treat it as low-quality content.
The most effective SEO workflow for a Gatsby site follows five sequential phases: keyword research tied to your data layer, content creation with structured metadata, on-page optimization inside MDX or your CMS, programmatic sitemap and index submission, and rank tracking connected back to your Gatsby build pipeline. Each phase builds on the last, and automating the handoffs between them removes the manual bottlenecks that cause Gatsby sites to rank below their technical potential.
Before writing a single page, map your target keywords directly to the content types your Gatsby site already generates. If your site pulls from Contentful, Sanity, or a local MDX directory, every keyword cluster should correspond to a node type in your GraphQL schema. This prevents orphaned content that ranks for nothing because it was never connected to a real search intent.
Write content with the Gatsby rendering model in mind. Because Gatsby pre-renders HTML at build time, every heading, paragraph, and image alt attribute is part of the static output that crawlers index. There is no client-side rendering delay to hide thin content or missing tags.
On-page SEO in Gatsby happens at the component level. The gatsby-plugin-react-helmet package or the native Gatsby Head API controls all meta tags. Every page component should export a Head function that dynamically populates title, description, canonical URL, Open Graph tags, and structured data from the page's GraphQL query result.
After a Gatsby build completes and deploys to Netlify, Vercel, or your CDN of choice, the sitemap at /sitemap/sitemap-index.xml (the default output of gatsby-plugin-sitemap) should be submitted to Google Search Console and Bing Webmaster Tools immediately. New pages in a Gatsby site are not automatically discovered just because the build succeeded — active submission shortens the gap between publish and index.
Track rankings at the keyword-to-URL level, not just domain-level visibility. For Gatsby sites that generate hundreds or thousands of pages programmatically, a spreadsheet approach breaks down quickly. Connect Google Search Console data to a tracking tool that can surface which programmatically generated pages are gaining or losing impressions, so you can prioritize content updates in your CMS before the next build.
AutoSEO handles every phase of the Gatsby SEO workflow inside a single connected pipeline: keyword research, content brief generation, writing, CMS publishing, sitemap submission, and rank tracking run as a sequence rather than as separate manual tasks. For Gatsby specifically, this matters because the build-and-deploy cycle means any delay in the content pipeline translates directly into delayed indexing.
| Workflow Phase | Manual Gatsby Process | AutoSEO Automation |
|---|---|---|
| Keyword Research | Export from third-party tool, map to content model manually | Pulls search volume and intent data, maps clusters to your existing Gatsby content types automatically |
| Content Brief | Write brief manually from SERP analysis | Generates structured brief with primary keyword, secondary keywords, suggested H2/H3 structure, and target word count |
| Content Writing | Writer drafts, editor revises, SEO reviews | Produces SEO-optimized draft with correct heading hierarchy, meta title, meta description, and alt text recommendations ready for review |
| Publishing to Gatsby | Paste into CMS or MDX file, trigger build manually | Pushes content directly to your connected CMS (Contentful, Sanity, DatoCMS) or commits MDX to your repository, triggering a Gatsby build automatically |
| Index Submission | Submit sitemap in Search Console manually after each deploy | Detects new URLs in the updated sitemap post-build and submits them to Google Search Console via API without manual intervention |
| Rank Tracking | Check rankings in separate tool, compare to previous period manually | Tracks keyword positions at the URL level, surfaces CTR and impression changes, and flags pages that need content updates before the next build cycle |
The connection between AutoSEO and Gatsby's build pipeline is what separates it from general SEO tools. Because Gatsby sites require a build to publish any content change, every hour saved in the research-to-publish phase is an hour gained in indexing time. AutoSEO's direct CMS integration means content moves from approved draft to live static HTML without a manual copy-paste step that typically introduces metadata errors or missing structured data.
For teams running Gatsby with a headless CMS, AutoSEO's publishing integration respects your existing content model fields. It populates the SEO title, meta description, canonical URL, and structured data fields that your Gatsby Head API reads from GraphQL, so the output of every automated publish is already on-page optimized before the build runs.
Gatsby's static site generation produces fully pre-rendered HTML that crawlers can read without executing JavaScript, which gives it a technical SEO advantage over client-side rendered frameworks. Compared to WordPress, Gatsby typically delivers faster Core Web Vitals scores out of the box due to its image optimization pipeline and code splitting. The tradeoff is build time: large Gatsby sites with thousands of pages can have slow build cycles that delay new content from reaching search engines, a problem that Gatsby Cloud's incremental builds partially address.
The most common causes are a stale sitemap cached by your CDN from a previous build, noindex meta tags applied globally by a plugin misconfiguration, canonical tags pointing to a staging domain, or the sitemap including URLs that return a non-200 status. Check the URL Inspection tool in Google Search Console for the specific page to see exactly what Googlebot is reading, then cross-reference with your Gatsby build output to find where the tag is being set incorrectly.
Use the Gatsby Head API to export a Head component from each page template. Inside that component, render a script tag with type application/ld+json containing your JSON-LD object built from the page's GraphQL query data. For a blog post template, the GraphQL query pulls the title, author, publish date, and featured image URL, which you then insert into an Article schema object. This approach scales across every page generated from that template without duplicating code.
By default, gatsby-plugin-sitemap includes every page that Gatsby generates with a public URL. However, it does not automatically exclude pages with noindex meta tags, paginated archive pages, or preview routes. You need to configure the plugin's excludes array to filter out paths you do not want indexed, and you should cross-check the sitemap output against your Search Console coverage report after each major build to confirm no unwanted URLs are being submitted.
The gatsby-plugin-image component automatically generates multiple image sizes, converts images to modern formats like WebP and AVIF, and adds width and height attributes that prevent layout shift. These changes directly improve Largest Contentful Paint and Cumulative Layout Shift scores, both of which are Core Web Vitals metrics that Google uses as ranking signals. The plugin does not generate alt text, so every image still requires a manually written descriptive alt attribute to satisfy both accessibility standards and image search indexing.
Yes. Gatsby's GraphQL data layer pulls content from any headless CMS that has a source plugin, including Contentful, Sanity, DatoCMS, and Prismic. SEO fields like meta title, meta description, canonical URL, and structured data can be defined as dedicated fields in your CMS content model and queried into your Gatsby Head API component at build time. This gives content editors direct control over SEO metadata without requiring code changes, while the Gatsby build ensures all metadata is rendered as static HTML in the final output.
For paginated archive pages generated by Gatsby's createPage API, set a canonical tag on page two and beyond pointing to the first page only if the content is substantially duplicated. If each paginated page contains unique content worth indexing, use self-referencing canonicals and add rel="next" and rel="prev" link tags in the Head component to signal the pagination relationship to crawlers. Avoid blocking paginated pages in robots.txt, as this prevents crawlers from following internal links to deeper content pages that you do want indexed.
Rebuild frequency should match your content publishing cadence. If you publish daily, configure your CMS to trigger an automatic Gatsby build on content publish events using a webhook. If you update content weekly, a scheduled nightly build ensures the sitemap stays current and any metadata changes are reflected in the static HTML. Avoid letting builds go stale for more than a week if you are actively adding or updating content, because crawlers will continue to see the old static HTML until a new build deploys.
AutoSEO has no dedicated Gatsby connector. You use the generic Custom webhook connector: a URL you own + a shared secret, and an endpoint you run does the final placement — that is the accurate description, not a one-click install.
Only what you ask it to. New articles are delivered on the cadence you choose — as drafts for review, or published straight away. Existing pages are audited and surfaced as recommendations first; nothing is rewritten in place until you turn that on.
It depends on the domain, not the platform. An established site with existing authority usually sees movement on long-tail queries within weeks; a new domain in a competitive niche takes considerably longer. Publishing consistently is what compounds — which is the part automation actually fixes.
Plans are per site with volume discounts as you add more, and there is a trial. Current numbers are on the pricing page rather than repeated here, so they cannot go stale.
Yes. AutoSEO is built to sit alongside what you already run rather than take over the page head — on WordPress it writes into your existing SEO plugin's fields instead of adding a competing set of tags, and on every platform it leaves the platform's own SEO settings alone.
No. Gatsby is served by the generic Custom webhook connector rather than a dedicated integration, and we would rather state that than imply a plugin exists.
Wherever your build already sources from. If you use gatsby-source-filesystem, an MDX file in the repo; if you use a headless CMS, a record in it. The payload carries everything either needs.
Works alongside your existing Gatsby setup. See pricing for plans and the trial.
Connect Gatsby