Wednesday, May 18, 2022
10 Must-Have Gatsby Plugins for Sanity
Your marketing team just published a new case study in Sanity. Now they're waiting on a developer to push it live. Sound familiar?
The gap between content creation and content deployment is where B2B marketing momentum goes to die. But it doesn't have to be this way. The right Gatsby plugin stack transforms your Sanity CMS from a content repository into a true self-service platform—one where marketers publish, optimize, and iterate without touching code or opening developer tickets.
This guide covers the 10 essential plugins that bridge that gap. Each addresses a specific bottleneck: content sourcing, image performance, SEO automation, analytics integration, and privacy compliance. Together, they create the foundation for marketing autonomy—where campaign launches happen in minutes, not sprint cycles.
1. gatsby-source-sanity: The Foundation
Every Gatsby-Sanity integration starts with gatsby-source-sanity. This official plugin developed by Sanity.io creates the bridge between your CMS content and Gatsby's build process.
What it does: The plugin automatically introspects Sanity's GraphQL schema and generates matching types in Gatsby. When your marketing team creates new content types in Sanity Studio, those types become queryable immediately without developer involvement.
Key configuration options:
watchMode: trueenables real-time content updates during development by listening to Sanity's real-time API for instant changesoverlayDrafts: trueallows preview of unpublished content on staging sites by overlaying draft content over published content in Gatsby's GraphQL layer- Environment-specific tokens configured via environment variables provide separate access levels: read tokens for draft access in preview environments and published-only access in production
Marketing impact: Content updates in Sanity trigger automatic site rebuilds through webhooks. When your marketing team publishes new case studies, product pages, or blog posts in Sanity Studio, these changes trigger a Gatsby rebuild that deploys the updated content to your website within minutes, without requiring a developer to manually push code.
2. gatsby-plugin-image: Optimized Visual Content
Images often represent the largest performance bottleneck on marketing websites. gatsby-plugin-image solves this through automatic optimization that directly improves Core Web Vitals.
What it does: The plugin automatically converts images to modern formats (WebP and AVIF), generates responsive srcsets, creates placeholders to prevent layout shift, and implements lazy loading for offscreen images.
Key configuration options:
- Automatic WebP and AVIF format conversion reduces file sizes by 25-35%
- Built-in lazy loading defers offscreen images
- Placeholder generation prevents layout shift during loading
- Responsive srcset creation serves appropriate sizes across devices
Marketing impact: Addresses all three Core Web Vitals metrics—LCP improves through smaller file sizes, CLS is prevented through automatic dimension calculation, and INP improves as lazy loading reduces initial JavaScript payload. These performance gains translate directly into better search rankings and improved user engagement.
Note: The older gatsby-image plugin is officially deprecated. Teams still using it should migrate to gatsby-plugin-image for continued security updates and bug fixes.
3. gatsby-plugin-sitemap: Automated Search Discovery
Search engines need current information about your site's content structure. gatsby-plugin-sitemap generates XML sitemaps automatically by querying Gatsby's GraphQL data layer to fetch Sanity content.
What it does: The plugin maps Sanity content slugs and modification dates to sitemap URLs through configured serialization functions. Sitemaps regenerate with every build, automatically including newly published content without requiring manual edits.
Key configuration options:
- Custom serialization functions to map Sanity content slugs to URLs
- Automatic inclusion of
_updatedAtfields from Sanity content for last-modified dates - Build-time regeneration ensures sitemaps always reflect current content
Marketing impact: Search engines always have accurate information about content freshness. According to the official Gatsby sitemap documentation, this is critical for B2B sites with frequently updated blogs, case studies, and product documentation.
4. gatsby-plugin-robots-txt: Crawler Control
B2B SaaS sites need to distinguish between staging/preview deployments and production marketing environments. gatsby-plugin-robots-txt provides environment-specific robots.txt generation that protects sensitive application routes while allowing public marketing content to be indexed.
What it does: The plugin generates different robots.txt files based on your environment, blocking crawlers from admin, dashboard, login, and preview pages while allowing access to customer-facing content.
Key configuration options:
- Development environments block all crawlers using the
disallow: ['/']directive - Production environments use:
disallow: ['/admin', '/dashboard', '/login', '/preview'] - Environment-specific policies configured through build-time environment variables
Marketing impact: Only production marketing content (blogs, case studies, product pages) appears in search results. Draft content created in Sanity's preview mode and unpublished changes are protected from appearing in search results before publication.
5. gatsby-plugin-react-helmet: Dynamic Meta Management
Page-level SEO shouldn't require developer involvement. gatsby-plugin-react-helmet manages document head elements including title tags, meta descriptions, and Open Graph tags for React applications.
What it does: The plugin enables dynamic SEO metadata that pulls directly from CMS content fields, allowing marketing teams to control page-level SEO without touching code.
Key configuration options:
- Title tags with Sanity schema validation at 60 characters
- Meta descriptions with validation at 160 characters
- Open Graph and Twitter Card tags that update alongside page content
- Dynamic metadata pulled from Sanity content fields
Marketing impact: Sanity schema validation enforces best practices automatically. Your marketing team gets real-time feedback on SEO fields without needing SEO expertise, and social shares always display correctly.
6. @portabletext/react: Rich Text Rendering
Sanity stores rich text content as Portable Text, a JSON-based format that requires specific rendering. @portabletext/react is the officially recommended solution by Sanity for converting this format into React components.
What it does: The library renders basic text blocks and supports custom components for marketing-specific needs like embedded CTAs, inline testimonials, and product references.
Key configuration options:
- Custom block types for call-to-action blocks within blog posts
- Specialized annotation components for inline testimonials
- Custom inline annotations and cross-reference fields for product references
- Use _raw field prefixes (like _rawBody) when querying through GraphQL
Marketing impact: Marketing teams can embed rich, interactive content within blog posts and pages without leaving Sanity's content editor—reference products, display testimonials, and add CTAs all managed as structured content.
7. gatsby-plugin-manifest: PWA Foundation
Progressive Web App functionality requires a web app manifest file. gatsby-plugin-manifest creates this file and automatically generates icons across multiple sizes for home screen installation.
What it does: The plugin provides metadata for PWA functionality including app names, theme colors, display modes, and automatically generates favicons and icons from a source image.
Key configuration options:
- App name and short name for home screen display
- Theme and background colors for branding consistency
- Start URL and display mode settings (standalone, fullscreen)
- Automatic favicon generation from source image
- Cache busting mode for icon updates
Marketing impact: Users can install your marketing site as an app on their devices, increasing engagement and providing a native-like experience for returning visitors.
8. gatsby-plugin-offline: Service Worker Caching
Repeat visitors should experience faster load times. gatsby-plugin-offline implements service worker functionality using Workbox Build to cache site resources.
What it does: The plugin caches JavaScript, CSS, images, and JSON data files. Cached resources serve immediately while fresh content loads in the background using runtime caching strategies.
Key configuration options:
- Must be listed after gatsby-plugin-manifest in gatsby-config.js
- Precache manifest includes all static assets
- Runtime caching strategies for dynamic content
- Workbox Build configuration for custom caching rules
Marketing impact: Repeat visitors experience significantly faster load times. Cached resources serve immediately, improving user experience and engagement metrics for returning users.
9. gatsby-plugin-google-gtag: Analytics Integration
Standard analytics scripts miss pageviews when users navigate between pages without full page reloads. gatsby-plugin-google-gtag integrates Google Analytics 4 with Gatsby's single-page application architecture.
What it does: The plugin handles client-side navigation tracking automatically, capturing all pageviews and providing components for tracking external link clicks.
Key configuration options:
- Automatic pageview tracking for SPA behavior
- OutboundLink component for external link click tracking
- Path exclusion to filter internal traffic from marketing data
- IP anonymization and Do Not Track support for privacy compliance
Marketing impact: Complete visibility into user behavior across your marketing site—no missed pageviews, accurate path analysis, and enterprise-ready privacy controls.
Note: gatsby-plugin-segment-js enables data routing to over 300 marketing tools through Segment for complex enterprise marketing technology stacks.
10. gatsby-plugin-gdpr-cookies: Consent Management
Enterprise B2B sites must meet privacy requirements without sacrificing marketing measurement. gatsby-plugin-gdpr-cookies manages analytics script loading based on user consent cookies.
What it does: The plugin prevents data transmission before consent is obtained, supporting compliance with GDPR and similar privacy regulations through consent-first loading patterns.
Key configuration options:
- Google Analytics consent management
- Facebook Pixel consent management
- TikTok Pixel consent management
- Hotjar consent management
- Cookie-based consent state persistence
Marketing impact: Full privacy compliance without sacrificing measurement capabilities. Analytics only fire after explicit user consent, protecting your organization from regulatory risk while maintaining marketing data collection for consenting users.
Implementation Best Practices
Installing plugins is only the first step. How you configure and deploy them determines whether your Gatsby-Sanity integration runs smoothly or creates ongoing maintenance headaches. These three practices address the most common implementation pitfalls.
Environment Separation
Use different Sanity tokens for production (published content only) versus preview (drafts enabled). Configure robots.txt to prevent search engine indexing of preview environments. Never commit tokens to version control; use environment variables instead.
Build Optimization
According to Gatsby's documentation, incremental builds optimize deployment times by rebuilding only pages affected by content changes, rather than regenerating the entire site. Cache both .cache and public directories between builds in your CI/CD pipeline for measurable performance gains.
Schema Change Management
After modifying your Sanity schema, deploy Sanity's GraphQL API to ensure Gatsby's introspection reflects current content types. This step is often overlooked but prevents build failures when content teams add new fields or document types.
Migration Considerations for 2025-2026
The Gatsby-Sanity ecosystem remains stable, but teams should address several requirements:
- Gatsby 5 compatibility: Migration from v4 to v5 requires Node.js 18 or higher, React 18 or higher, and GraphQL schema changes may require query updates.
- Sanity Studio v5: The December 2025 upgrade to React 19.2 requires compatibility verification with existing Gatsby integrations, as documented in the Sanity changelog.
- Image plugin migration: Any remaining gatsby-image implementations should migrate to gatsby-plugin-image immediately.
Building for Marketing Autonomy
The plugin stack outlined here serves a specific goal: enabling marketing team autonomy for routine content updates. Content updates, SEO changes, new page types and campaign tracking should all happen without code deployments.
When configured correctly, this combination enables marketing teams to execute sophisticated campaigns independently. Case study updates go live in minutes. Landing pages launch without developer queues. According to Gatsby's documentation, A/B tests can be configured through branch-based testing with analytics tracking rather than requiring code changes.
That said, the Gatsby ecosystem continues to support production workloads, though the framework is shifting toward maintenance mode rather than active feature development. Teams planning new projects should monitor the broader framework trajectory alongside alternatives like Next.js, particularly considering Gatsby's reduced new feature announcements and focus on stability over innovation.
Whether you're optimizing an existing Gatsby-Sanity site or evaluating the right architecture for a new project, the underlying goal remains the same: eliminating the bottlenecks that slow down your marketing team.
Ready to make that happen? Talk to Webstacks about implementing composable architecture built on MACH principles that gives your marketing team the autonomy they need while maintaining enterprise-grade performance.
