Your simplified guide to SEO for Headless CMS

Your simplified guide to SEO for Headless CMS

Who is this post written for?

• Head of eCommerce, Head of Marketing or Head of Growth equivalent role, you likely have a team in-house but no dedicated SEO resource
• In-house SEO manager that has a headless CMS coming up or recently inherited one
• Head of digital experience or equivalent role that is considering adding headless to their product roadmap

Headless eCommerce CMS explained – what is it?

In a headless setup, the front end of the store and the back end of the store are “decoupled” – in other words, they stand independently of one another. This means the content, product listing and customer facing information (the front end of the store) is separate from the business logic and commerce management (the back end of the store).

As a result, this headless setup separates the customer-facing concerns from the system-facing concerns.

If you’re not familiar with headless CMS vs traditional vs decoupled CMS then read this article:

• https://www.storyblok.com/tp/headless-cms-explained

What are the advantages and disadvantages of a headless setup?

This post won’t go into detail about pros and cons or the decision-making process, if you’re undecided on headless then we’d recommend reading Pauls post here: https://paulnrogers.com/introduction-to-headless-ecommerce/

Paul talks more about the pros, cons, examples of headless CMS platforms and the setup considerations for eCommerce stores.

Instead, we’ll be focusing on the SEO eCommerce considerations to be made.

Why is a headless CMS set up becoming so popular?

While headless and decoupled architecture is nothing new, the demand for this kind of solution is, as businesses look to deliver content to locations outside of the standard web browser.

Traditional eCommerce CMS’ have prioritised serving content to desktop-first as this is where the majority of traffic comes from and where most customers transact. Therefore, the traditional approach of a connected front end and the back end has worked fine.

However as consumers buyer behaviour switches to different devices and locations it causes different challenges around how marketers can target content to these customers across an omnichannel strategy.

As a results demand has grown for:

• Additional flexibility when serving content across mobile, tablet, in-store, wearables etc
• A more personalised approach to content and buying
• A faster serving of content and shopping experiences
• Greater control for content customisation to stand out from competitors

Headless ticks all of these boxes!

For more detail about each of these, read this Magento post: https://magento.com/blog/best-practices/future-headless

What impact does a headless CMS have on SEO?

Headless CMS’ are built from scratch which allows them to accommodate the individual business demands.

As a result, each solution is essentially bespoke offering a range of unique challenges for SEO.

Over the past 12-18 months, we’ve worked with a range of eCommerce sites with varying size catalogues that have adopted a headless CMS approach.

We’ve typically worked with clients at 2 stages:

• Migration and build stage. The client is already on a traditional CMS and is migrating to a headless approach. This allows us to build in SEO requirements from the start and also ensure the migration actually improves performance.

• Expansion stage. The client already has their headless implementation, now they are looking to grow their SEO traffic.

If you have any non-brand SEO traffic and are looking to move to a headless solution – you need to get an SEO expert involved during the migration.

We’ve outlined examples to consider below however as mentioned each set up is bespoke so there is no ‘definitive’ SEO guide to a headless CMS as there would be for Magento/Shopify.

The more challenges and considerations we encounter through our experiences we will be adding them to this list.

SEO Considerations for Headless CMS setups

Below is a mixture of the experience we’ve had across numerous headless CMs setups:

API calls

• Due to the nature of headless CMS’, they rely heavily on API calls. The calls can impact your URLs if they are dynamic
• Always request your dev team that you have static URLs this is essential for any page you want to be ranking in Google
• We’ve worked with one eCommerce brand that had many dynamic paginatioURLsls which were being generated by API calls – these urls are tricky to find but once you do it’s pretty straightforward to block through typical tactics like no-follow, robots.txt and canonicals.

Go back to basics

• If you are lucky enough to put your SEO requirements into the dev team as they are building the headless CMS you should be safe and outline all of the SEO essentials
• As SEOs, we can take it for granted how much SEO basics are pre-built into traditional CMS’ like WordPress or Magento – if you’re building a CMS from scratch then these need to be in the dev brief
• Even if you’re an experienced SEO I’d recommend pulling out an SEO 101 post to make sure you’ve covered everything below are 2 examples that support this claim
  • WIth a headless CMS the front end stack will usually be written using javascript, javascript is completely different to HTML and even though Google has made great strides to understand it there are still principles it struggles with for example Onclick – we had a client that used Onclick for their international selector – Google can’t replicate a click like a user can and therefore could not find the internal links to crawl the international websites
  • A second example, one of our clients actually didn’t have a robots.txt. A perfect example of something SEOs would take for granted when working with a traditional CMS

Maintain your URLs

• If you are migrating from Magento or any other CMS, make your job easier and ask the developers to keep the same URLs for all of your categories, listings and product URLs
• To re-emphasise, this is a bespoke build and usually, developers can do anything you want with the URLs – ask them to keep it the same.

Hashed URLs

• Another challenge when working with javascript, keep an eye out for hashed URLs
• These essentially highlight browser side filtering (usually through ajax or something similar) everything past the hashtag Google won’t be able to read as it’s unique to your browsing experience
• Ensure that your key SEO pages are not behind the hashtags
• You can also use this hashtag approach to your advantage (more on this later)

Parameters & variants

• Again, this is a custom set up, therefore, developers will choose their own parameter naming conventions
• So there’s no standard, out of the box parameter naming like Shopify or Magento
• We’d recommend auditing your URLs to find all parameters you can find and also cross-reference these with the URLs that are being monitored by Google in your search console

Dynamic Serving

• Serving content dynamically from your server per device type can have huge advantages for your site speed and user engagement
• Use an HTTP-vary code to tell Google you are doing this to avoid any issues with confusing Google and it thinking you are doing anything dodgy

Device requests impacting URLs

• One key advantage of a headless set up is the ability to serve the same content to different device types (see below)
• We’ve had a client that was requesting content for in-store devices, this request was pulling from a different URL to the standard SEO ones – which were being found and indexed by Googlebot – these need to be monitored and managed.

Content & readability of javascript

It’s highly likely that your front end stack will be leveraging some form of javascript, therefore, it’s essential to ensure Google can actually read and index your framework and set up.

Even though Google has made strong progress in recent years, it still struggles to read some frameworks, see the example below:

The left side columns represent different tests you can take to ensure your javascript is indexed by Google. These are:

1. 1. 1. Fetch as Google
      2. Site search
      3. Content text search

We’re going to discuss these different tests in more detail in a blog article coming very soon, so subscribe to us to hear about it first when it’s live!

• Server-side rendering

It’s very important to have server-side rendering in place for Google so rendering your site isn’t too resource heavy for Google. Depending on your front end setup there will be a complimentary server-side javascript. For example, if you’re using React then next.js is typically used server side. More information about individual frameworks and their setups can be found here.

• Different API can’t have mixed results

Once you’ve identified that Google can read and index your content – this is only the first stage. Next step is to assess specific page templates and the content in more detail. Why? Depending on how the content is being generated it may cause readability issues for Google (see 2 examples below) as a result we recommend you take individual page templates e.g. blog, category, listing, product pages and assess the fetch as Google results with considerable detail so you don’t miss anything e.g.

Example 1 – below the fold content

Running a fetch as Google (shown below), it shows us that Google could read the homepage fine, however, when you scrolled below the fold the page is blank – missing some key internal SEO linking.

Example 2 – related product feed

This one was easy to miss but comparing ‘what Google sees’ vs ‘what humans see’ the ‘Related products’ was not being read by Google – again missing some key cross-sell internal linking.

We love headless CMS set up, they offer incredible flexibility and some unique SEO challenges. The popularity with headless CMS setups for eCommerce websites is growing however do not neglect the SEO considerations.

Ideally, you should involve an experienced SEO in the build of the CMS, that said improvements can still be made at a later date.

If you have any questions around set up or if you just want a second opinion, feel free to email me on sam@thisisnovos.com or reach out to us for a free consultation today.

If you’re happy with your CMS and need more help with content and capturing the ultimate “Google Knowledge Box”, then read our article about it here.