Gatsby SEO Checklist
SEO checklist for Gatsby sites. Covers static generation, GraphQL-powered SEO, plugin configuration, and performance optimization in the Gatsby framework.
What is the SEO checklist for Gatsby?
The Gatsby SEO checklist covers 18 essential tasks across Technical SEO, On-Page SEO, Content, and Performance categories. Key items include configuring XML sitemaps, optimizing meta tags, improving page speed, and setting up structured data. SEO checklist for Gatsby sites. Covers static generation, GraphQL-powered SEO, plugin configuration, and performance optimization in the Gatsby framework.
Technical SEO
Leverage Gatsby's static generation
Gatsby pre-renders all pages as static HTML by default. Ensure all SEO-critical content is included in the build.
Generate XML sitemaps with gatsby-plugin-sitemap
Install and configure gatsby-plugin-sitemap. Customize to exclude utility pages and set priorities.
Create robots.txt with gatsby-plugin-robots-txt
Install gatsby-plugin-robots-txt. Configure allow/disallow rules and point to your sitemap.
Set canonical URLs on all pages
Add canonical link tags in your SEO component. Handle trailing slashes consistently with gatsby-plugin-trailing-slash.
Configure redirects in gatsby-node.js
Use createRedirect in gatsby-node.js for 301 redirects. Also configure hosting-level redirects on your platform.
On-Page SEO
Build a reusable SEO component with Gatsby Head API
Create a SEO component using Gatsby's Head API export. Set title, description, Open Graph, and Twitter tags.
Use proper heading hierarchy in page templates
Ensure each page has exactly one H1 and uses H2-H6 in proper order. Query headings from your CMS via GraphQL.
Optimize images with gatsby-plugin-image
Use GatsbyImage and StaticImage components for automatic responsive images, lazy loading, and format optimization.
Add alt text to all images
Provide alt text in your CMS and pass it through GraphQL queries to GatsbyImage components.
Implement Open Graph images
Generate or set OG images per page. Use gatsby-plugin-image to create properly sized social sharing images.
Content
Add JSON-LD structured data
Add schema markup in your Head API export. Use GraphQL data to populate dynamic structured data fields.
Use a headless CMS for content
Connect Contentful, Sanity, or Strapi via source plugins. Use GraphQL to query and render content.
Create programmatic pages from data
Use createPages in gatsby-node.js to generate SEO pages from CMS data, APIs, or local files.
Build internal linking with Gatsby Link
Use the Gatsby Link component for internal links (enables prefetching). Add related content sections.
Performance
Audit bundle size with gatsby-plugin-webpack-bundle-analyser
Identify large dependencies inflating your bundle. Remove or replace heavy libraries.
Configure caching on your hosting platform
Set long cache times for hashed static assets. Use stale-while-revalidate for HTML pages.
Minimize third-party scripts with gatsby-plugin-google-gtag
Use Gatsby plugins instead of raw script tags for analytics. Plugins handle async loading and performance.
Prefetch critical resources
Gatsby prefetches linked pages automatically. Ensure critical fonts and above-fold images are preloaded.
Optimize Your Gatsby Site
Use our free SEO tools to generate meta tags, schema markup, and robots.txt for your Gatsby site.