Explain Like I'm Five: Headless CMS

Omar Benseddik's photo
Omar Benseddik
Updated 2023-11-13 · 5 min
Table of contents

This post is part of the series Explain Like I'm Five (#eli5), which aims to make tech concepts and terms easy to understand.

In this post, we explain in a few minutes what Headless CMS is and show you how it's used. So, what is a headless CMS, what are the use cases and benefits of a headless CMS, and what can it be used to create?

What is a CMS?

When the web was first introduced, only developers could create and manage websites, but as the Internet expanded and the web became more accessible, non-developers could no longer be kept on the sidelines.

So, as a remedy, Content Management Systems (CMS) came into place. The purpose of a content management system was to allow users to create and edit content on a website without needing to have any knowledge of code.

One could open a CMS, create a website with different pages, add images, write text -  and voilà, a site would be ready to go live without a single line of code needing to be written. Naturally, as the adoption of this tool increased, so did the number of CMS providers out there.

Of course, it's not all sunshine and roses; building a site with a CMS and not controlling the code comes with its limitations:

  • The interface cannot be fully customized and styled because it is based on templates, meaning that a lot of these websites look alike and can't always have a distinguished brand.
  • Without code, it can be very difficult to build certain features and improve user experience.
  • To allow users to build and edit without code means there has to be a lot of running code in the background. As a result, the website speed is often slower and does not match users’ expectations.

This begs the question: are we back to square one? Do non-developers have to give up their CMS superpowers for a website to be fast, unique, and customized?

Thankfully, they don't. A new breed of CMS called "Headless CMS" came into place to combine the advantages of writing code with some capabilities of the initially described CMS, which we'll refer to as "traditional CMS".

What is a Headless CMS?

So, firstly, what is a headless CMS? A Headless CMS is built solely to handle content, in contrast with the traditional CMS which allows you to manage both content and the wider frontend.

CMS stands for Content Management System, not Content Design Frontend Backend Hosting Management System, although this is what a traditional CMS has the capability to do.

Headless CMS is called "Headless" because the frontend of the website (head) and the content (e.g. text, images, videos) are separated, in contrast with the traditional approach which entangles both.

When both frontend and content are glued, it is harder to change the content without breaking the frontend.

Also, because it is glued, there is no choice in terms of which technology to use for the frontend, meaning the content is "locked" in the traditional CMS interface.

Headless CMS allows to separate frontend from content
Headless CMS allows to separate frontend from content

By separating the content from the frontend, it is possible to distribute the content to different interfaces (e.g. smart watch application, mobile application, or an information kiosk). This becomes more relevant as businesses spread their messaging in different platforms and devices.

Centralizing content in one single place avoids inconsistent messaging and outdated content, whilst making content management more efficient and streamlined.

Centralized content makes distribution easier
Centralized content makes distribution easier

When building a website with a Headless CMS, developers focus on writing quality code, and content creators, editors, marketers, and non-developer business people focus on delivering fresh content to users, focusing on what to say instead of how to present it.

Headless CMS in action

If you want to see the CMS in action, we encourage you to go through this guide.

Frequently asked questions (FAQ)

Do I have to give up on traditional CMS?

It depends on your goals. In some instances, it is still possible to use a traditional CMS (e.g. WordPress) as if it was headless.

To do so, the frontend is built independently from the CMS, which only acts as a source of content. It's less convenient, since a CMS like WordPress was not built to be headless, but it is doable.

If your business is evaluating such a migration, you can read about how we've helped Zego and Heavybit, or get in touch directly.

Which brands use a Headless CMS?

Many well-known brands have integrated Headless content management. Here are some of them:

  • National Geographic
  • Nike
  • Chanel
  • Atlassian
  • Sonos
  • Bang & Olufsen
  • ALDO
  • Spotify
  • WeWork
  • Danone
  • Peloton
  • Intercom
  • Mailchimp
  • TUI Nordic
  • Oasics
  • Zalando

How can I control SEO with a Headless CMS? Does it have plugins like WordPress?

When we implement a Headless CMS for a client, we do so with SEO best practices in mind.

If there's a plugin you'd like to recreate, get in touch and we can see how to customize it on your CMS.

Can I localize content on a Headless CMS?

Are there other Headless CMSes aside from Sanity?

Yes, there are plenty. One of the most known ones is Contentful, and we explained why we prefer using Sanity instead.

What kind of content creation capabilities does a Headless CMS offer?

If you use a Headless CMS, what do you do for the frontend?

We use a React framework like Remix or Next.js to produce the frontend.

Recent articles

SEO best practices on Sanity

When we build a website with Sanity, we configure SEO best practices to rank higher on search engine result pages.
Omar Benseddik's photo
Omar Benseddik
2022-09-05 · 7 min

Translating Shopify stores with Sanity

At Tinloof, we have an internal library that does a lot of heavy lifting when it comes to building fast Remix websites that have their content managed from Sanity. A while ago, we...
Seif Ghezala's photo
Seif Ghezala
2023-01-31 · 4 min