A headless architecture is one where the frontend and backend of an application are decoupled. The frontend is the part of the application that the user interacts with, while the backend is responsible for the business logic and data processing.
Headless architectures are becoming more and more popular in the eCommerce space, as they offer some advantages over traditional monolithic architectures. For example, a headless architecture can make it easier to scale an application, as the frontend and backend can be scaled independently.
However, for those not experienced in headless architectures, they can pose some new and different challenges to traditional eCommerce platforms like Magento and Salesforce Commerce Cloud.
In this blog post, we’ll take a look at some of the challenges that you may encounter when using a headless architecture for your eCommerce platform.
Understanding Headless Architecture
What are the Challenges of Using a Headless Architecture for eCommerce?
One of the challenges of using a headless architecture for eCommerce is that it can be more difficult to manage the overall application.
This is because the frontend and backend are decoupled, and there is no longer a single point of management for the application. Instead, you will need to manage the frontend and backend separately, which can be a challenge if you’re not used to working with a headless architecture.
Another challenge of using a headless architecture is that it can be more difficult to integrate third-party services and applications.
This is because the frontend and backend are decoupled, and you will need to find a way to integrate the two.
In traditional monolithic architectures, it is often easier to integrate third-party services and applications, as the frontend and backend are integrated.
Finally, a headless architecture can also be more difficult to test. This is because the frontend and backend are decoupled, and you will need to test both separately. In traditional monolithic architectures, it is often easier to test the entire application, as the front and backend are integrated.
Working with headless eCommerce builds, you’ll need to learn how APIs work, or at least become familiar with them and how they are likely being used by the website you’re working on.
Being Familiar With APIs
An API is a set of programming instructions that allow different software applications to communicate with each other. In the context of web services, an API defines how a client and server communicate with each other.
If you’re building web services for a headless eCommerce website, you’re most likely using RESTful APIs. REST (Representational State Transfer) is a type of API that uses simple HTTP requests to fetch data from a server.
Shopify’s storefront API uses GraphQL, which is a different type of API that is optimized for performance. Shopify’s storefront API is an example of a RESTful API. The Shopify API lets you access the data and functionality of Shopify from outside the Shopify admin. You can use the Shopify API to build apps that support merchants in managing their shops, products, and customers.
Because headless eCommerce builds rely heavily on APIs, you will want your development team to use static URLs – in case the configuration causes dynamic URLs. We’ll go into more detail about why dynamic URLs can be problematic (for search engines).
Platforms & Frameworks
The headless approach allows for a lot of flexibility and stack variation, but there are some build frameworks you may come across more than others. These are:
- Nuxt.js is a framework that is built on top of Vue.js. It offers a great way to create server-side rendered applications. This makes it a great choice for headless eCommerce projects that need to be fast and responsive.
- PWAs are a new type of web application that offers a great way to create a fast and reliable headless eCommerce experience. They’re built using web technologies, but they’re designed to work offline and be more reliable than traditional web applications.
Headless eCommerce SEO Framework
Working with headless eCommerce frameworks can be fun, and as SEOs, it’s fantastic if we get in at ground level whilst the stack is being scoped and have an active role in developing an MVP (minimum viable product) for launch, so we have a strong foundation to start driving results as soon as possible.
Common themes to look out for with headless eCommerce platforms, from an SEO perspective, are:
- URL construction
- Status code returns
Headless eCommerce platforms can sometimes suffer from excessive (and oftentimes rogue) URL generation, whether they be:
- Dynamic URLs
- Hashed URLs (and hashed content if the fragment changes the page content)
- Rogue crawl paths (and crawl traps) caused by crawlable APIs and other third-party script calls
You want to crawl environments (staging, production, etc) using multiple devices and user agents to check for erroneous URLs and crawl paths. As most headless platforms are bespoke, and from experience, development teams can more often than not find solutions to URL issues.
Otherwise, you can make use of the robots.txt file, canonical tags, and x-canonical tags to resolve the majority of your URL generation and crawl control woes.
Another key thing to consider is that because most constructions are bespoke, I sometimes come across builds where 404 templates return 200s or other random status codes.
You can use DevTools by right-clicking on the page and then going to inspect.
This will allow you to see the page’s rendered DOM after all scripts have been parsed by the browser. This can then be used to cross-reference with Google Search Console’s rendered HTML to see if there are any discrepancies.
If you see any discrepancies, you can use the Mobile-Friendly Testing Tool and Google Search Console’s URL inspection tool to see what elements and content Googlebot is choosing to crawl and render in comparison to what the user sees.
Debugging Caching Issues
If you open your website with DevTools and navigate to dev tools settings in the network section, you can disable caching. This will enable you to see what the page looks like with and without cache to determine if there are any differences.
Another way to check your website’s browser caching is by running a lighthouse report in DevTools, which will list all resources not leveraging browser caching.
If you find that your website is not utilizing browser caching, there are a few things you can do to fix it.
The first thing you can do is ensure that your server is configured to set caching headers. These headers tell the browser how long it should cache content for, and whether it should be cached at all.
The impact a headless CMS has on SEO is difficult to generalize. There are some key considerations that should be made, but ultimately it will come down to how the CMS is used. If used correctly, a headless CMS can be a powerful tool for SEO.