Headless CMS and SEO: will it wreck your organic traffic?.

*Rewinds tape*.

You might be wondering why switching to a headless CMS resulted in a faster loading site and  better SEO for the folks over at Cashback Hero.

Or how it helped Josh Pitzals, co-founder of ChirrApp, go from hard-coding content, “which is a pain, and really cumbersome to update,” to scaling content creation with ease.

These are just some of the many, many benefits a headless CMS can have on your SEO, but moving to a headless CMS means setting up your SEO foundations from zero, and that's kind of scary.

If you're used to using plugins like RankMath or Yoast you've probably taken certain SEO features for granted, like having an xml sitemap or being able to edit your pages' metadata.

When you go headless you need to build these elements from the ground up, and not investing in a web development team who also understands marketing can mean you end up with a site that performs well, but isn't accessible to Google.

You...probably don't want that.

So let's make sure you get the best of all headless has to offer.

By the end of this post you'll:

• Understand how a headless CMS differs from a monolithic CMS (like Wordpress)
• Have a clear understanding of the benefits and drawbacks a headless CMS can have on your SEO
• Nail technical SEO best practices for a headless setup

Get all your ducks in a row for a successful migration 💪

And if we fail to deliver any of the above, feel free to angry tweet us right here.

Primer: what is a headless CMS?

A headless CMS is a content management system (CMS) that separates where content is stored (the "body") from where it's presented (the "head"). In basic terms, it separates what users see on the screen (the front-end) with the nitty-gritty technical layer beneath.

The simplest way to think of a headless CMS is by first thinking of a traditional CMS like Wordpress.

Wordpress does more than just manage your content, right? It also has the website frontend where the content is displayed. Without getting too into the weeds it’s also tightly bound to all the technical infrastructure - DB, Php, hosting, etc. This is where the performance and scaling issues come in.

Okay, so how is a headless CMS different?

Well, a headless CMS is the concept of splitting apart the content management experience your team interacts with and the website customers see. This means your content loads faster, is more secure, and is able to benefit from omnichannel publishing.

The beauty of a headless CMS is how it makes content management simple, scalable, and collaboration-friendly for your marketing team.

In the old days, when you wanted to create new content, like a new landing page, you'd have to do something really zany like:

• Hop over to Miro
• Take screenshots of the various content blocks your designer has made in the past
• Add the new copy in comments or on a Google doc
• Get your designers involved to make it look cohesive
• Send it off to your developers

And bam!

In 2-3 weeks you have your landing page...

🫠

But a headless CMS uses an approach called "structured content" to build out content assets like web pages and blogs etc. Content, like a landing page or blog, is broken down into its smallest components (text blocks, images, buttons etc.), like building blocks. Think of them as lego bricks that you stack together in whatever shape you want: from a simple house to the Death-Star.

With this approach, you simply open your content editor, search your content block library (like hero sections, text + image blocks, calls-to-action, etc.) and edit the copy as needed while live previewing all the changes you're making.

You don't even have to worry about wrecking the design because the blocks have certain design "guardrails" in place so you can't accidentally mess up margins or other important design features.

When thinking about this approach to content creation, "you need to stop thinking about pages and start thinking about components," advises Lidia Infante, Senior SEO Manager over at Sanity.

"For this, I recommend you get familiar with structured content and how to do content modelling. This can be a little hard to grasp, speaking from experience, but it's completely worth it. Getting familiar with these concepts can really help SEOs and content creators understand how a headless CMS frees up your content for scalability, promotes brand consistency, and increases the reach of the brand across channels."

There are a ton of benefits to using this structured content approach, but we'll try to contain our excitement and limit ourselves to its main SEO benefit: search engines are better able to understand exactly what your content is about. That's because structured content makes the connections between someone's search query and your content explicit and visible.

The more information search engines have about what your content is actually about, the more likely they are to know how well your content satisfies a search query.

Content Modelling, Development & SEO

As we mentioned way back in the introduction, the biggest thing to wrap your head around when it comes to headless CMS and SEO is understanding that your SEO foundations need to be built from the ground up.

Thanks to plugins, you've probably grown used to things like having meta description editors, social sharing cards etc, but when you go headless all of these assets and where they fit into different types of content need to be built and designed: this is where content modelling comes into play.

"Content modelling is the process of defining the types of content you need, the attributes of each one, and the relationships between them.

There’s a lot of content in your ecosystem: blog posts, web pages, products, white papers, videos, and images, to name a few examples. Content modelling enables you to assemble those disparate pieces of content into a centralised structure." -Carrie Hane, Head of Content Strategy at Sanity

This concept of content modelling directly impacts your on-page SEO.

Let's say we want to model what components will make up a standard webpage. Apart from needing things like a hero section, calls-to-action, buttons, FAQ accordion, etc. we'll also want to make sure all the right SEO fields are in place to be able to optimise our on-page SEO.

It's crucial to include your SEO team in this process to define what important fields you'll need such as:

• Title tag editor
• Meta description editor
• Canonical tag
• ALT tag editor for images
• URL slug editor

But there’s much more to your SEO than that, right?

You also need to make sure your technical SEO foundations are solid and this is taken care of in the development stage of your build.

Technical SEO foundations created during development stage:

You might feel dizzy looking at that list, but any good development agency will have these assets ready to go for any website build they take on. Just make sure you ask about what technical SEO foundations they’ll be setting up on your site and, as always, include your SEO team in those discussions.

Headless CMS: The Pros for SEO

You still with us?

We know this can be a little overwhelming, but stick with it and we promise it'll be worth it.

When thinking about the benefits of a headless CMS, it's important to remember one thing: "Wordpress was originally built to be a blogging platform. Nothing else," highlights Dan Malone,founder of Mawla, "and now we've Frankensteined it into something that's trying to keep up with the demands of a modern, scaling marketing website. It just can't keep up because it was never supposed to do that. Look no further than Gutenberg. Most people don't use the first party approach to custom fields and visual editing and build their solution on third party plugins like Advanced custom fields, or elementor.”

In contrast, headless CMS has literally been designed for scaling websites which need the ultimate flexibility possible. In the world of MVPs and agile development this is a crucial functionality for any SaaS startup.

With that said, here are some of the concrete benefits a headless CMS will have on your SEO.

Faster than Monolithic CMS

“The response to the site has been incredibly positive and we have had some great results. We saw a 713% increase in new visitors, page views were up 594% and overall site speed had increased by 87% compared to our previous website.” - Jonny McCauly, Head of Design, Fresco.

We were able to jack up Fresco’s site speed by 87% thanks to implementing a headless solution and building their site on a JAMstack architecture.

It's no secret that page loading speed is a ranking factor on search as search engines want to deliver the best possible results to users (and who wants to wait around for a page to load when the ‘back’ button is right there?).

Not only this, but page speed has an enormous impact on your conversion rate. A site that loads in 1 second has a conversion rate 3x higher than a site that loads in 5 seconds.

And if a monolithic CMS and a headless CMS were in a sprint, the monolithic CMS would be eating dust every time.

In a monolithic CMS, every time a user wants to access a webpage this is what happens in the server:

1. Server queries the database for the right content
2. Identifies the template the content will fit into
3. Generates the page
4. Serves the page to the user

You can probably get a feel for how many seconds that might add to a page's load time.

A headless CMS, however, pairs with a Static Site Generator (SSG) to reduce these requests on the server. The SSG allows developers to use templates and automatically generate webpages, but they create these webpages in advance, not in response to a user request, so it loads faster.

It's a bit like going to McDonald's versus a restaurant. In a restaurant, the chef won't start cooking your meal until you order it so you have to wait. In McDonald's you show up, ask for a cheeseburger, chips, and a coke and they're already waiting for you because they were cooked before you got there.

It's not called fast food for nothing.

Caption: Mawla's web vitals performance score. Needless to say we use a headless CMS.

Easier to manage content in multiple languages

If your company is going global and expanding to new markets (congrats!) international SEO and content localisation can be notoriously difficult. Using a headless CMS can help you easily customise relevant fields for SEO including:

• Content
• Meta tags
• Internal links
• Images

And thanks to the use of APIs, your headless CMS can integrate seamlessly with third-party apps for translation management (which don't add more code-bloat to your site like Wordpress plugins).

For our clients we offer in-editor support for multiple languages allowing you to add any number of languages. These languages can have different site structures and pages or exactly mirror their English counterparts.

Optimise Images & Media for SEO

One thing we see a lot of here at Mawla are huge images that wreck a site's performance. Usually this is because images are uploaded in the wrong formats, huge image files, and wrong dimensions (so the browser has to first upload the original image, then reload the image, but size it down to the area it's been uploaded to).

This all leads to slower loading times and more users bouncing from your site which equals lower rankings in organic search results 👎.

It's understandable that folks on the marketing team don't know how to optimise images. Instead of training each and every content team on how to properly optimise images, your headless CMS can optimise images for them.

In your headless CMS you can:

• Serve next gen image types like webp which greatly reduces image file sizes
• Define hotspots in-editor to decide what part of the image is kept in focus across responsive design sizes
• Define the maximum sizes of your images so even if someone adds a large image file it'll be resized appropriately
• Have all your images delivered via a CDN
• Add an ALT tag field for SEO and accessibility
• Add other fields such as captions, titles, credits etc

Related Post: Top JAMstack SEO Tips

Scalable: never face server-side issues again

We're very proud to say that we've never had one of our sites go down.

Ever.

And while we'd love to flex our web development muscles and give ourselves a good pat on the back, it's primarily by using managed services like Sanity and Vercel. They manage security, authentication, uptime, ssl, and all the really tricky stuff your security team wants to hear is being handled.

This architecture also means you never have to face server-side issues again as you scale.

You see, what usually happens as more and more visitors come to your site is that the server struggles to support them. Your site goes down more often because your server can't cope with all the requests being made.

And websites that are constantly crashing aren't a good look to search engines...

JAMstack is the way forward because you can seamlessly go from 10k to 1M monthly active users. Nothing will break. Your CDN will kick in to deliver content seamlessly, and your performance will stay optimal.

Real Talk: Cons of Headless CMS and SEO

We truly believe that headless CMS is the way forward for web development and better SEO, but that's not to say it's right for everyone. Here are some considerations for when not to go headless.

Overkill for Small Businesses

If you're a small, local business whose needs are pretty simple, then headless CMS won't really be worth the cost of development for you, unless you can grab a templated website from a company like Mawla (hi, that’s us 👋)..

The initial build is usually more expensive compared to the costs of building a Wordpress website, but for smaller businesses this might be all you really need.

Headless CMS works best for scaling SaaS or ecommerce businesses.

Expensive Upfront Costs

As we just mentioned, the initial build for a headless setup is more costly than other options. This is because everything has to be built from scratch. However, there are ways to keep costs more budget-friendly. Most of the costs are around content blocks and styling, but if these aren’t being made from scratch it saves you money. We have a great library of beautifully styled content blocks so even on a budget you can get the headless experience.

It's worth mentioning though that while the upfront costs are usually higher for a headless CMS build, it's the most affordable option in the long term. Too often we see the cycle of companies trying to scale their current monolithic sites to the point of completely breaking them, then scrapping the site and starting over again.

This definitely adds more costs in the long-run and it's much more budget-friendly to build a scalable site in the first place.

Another issue we see a lot is that many marketing teams don't know their actual yearly cost once they factor in wages, consultancy subscriptions, and other capex factors like rebuilding and new websites

You need to find a web development team who also get marketing (not easy)

We're talking about SEO because you care about your organic leads, right?

If that's the case then be very careful which agency you trust with your build. There are a lot of amazing web development teams out there who have a ton of experience with building web applications, but who don't understand marketing.

This means things like those important SEO fields and other crucial SEO components of any successful marketing website can get completely missed.

The result?

A great website that your future customers can't find, so you may as well have thrown that content marketing budget in the bin.

Reliance on Javascript - is this bad for SEO?

We mentioned earlier that a headless CMSs usually exists within the JAMstack ecosystem. JAMstack is just a method of building modern-day websites, and using a headless CMS as a content repository is a part of that system

JAMstack sites are made up of 3 core components:

• J - JavaScript delivers rich experiences, beautiful designs, and additional functionality
• A - APIs - Instead of having a central database for your website, third-party integrations, and other tooling, JAMstack websites use APIs directly to pull and serve the right information when needed
• M - Markup serves the cached website content, so your website doesn’t have to recreate assets whenever a visitor accesses it

It's that JavaScript bit we're going to focus on as it's most relevant to the SEO debate.

You might have heard rumours that JavaScript is bad for SEO because search engine crawlers can't access it and read it. Once upon a time, this was actually true because having "JavaScript-heavy pages took a long time to process and render meaning that they were at risk of not being rendered or processed by search engines."

However, both search engines and web development have come a long way since the days when JavaScript was first introduced and Google openly recognises that "Javascript is a feature of all modern websites."

Having a headless CMS paired with an SSG means that HTML is pre-rendered, "so even a crawler that was built in 1999 and doesn’t understand JavaScript, can crawl the content. If you hit ‘view source’ on a JAMstack website and see a ton of html, it’s pre-rendered. Javascript is then sprinkled on top to make it interactive." -Arjen Scherff-de Water, Developer at Mawla.

So the use of JavaScript on your site really isn't a problem for SEO.

But remember to follow developer best practises stay lean, compress your code, and remove unused javascript or the Google gods will smite you.

How to Migrate your Content to a Headless CMS WITHOUT Losing All your Organic Traffic

Did all the benefits of a headless CMS get you excited? Did you carefully weigh up the cons and reasons why it might not be the best option for you?

If so, you might be curious as to how to move your current content over to a new, shiny, headless set-up without completely wrecking your organic search traffic.

First off, have a plan!

We notoriously bungled our own migration process because we did literally everything wrong (shoemaker's kid never has any shoes, right?)

Here's what we did wrong in a nutshell:

• We didn't respect the migration process
• We didn't consult the SEO team before the migration
• We didn't have a content plan
• We didn't log all our meta data
• We didn't set up the proper redirects

Basically we just did everything wrong because we rushed it and thought it would be fine.

It was not fine.

Thankfully, we've recovered our traffic now because we did what we were supposed to do at the beginning, but we want to make sure you avoid what we went through.

Let us hand the mic back over to Lidia Infante, Senior SEO Manager at Sanity.io.

"When transitioning from monolithic to headless, from an SEO perspective this is treated as a website migration. That means you need to follow migration best practices. So crawl the whole site, make redirect maps, and test that your key content has transitioned correctly to the new site by auditing it in a testing environment before it goes live.

This is great in theory. But the most common pitfall in website migrations is that timelines are often set before consulting the SEO team, which ends up bringing a rushed and incomplete QA process. Even when the SEO team has time to QA, the project might not have accounted for implementation of fixes and the site goes live with errors, putting the fixes in a backlog."

"Timelines are often set before consulting the SEO team," or in our case...the entire migration is done without consulting the SEO team.

That's why Luke, our Head of SEO, is now always involved in our migration processes from the get-go. Making sure development and SEO teams are aligned in this process will save you a lot of frustration in the long-run.

The Verdict? SEO and Headless CMS Go Together Like Crypto Bros and Lambos

Whether or not you move to a headless CMS is entirely dependent on your goals, budget, and the specific requirements you have from your site. If you're Lilly's Florist down the road, a headless CMS is like using a flamethrower to kill a fly.

Invest in a good web designer and good hosting provider and you'll be OK.

However, having worked with dozens of scaling B2B SaaS companies, we're more convinced than ever that relying on a monolithic CMS is holding back your efforts to scale in massive ways.

All our calls start with complaints about sites crashing, marketing teams' efforts getting blocked by constantly relying on dev support, and a lack of flexibility as they experiment and grow.

Having said that, it's not a simple action of flicking a switch and you're suddenly onboard with a headless CMS. It takes investing in a reliable web development partner who can guide you through the process, help you get buy-in from cross-functional teams, collaborate with those teams, and make sure SEO is baked into the build.

It's a big move, but it all starts with a conversation. If you'd like to discuss your current needs (and vent about your frustrations...) we're happy to talk you through some of the options that might be best for you.

A lot of work and research went into this article and we'd like to thank everyone who contributed, especially Lidia Infante from Sanity.io! If you found any value in what you've read here we'd really appreciate it if you shared this article.