Edwin Toonen
Edwin is a specialist in strategic content. Before joining Yoast, he spent years honing his skills at the leading web design magazine in the Netherlands.
You have probably come across the term headless before, probably in relation to a headless CMS. There is no presentation layer attached to a headless CMS, which makes it a flexible solution when you want to target many different formats. But what does a headless CMS entail and are they a good idea at all? Find out in this post!
What is a headless CMS?
A conventional CMS consists of three parts: a database for storing content, a back end for managing this content and a front end for presenting this content to a visitor. We know these traditional CMSs as the monoliths: a single application that has everything on board. Our good friend WordPress is a monolith.
Yoast SEO 16.7 has expanded support for Headless WordPress. Be sure to check it out!
The advantage of a traditional CMS is that it has everything on board. But that’s also one of its biggest drawbacks. A traditional CMS is often full of legacy code, highly intertwined and interconnected. Also, parts are difficult to replace if you’re looking for a better or more flexible solution.
A headless CMS discards the presentation layer and consists of only two parts: data storage and a back-end for managing content. As a developer, you can choose 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 populate the front end and determine behavior.
Pick the head you want, cute little robot!
This flexibility is great, but it also has its drawbacks as there aren’t many tried and tested tools out there. In the end, you may have a multitude of tools that do a little bit, which makes it harder to keep everything going. Of course there are ways to combine several ways of working – for example; You could turn WordPress into a headless CMS if you are already working with that CMS and are comfortable with it.
A headless CMS: powered by APIs and JavaScript
When you cut the head off a CMS, you change your communication. You can no longer rely on the internal connections of the Monolith CMS and have to use a different communication channel: APIs.
API stands for Application Programming Interface and is a way of opening data for applications with which it can communicate. You can use it to send and receive messages, content, or metadata to be used in the front end of the site. For example, Yoast SEO has a so-called REST API that opens the metadata (including crawl instructions and structured data) that the SEO plugin generates. Headless CMS can read this data and apply it to the pages they generate.
Is the future headless?
The concept of headless has been around for ages, but headless CMS seem to be on everyone’s lips. Whether it’s a huge movement or hype is hard to tell. For most users and use cases, a headless CMS doesn’t seem like a valid option. That’s not to say that the idea of sharing your content doesn’t appeal to more developers and information architects every day. With a headless CMS, you can have a content-first strategy instead of a front-end-first strategy.
If you put your content first and remove all of it, you can share it. When content is free, it can be used anywhere – literally anywhere. Today, content lives not only in a simple responsive website, but everywhere in apps, intelligent assistants, smartwatches, refrigerators, kiosks, and televisions. And there will be even more formats that we cannot even think of at the moment.
With that in mind, a headless CMS can help you share your content, and it can help you target these formats with great flexibility. However, this does not mean the end of the traditional CMS. WordPress alone proves that there are massive amounts of bakery type websites around the corner that don’t necessarily need such freedom. Ease of use, that’s what they are looking for.
Headless CMS vs. decoupled CMS
Headless CMS is a collective term for all types of CMS that do not have a frontend. Of course, there are many flavors of this technology and different ways of thinking about this concept. One of them is the difference between a headless CMS and a decoupled CMS.
You can see a headless CMS as a data store ready to distribute content on demand. A decoupled CMS is more proactive in its work, and some CMS even come with an integrated form of templates, which makes it a good interim solution for many projects.
Headless CMS vs. WordPress
WordPress supports over 40% of the websites on the World Wide Web – an impressive feat. WordPress has proven itself to be a trustworthy solution for many publishing tasks. But the outdated code base and architecture don’t make WordPress a perfect platform.
Improvements are often screwed on, making it more complex with each release. Especially in the front end, it’s not always easy to get WordPress to do what you want – using modern tools to do so. Remember that topics are still being created in PHP, while the rest of the web is increasingly moving to JavaScript.
If you want to build the front end yourself and choose 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 great option.
WordPress can also become a headless CMS – run the database and backend and use the WordPress REST API to communicate with the frontend you created. The front end can be created in JavaScript according to your specifications, for example with React or Angular. You can also use libraries like Gatsby to turn your headless WordPress site into a powerful static site.
Just keep in mind that many WordPress plugins lose their functionality in a headless environment and you may have to program some things yourself – or choose a solution that is out of the box.
Gatsby is one of the frameworks that advertise making WordPress free
Advantages of a headless CMS
A headless CMS has many advantages over a conventional CMS, but also many disadvantages. It’s not so much that one is better than the other; both have their advantages and disadvantages. The main question must be, does it make sense for you and your situation to use a headless CMS? In most cases, the answer to this question is likely to be no.
So what are some of the advantages of a headless CMS?
- A headless CMS is easier to scale
- A headless CMS can help improve the performance of your website
- You can use it to run 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 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
- Choose your tools to build your website
Disadvantages of a headless CMS
Of course, there are many disadvantages to using a headless CMS. Here are a few.
- You have to create themes from scratch
- Working with headless is not for beginners
- Non-developers may have problems with the differences
- A lot of people are unfamiliar with the back end, which hurts adoption
- It helps to use a back end that people know (WordPress)
- There is no live preview, which makes it difficult to see what your content will look like
- A headless CMS requires more maintenance
- There are many other moving parts that could break
- You have to pick and choose your tools and there isn’t that much available
Headless CMS and SEO
Depending on how you build and deploy the site you built on your headless CMS, it can offer great performance and user experience benefits. A high-performing website that provides users with a great user experience will do well in search results. But that doesn’t have to be limited to websites that are based on headless. Either way, you need to put a lot of work into making it quick and great – especially if you built your front end in JavaScript. As websites rely more and more on JavaScript every day, JavaScript SEO is something that you really need to take care of.
With headless CMS, the SEO basics don’t really change – you have to keep in mind that many don’t come with proper SEO tools. Sometimes in the end you have to build everything yourself.
SEO can therefore be more difficult in headless systems due to the way everything is split up. You need to set up and work with your systems properly to get the most of them. How you do that depends on the system – or how your development team created the SEO tools.
For example, working with metadata like in a traditional CMS is more difficult due to the decoupling. For WordPress SEO, Yoast SEO will help you get this right. This plugin generates a lot of metadata for your website and makes it available for use in a mindless WordPress setting.
Yoast SEO and headless WordPress
Yoast SEO can be used in headless CMS as it has an API that makes the metadata available to these systems. With Yoast SEO we open the metadata we have provided in a piece of content and help developers use it. This includes, for example, all metadata for a post, crawling instructions and structured data. How to enable the REST API. We also have developer documentation for the Yoast SEO REST API so you can get started quickly.
Developers can use this metadata to determine what these pages should do and how search engines should read them.
Just turn on the REST API to get started
A brief introduction to headless CMS
In this post, we’ve talked a lot about what a headless CMS is and what it can do. There is a lot of talk about headless CMS and whether this is the future of content management. They may be, but a regular CMS like WordPress will still be fine for most use cases. Of course, you can get the best of both worlds and use WordPress in headless form!
