Headless CMS (Content Management Systems) remove the direct link between the backend of your content database and the way that content is served to users when they visit your website or app.
This compares with traditional ‘coupled’ CMS where both the database, and the rendering of the content, are controlled by the same CMS.
While a coupled CMS has its advantages – such as a single interface to edit both your database and the way it appears on-screen – headless CMS is more powerful and flexible.
This is particularly true for larger websites, complex databases or when multiple people need to work on different aspects of your content, website/app and on-site SEO.
What is Headless CMS?
In a traditional CMS, the backend content database and frontend website design can be edited from within the same CMS dashboard, which is why these systems are referred to as ‘coupled’.
A headless CMS system uses separate systems for the database and delivery, with an API (Application Programming Interface) acting as a bridge between the two.
Some of the most commonly used headless CMS include Ghost, Prismic, Netlify and Contentful, and like coupled CMS, they have been designed to run efficiently, offer flexible functionality, and scale rapidly when your database begins to grow.
Headless CMS can be more expensive, due to the greater complexity, but it offers capabilities that a coupled system cannot, such as the ability to serve content in a completely different way to visitors who access your site from different devices.
This in turn has some positive implications for Search Engine Optimisation (SEO) techniques like responsive website design, as your content can be served in a much more responsive, platform-dependent, and truly mobile-friendly way.
More benefits of headless CMS
Let’s look at some of the specific benefits of headless CMS, which are helping to drive the massive popularity and rapid uptake of this approach on websites all over the world:
Customised content
Closer control over both your content and the way it displays means you can customise your pages to a much greater extent. Whether you do this for specific user groups or for your audience as a whole, this gives you even more ways to stand out among your competitors.
Faster loading
Using a device-appropriate API and frontend optimises loading speeds on different devices, including those accessing your site via a mobile data connection. This also supports any action you are taking in SEO campaigns to improve your Core Web Vitals performance.
Future-proof flexibility
The ability to install additional APIs means your database can be connected to new frontends in the future. This can allow you to diversify from, for example, a website for desktop and mobile visitors, to also serve in-store info screens and wearable tech.
In summary, a headless CMS is ideal when you have complex frontend needs, but you want to simplify the editing and maintenance of your actual content – with edits and updates reflected across all of your different platforms immediately.
How to plan for headless CMS
Content modelling is the crucial planning stage before you implement a new headless CMS. It’s similar to the way you plan a website’s folder hierarchy, URL structure and sitemap, except in this case you will be working with content types, rather than individual pages.
What are content types?
The various content types you define contain fields which pull in information from your database. This could be SEO metadata – and if you use a traditional coupled CMS with an SEO plugin like Yoast, it’s likely you’ve seen and filled in metadata fields in the past.
On your main content pages, you might have fields for the URL slug, as well as one or more sections of visible content to be rendered on the page.
You may also define content types for media assets, giving your files a name, a description that can only be seen internally, and a location where the file can be accessed.
How do content types work?
Once you have all the required content types defined, you have built a modular ‘building blocks’ method by which APIs can extract information from your database and put it together for different platforms.
APIs can request data from different content types, and construct it in completely unique ways to render pages in a platform-specific way.
If you need to make changes in the future, such as to add a new SEO meta tag, you can update the content type to create the necessary field across every relevant item in your database.
How to define SEO requirements
It’s good practice to define SEO requirements for headless CMS before you get too deep into development, so that your developers know what they need to implement.
Some elements to consider include:
- URL slug (which can be keyworded on a per-page basis)
- Metadata (e.g. ‘title’, ‘description’ and ‘keywords’ tags)
- Canonical tag (to prevent duplicate content penalties)
- Meta robots tag (to prevent unwanted crawling of pages)
You can also create fields for some of the more modern methods and service-specific verifications that help to support your SEO:
- Microdata, microformats and Schema.org markup
- Verification tags for Google Analytics, Search Console and Bing Webmaster Tools
- Markup for social media previews (e.g. Twitter Cards)
Again, these all influence how your content is found and how it displays on different platforms – in this case, third-party websites and apps – so including these fields helps you to keep control of how people see your content, no matter where they find it.
How many content types do I need?
Deciding how many content types to use is one of the big questions of switching to headless CMS, and the answer is that it depends on what you are trying to achieve.
For the best SEO performance, you should define fields that cover each individual parameter. For example, you might have a field for the robots follow/nofollow meta tag, and a separate one for robots index/noindex.
Limits and requirements
Headless CMS like Contentful also allow you to place character count limits on fields, so you can keep title tags and other metadata within a certain number of characters.
Finally, you can make fields mandatory and unique – so if metadata is replicated from another page, or missing completely, the editor will receive an error message and can make the necessary corrections.
Whether you do this using multiple fields within a single content type, or you use separate content types for even greater flexibility on the rendering side, is partly dependent on what capabilities you need your data to support, and partly a case of personal preference.
Putting it together
You can think of it as being like building a wishing well. The bigger the bricks, the faster and easier construction will be. But the smaller the bricks, the more perfect the circular shape will be.
The ‘right number’ of content types should be a middle-ground compromise that works best for you, so that you can build the website you want, without feeling like you are editing every paragraph, header and meta tag individually.
What about the frontend?
Just as there are several common headless CMS backends in popular usage, there are also some great frontend frameworks to choose from.
Two of the best are React and Vue, and these modern frameworks have, once again, been designed to work efficiently, load content quickly, and offer the best user experience to your website’s visitors.
Remember to take technical considerations into account. For example, pre-rendering your content can ensure it is fully visible to search engine crawlers, which might not be able to ‘see’ content if it is rendered on the client-side using JavaScript.
Final considerations
Once your headless CMS is implemented, make sure you get it properly audited by reputable web developers and especially by SEO experts, to ensure you haven’t missed a technicality that could affect your search rankings.
An example of this which is quite common with APIs is a proliferation of dynamic URLs for things like ecommerce categories, different sizes and colours of a product, and pagination of results.
By making all of these URLs visible to search engine robots, you risk consuming their crawl budget before they find the more valuable, static URL content on your site.
[Case Study] Managing Google’s bot crawling
Encourage your developers to implement static URLs where possible, and use the robots meta tags implemented in your headless CMS to block crawler access to unwanted dynamic pages.
Looking ahead
By taking all of the above into account, you can create complex and comprehensive website databases that can serve desktop sites, mobile sites and apps, smart speakers, AI chat bots, in-store info screens and many, many more types of device via the Internet of Things.
Future development work can yield instantaneous updates across the many different devices and platforms you publish data for, enabling faster, more positive return on investment from your SEO and content campaigns.
And much like the separation of content and design that came with Cascading Style Sheets (CSS) in the early 2000s, headless CMS gives you a more granular way to define, edit and render your content – helping you to achieve your SEO and ecommerce goals in a more managed way as you build your database over the months and years ahead.
