28 Jul
Headless CMS architecture separates back-end content functions (like creation, management, and storage) from front-end functions (like presentation and delivery).
A headless CMS guarantees nothing, but allows you to do anything. In theory, this means potentially perfect SEO. Also, it has no additional presentation layer, so it is a flexible solution when you want to target multiple different formats. But what does a headless CMS contain, and are they even a good idea? Let’s find out in this article.
What is CMS?
CMS is Content Management Software, it is a software that helps users create, manage, and modify content on a website without the need for specialized technical knowledge. In simpler language, a content management system is a tool that helps you build a website without needing to write all the code from scratch (or even know how to code at all).
Instead of building your own system for creating web pages, storing images, and other functions, the content management system handles all that basic infrastructure stuff for you so that you can focus on more forward-facing parts of your website.
What is a headless CMS?
A traditional CMS consists of three parts: a database to store content, a back-end to manage that content, and a front-end to present that content to a visitor. The advantage of a traditional CMS is that it has everything on board.
But, that’s also one of its greatest disadvantages. A traditional CMS is often full of legacy code, heavily intertwined and interconnected. Plus, parts are hard to replace if you are looking for a better or more flexible solution.
A headless CMS discards the presentation layer and comes with just two parts: data storage and a back-end to manage content. As a developer, you get to pick the best parts to build the front-end, depending on your goals and the type of formats you are targeting. You can use the APIs of the CMS to send and receive content and metadata to fill the front-end and determine the behavior.
This flexibility is great, but it also comes with its own disadvantages, as there aren’t many tried and tested tools. You might end up with a host of tools that do a little, making it harder to keep everything running.
A headless CMS: powered by APIs and JavaScript
The headless CMS means changing your communication. You can no longer rely on the internal connections of the monolith CMS and have to use a different way of communicating: APIs.
API stands for Application Programming Interface, and it is a way of opening up data for applications to talk to. You can use it to send and receive messages, content, or metadata to use on the site’s front-end.
Is headless the future?
The buzz is all about the headless CMS. For most users and use-cases, a headless CMS doesn’t seem to be a valid option. That’s not to say that the thought of setting your content free isn’t speaking to more developers and information architects by the day. With a headless CMS, you can adopt a content-first strategy instead of a front-end first one.
A headless CMS can help you set your content free, and it can help you target those formats with great flexibility. But, this doesn’t spell the end for the traditional CMS. WordPress alone proves that massive amounts of sites are of the bakery-around-the-corner type that doesn’t necessarily need such freedom. Ease of use, that’s what they are looking for.
Headless CMS vs. Decoupled CMS
Headless CMS is a catch-all term for every type of CMS that doesn’t come with a front-end. Of course, there are many variants of this technology and different ways of thinking about this concept. One of those is the difference between a headless CMS and a decoupled CMS.
You can see a headless CMS as a data storage, ready to push content around once asked. A decoupled CMS is more proactive in its work, and some CMSs even come with a form of templating built-in, making it a good in-between solution for many projects.
Headless CMS vs. WordPress
WordPress powers over 40% of the websites on the world wide web — a stunning achievement. WordPress has proven itself as a trusted solution for a lot of publishing tasks. But, its legacy code-base and old architecture don’t make WordPress a perfect platform.
Enhancements are often bolted on, making it more complex with every release. Especially on the front-end, it’s not always easy to get WordPress to do what you want and to use modern tooling while doing so. Remember, themes are still built in PHP, while the rest of the web is increasingly moving to JavaScript.
If you want to build the front-end yourself and pick your own tools, a headless CMS is a good option. But, if you want your customers to use the CMS they know and love — WordPress, turning that CMS into a headless one is also a valid option.
Moreover, WordPress can also become a headless CMS, run the database and the backend and use the WordPress REST API to communicate to the front-end you build. The frontend can be built to your specifications in JavaScript, with React or Angular, for instance. You can also use libraries like Gatsby to turn your headless WordPress site into a high-powered static site.
Just remember that many WordPress plugins will lose their functionality in a headless environment and you might have to code some stuff yourself or pick a solution out of the box.
Advantages of a headless CMS
Compared to traditional CMS, headless CMS have more advantages. It is not about which one is better, both have their pros and cons. some of the advantages of a headless CMS?
- A headless CMS is easier to scale
- A headless CMS might help improve the performance of your site
- You can use it to power the static version of your WordPress site
- It can provide a structured hub for your content and keep it safe
- You can start putting content first instead of the technology first
- You can use modern frameworks to build your front-end
- The flexibility makes it easier to future-proof your site
- The decoupling of front-end and back-end systems can increase security
- Cross-platform communication comes within reach
- Pick and choose your tools to build your site
Disadvantages of a headless CMS
Of course, there are plenty of disadvantages to using a headless CMS. Here are a couple of ones.
- You have to build themes from scratch
- Working with headless is not for beginners
- Non-developers might have issues with the differences
- Many people are not familiar with the back-end, hurting adoption
- It helps to use a back-end people know (WordPress)
- There’s no live preview, which makes it hard to see how your content will look
- A headless CMS takes more work to maintain
- There are many more moving parts that might break
- You have to pick and choose your tools and there isn’t that much available
The case for headless
What this simple ‘headless CMS doesn’t have SEO features’ rationale fails to consider is some of the other inherent benefits that you can get from going headless, including flexibility, stability, and speed, which can have a direct impact on SEO.
Standard practice versus best practice
Most good CMS platforms include features designed to help you with your SEO efforts. These range from basic options such as editing the page URL and basic metadata (description, keywords), through to more sophisticated auditing of your implementation.
The problem with this solution isn’t the features themselves, in fact it’s similar to the argument for headless hurting SEO: if you just leave it how it is and don’t actually put some effort in, you won’t see the benefits. Too often we see content editors trusting that their shiny CMS features will sort out their SEO optimisation for them, which leads to them leaving defaults set, or in some cases not giving any attention at all to key factors such as page titles, descriptions, and structured data. In the worst case scenario, this can lead to issues with a negative impact, such as duplicate titles or descriptions being set for all pages in a website.
It’s also quite possible, or even likely, that your traditional CMS platform’s default SEO implementation is based on slightly older or out-of-date SEO implementation best practices. When your SEO agency asks you to change the implementation, for example adding or removing certain meta tags, you may not be able to without customisation or development effort. Once you go beyond the features available ‘out of the box’ in your traditional CMS, you’re playing in the same arena as headless CMS implementation (custom dev or third party integrations).
In a headless world, implementation of your SEO optimisations is not tied to your CMS at all. You’re able to choose whichever framework or set of standards you want to implement, and free to modify or replace it at any time. You can model your channel-specific metadata however you wish with no constraints, and implement exactly what is required for the best SEO possible.
Complete flexibility
Being in complete control of the markup your website produces means you’re able to implement literally everything your SEO agency recommends. Often there is a bit of a battle between an SEO expert and a web developer over what’s easy (or what’s even possible) to implement within a CMS platform, and sometimes compromises need to be found.
Whether it’s smart snippet metadata, OG tags, Twitter cards, canonical tags, AMP, adjusting the order of things on the page or the way tags are implemented, all of this is completely in the hands of the site’s developer.
Stability
One of the most popular ways to implement a site using a headless CMS is by pre-rendering your pages and making them available over a CDN the moment they’re published, you’re no longer reliant on the CMS to actually process and serve up pages on visitor request. This means your pages are always available worldwide, even if your CMS is offline, with no disruption or unexpected results for search engine crawlers or social media networks.
Speed
Another benefit of the Jamstack and headless of course, is the sheer speed of a static site. It allows you to deliver your website to your visitors (and search engine robots) incredibly quickly.
Headless CMS and SEO
Depending on how you build and serve the site you built on your headless CMS, it can offer great performance and user experience benefits. A highly performant site that offers users a fantastic user experience will do well in the search results. But, that doesn’t have to be limited to sites built on headless. In both cases, you need to put in the work to make it fast and awesome, especially if you’ve built your front-end in JavaScript. With sites relying more on JavaScript by the day JavaScript SEO is something you really need to take care of.
For headless CMSs, SEO basics don’t really change, you have to consider that many don’t come with proper SEO tools. Sometimes, you have to end up building everything yourself.
SEO, therefore, might be harder in headless systems because of the way everything is split apart. You need to properly set up and work with your systems to make the most of it. How you do that depends on the system or how your dev team built the SEO tools.
For instance, working with metadata like in a traditional CMS is harder because of the decoupling. For WordPress SEO, Yoast SEO helps you do that properly. This plugin generates a lot of metadata for your site and exposes that for use in a headless WordPress setting.
Wrap up
To stand out, you need to build beautiful, responsive, and interactive content and you need to be able to do it quickly.
Second, new channels and user devices are emerging all the time. It’s not enough to build beautiful stuff, you also need to make sure you can deliver it everywhere, as efficiently as possible. Headless CMSs mean marketers and developers can build amazing content today, and importantly future proof their content operation to deliver consistently great content everywhere.