Scaling Programmatic SEO with a Flexible Headless CMS and Gatsby JS
We migrated our website to the open-source CMS Sanity with Gatsby and Next.js, ensuring zero downtime. This upgrade boosted performance, enhanced programmatic SEO, and increased organic traffic while improving the user experience.
How We Migrated Our Website to Sanity for Scalable Programmatic SEO and Enhanced User Experience
We needed to scale our website to support a robust Programmatic SEO (pSEO) strategy, aiming to launch over 3,000 dynamically generated pages on day one while ensuring strong search rankings, an engaging user experience, and optimized Core Web Vitals scores. However, our existing Webflow site presented significant challenges: limited flexibility made custom design and programmatic changes difficult, scalability issues prevented efficient handling of high page volumes and dynamic content, and restricted plugin support hindered advanced SEO customization, automation, and performance optimization.
Platforms
Web App
Duration
12 weeks
Industry
Marketing Tech
Our approach centered on leveraging a stack designed for adaptability and seamless workflows, using a headless CMS to handle complex content structures with ease.
Sanity CMS for content management
Vercel for cost-effective hosting
Gatsby for static site generation
Next.js for server-side rendering and SEO optimization.
Partnership Goal
Our primary objective was to create a flexible, scalable website capable of supporting rapid Programmatic SEO (pSEO) deployment, allowing us to launch over 3,000 pages instantly while maintaining full control over design and content management. At the same time, our team focused on ensuring high performance, a seamless user experience, and a smooth transition for existing users. By decoupling the headless CMS from the presentation layer, we enhanced security, preventing potential CMS vulnerabilities from affecting the front-end.
We chose Sanity for its unique GROQ query language, which offers the flexibility and simplicity of GraphQL without the need for schema creation. As an open-source CMS, Sanity provides access to a vibrant community and an extensive library of plugins and integrations, giving us more customization options and making it stand out from competitors. This setup not only supported our immediate needs but also ensured we have a scalable, future-proof platform ready for continuous growth and optimization.
Before
- Poor site performance.
- Limited scalability for large page deployments.
- Content migration disrupted traffic.
- Slow load times hurt user experience and SEO.
- Content management required developer support.
- Rigid design made updates challenging.
After
- Lightning-fast page loads with SEO-friendly site structure.
- Instantly launched 3,000+ pages, boosting Programmatic SEO and traffic.
- Seamless migration of 12,000 visitors with zero downtime.
- Sub-second load times enhanced user experience and SEO.
- Non-technical users manage content effortlessly via a headless CMS.
- Full design flexibility enables easy updates and pixel-perfect precision.
- Built for scalability and future growth.
Team Formation
We set out to build our website with Programmatic SEO, aiming to boost visibility, improve search rankings, and ensure seamless scalability as traffic and content grow. In just under 12 weeks, from concept to full deployment, we completely transformed our approach. The first two weeks were focused on defining our goals, crafting the pSEO strategy, and designing the content architecture. Over the next three weeks, we developed responsive, SEO-friendly designs tailored for user engagement and optimized for static site generation. Between Weeks 6-10, we brought the vision to life, using Gatsby Framework to build the frontend and integrating Sanity CMS for an efficient headless CMS content management system. In the final stretch, we rigorously tested performance and successfully migrated our existing content. This project was a true team effort, bringing together our design, development, content, and SEO experts to create a high-performing, scalable website prepared for the future with server-side rendering and SEO optimization using Next.js.
pages launched, driving pSEO and traffic growth
downtime migration moved 12K visitors without traffic loss
uptime on Vercel
Our partnership
We opted for a robust headless CMS architecture, combining Sanity CMS Development for content management and the Gatsby Framework for the frontend, to build a high-performing, scalable website. With Gatsby’s static site generation, our developers rapidly deployed thousands of pages, optimizing performance and supporting our Programmatic SEO strategy. To further boost visibility, we integrated SEO with Next.js, leveraging its server-side rendering and incremental static regeneration features to deliver lightning-fast page loads and SEO-friendly site structures.
Sanity’s open-source CMS capabilities allowed us to programmatically generate content and manage it with ease. Its developer-first approach ensured pixel-perfect design and complete flexibility, enabling our team to tailor every element, from metadata for better SEO to structured content delivery. As our projects grow, this setup handles increasing traffic and content seamlessly, with the CMS scaling independently from the frontend.
We also benefit from the security of a decoupled architecture, keeping the frontend isolated from potential CMS vulnerabilities. Sanity’s scalability supports everything from small blogs to complex web applications within a single studio. By delivering content through APIs, we’ve ensured lightning-fast performance, reduced server strain, and created a future-proof website ready to evolve with our business.
Seamless Migration
We successfully migrated 12,000 monthly visitors with zero downtime, ensuring a seamless transition and uninterrupted user experience throughout the process.
Top Google PageSpeed Metrics
We optimized the website to score high on Google PageSpeed Insights, ensuring fast load times, smooth navigation, and improved Core Web Vitals. This resulted in a superior user experience across desktops, tablets, and smartphones, boosting SEO rankings and overall site performance.
Structured Project Workflow
We created a staging environment for reviewing changes before they go live. The team can test updates, fix issues, and ensure everything works perfectly. With one click, approved changes go live. Even non-technical team members can manage this process efficiently.
Staging Environment for Easy Updates
We set up a staging environment where changes can be reviewed before going live. This allows the team to check updates, fix issues, and ensure everything looks perfect. Once approved, the changes can be pushed to the live website with just a click. Even team members without technical skills can manage this process easily, making website updates faster, safer, and more efficient.
Scalable Content Management with Sanity
Our system supports 3,000+ pages, 300 CDN requests, 966.4 MB of assets, and 30.1k API requests. With 75.5 GB bandwidth and 679 backend documents, it ensures fast, scalable, and reliable content delivery, even under high demand.
What happened next
By transitioning to a Gatsby JS and Sanity-based headless CMS, we delivered a website that far exceeded our expectations. The platform's scalability supports thousands of pages without performance issues, ensuring seamless future growth. With full control over both design and content, the system is adaptable to the evolving needs of the business.
Our team achieved sub-second load times across all pages, significantly boosting both user experience and SEO performance. The flexibility of the system allows non-technical users to easily manage and programmatically generate content, streamlining workflows. The project was completed in under 12 weeks, showcasing our ability to execute complex solutions quickly.
SEO optimization, coupled with high-performance architecture, provides a strong foundation for sustained organic traffic growth. This project exemplifies the power of combining a headless CMS with modern frontend technologies like static site generation and server-side rendering, creating an SEO-friendly, future-ready platform that supports our programmatic SEO strategy for long-term success.
Still curious?
What is Programmatic SEO (pSEO)?
Programmatic SEO is a strategy used to automatically create many pages based on a set of rules or templates, which helps improve search engine rankings. It allows businesses to scale their SEO efforts by generating pages quickly. This strategy can drive more traffic by optimizing large volumes of content in a consistent and efficient manner.
Why did RaftLabs switch to Sanity CMS?
RaftLabs needed a better solution to scale their website for Programmatic SEO. Their previous platform, Webflow, had limitations. By migrating to Sanity CMS Development, RaftLabs could:
Manage content more easily and flexibly.
Launch thousands of pages at once for Programmatic SEO.
Achieve a pixel-perfect design that gave them full control over their website’s appearance.
How did the migration to Sanity affect the website's performance?
The migration to Sanity CMS was smooth with zero downtime, ensuring no disruption to traffic. After the migration, RaftLabs experienced:
Faster page loads through static site generation with the Gatsby Framework.
Improved user experience thanks to better SEO with Next.js.
Better scalability for handling large amounts of content and traffic.
What technology stack did RaftLabs use for their website migration?
RaftLabs used several advanced technologies to build their website:
Sanity CMS: For efficient content management and flexibility.
Gatsby Framework: To generate fast static pages, improving website performance.
Next.js: For server-side rendering and SEO optimization, ensuring fast loading times and SEO-friendly structures.
Vercel: For reliable and cost-effective hosting.
Together, these technologies helped RaftLabs build a website that was both scalable and optimized for SEO.
How many pages were launched after the migration?
RaftLabs successfully launched over 3,000 pages on day one after the migration. By leveraging Programmatic SEO with Sanity CMS, the team could deploy these pages rapidly while maintaining high quality and SEO standards.
Was there any downtime during the migration?
No, the migration process was designed to be seamless. RaftLabs migrated 12,000 visitors with zero downtime, so users didn’t experience any disruptions, and the site continued to perform optimally.
How fast is the new website after migration?
The new website loads in less than one second, thanks to static site generation with Gatsby and server-side rendering with Next.js. This speed improves both the user experience and SEO performance, ensuring that pages are served quickly to visitors and search engines alike.
Who can manage the content on RaftLabs' new website?
With the switch to Sanity CMS, non-technical users can easily manage and update content. The headless CMS structure allows users to control content without relying on developers, empowering teams to make quick updates and adjustments without technical barriers.
What is a Headless CMS and why did RaftLabs use it?
A headless CMS is a content management system that separates the back-end (content storage) from the front-end (how the site looks). This provides:
Flexibility in managing and displaying content.
Scalability, allowing RaftLabs to handle thousands of pages efficiently.
Security, as the front-end is isolated from potential CMS vulnerabilities.
RaftLabs chose this approach to build a website that could easily adapt to future needs while improving performance and scalability.
What are the benefits of using Sanity CMS?
Using Sanity CMS gave RaftLabs several benefits:
Ease of use for content management, allowing anyone (even non-technical users) to update the website.
Customizable design with full control over every aspect, ensuring a pixel-perfect design.
Scalability to handle thousands of pages and content updates seamlessly.
Better SEO with the ability to generate metadata and structured content automatically for better rankings.
What is Static Site Generation (SSG) and how did it help RaftLabs?
Static Site Generation (SSG) is a way of creating web pages ahead of time, instead of making them when someone visits the site. This means the pages are ready to go and don't need to be built while the user is waiting. Here’s how it helped RaftLabs:
Faster Loading: Since the pages are already made and ready, they load much faster, which is better for users and helps with SEO (making the site easier to find on search engines).
Can Handle More Visitors: Static pages can handle a lot of visitors at once without slowing down. This is great for websites with lots of traffic.
Better for SEO: Pre-made pages are easier for search engines like Google to read and rank, helping the website show up higher in search results.
RaftLabs used Gatsby Framework for static site generation, which helped them launch over 3,000 pages instantly, with faster load times and improved Programmatic SEO (a way to create many pages quickly for better search ranking).
Ready to build
something amazing?
With experience in product development across 24+ industries, share your plans,
and let's discuss the way forward.
