Headless CMS and Core Web Vitals: Why You Should Be Concerned about This

There is a lot of buzz around using a headless CMS for your web properties. For all the conversations out there about the benefits of headless CMS for managing content what does it mean for your SEO? If you had that question in your mind you came across the right article. In this post, I will explain to you how you can use a headless content management system for your SEO.

What is a headless CMS

A headless CMS is simply a different kind of content management system for web properties. It does what you think it would, simply put it provides a way to author content, but instead of having your content coupled to a particular output (like web page rendering), it provides your content as data over an API.

The “head” relates to where your content ends up, and the “body” is where your content is stored and authored. This might sound a little strange at first, but the point of a headless CMS isn't that you don't want or need a head, it's that you get to pick and choose which heads (outputs) you send your content to.

In the last few years, we have seen an uptick of CMSes that try to be more flexible in their ways of making content available. These are usually called “Headless” or “API-first” CMSes. Some of them market themselves as “Content infrastructure,” “Content Hubs” or even “Content as a Service.” However, when you take a closer look, they all pretty much boil down to some database backend with a web-based user interface, and content made accessible through an API.

Headless CMS vs Traditional CMS

As opposed to headless, a “traditional CMS” is software that you either install and have to manage on your own, or on a managed server environment. Traditional CMSes are also called “monolithic” because they pack all the functionality and assumptions for how you want to work into a single system.

Traditional CMSes often provide a “What You See Is What You Get” (WYSIWYG) content editing interface because they only have one context for presenting the content – usually a web page.

How does a Headless CMS work?

A headless CMS works by:

1. Giving editors an interface for managing content.
2. Providing that content via APIs for developers to query and build applications with. Most headless CMSes are offered as a Software as a Service (SaaS), meaning that your editors will have to log into a web application and that the APIs are hosted in a cloud-based backend. Some headless CMSes will let you host the whole solution on your own server and database. This model means you have to do your own scaling and operations.

What are SEO Best practices

When you want to create content for your website, you must take into account certain aspects:

• The construction of urls
• Metadata and Media
• Structured data
• Content clustering

We will see each of these aspects in more details below.

Construction of urls

The urls of your content are very important for the search engines which will crawl your website. Indeed it is important to use slug rather than id for your URLs. Bad: example.com/products/1234 Good: example.com/products/my-awesome-product

With a headless CMS, it is possible to generate a slug based on the name of your content. I create a product content-type containing the following fields:

• name as Text.
• slug as UID attached to the name field.

This will automatically generate the slug from the name of the article. Then on the front side, you'll be able to create your pages according to the slug of your content.

Create pages with Gatsby. Create pages with Next.js.

Don't forget. Keeping URLs as simple, relevant, compelling, and accurate as possible is key to getting both your users and search engines to understand them.

Metadata

Metadata is very important to search engines. Not visible to visitors (unless the title), they help search engines determine what your page is about. The main tags are:

Title

• No more than 60 characters!
• Try to include (1-2) keywords in the title.

Description

• No more than 155 characters!
• Try to place essential keywords (2-3).

Keywords

• Keywords of what your content is about.

Robots

• Handles how search engines behave with your content.

Structured data

You can help search engines by providing explicit clues about the meaning of a page by including structured data on the page. Structured data is a standardized format for providing information about a page and classifying the page content.

Suppose we have an FAQ page on our site. For that, we would like to add structured data to it in order to be able to get a rich FAQ result like this.

Let's assume that your FAQ is a Single type in your headless cms project. In this case, you just need to add a JSON field in which you can put your structured data in JSON format.

Then on the front-end side, nothing could be simpler, you can have a component like this:

Content clustering

A content cluster strategy uses topic modeling and internal linking to improve the user experience of your content and boost your search performance.

I, therefore, suggest that you set up a "related product" component in order to display a list of similar products on the page of each product.

Website Performance

Using React or Vue – SEO is in your hands.

Although loading speed definitely favors single-page applications built with React and Vue, there are a few SEO challenges that can be avoided if you take the necessary precautions.

Adding a component for your metadata is essential. However, a JavaScript-powered web application that renders dynamically on the client-side may not be crawled and indexed at all. Components that are not properly read will be assumed to be empty. Here are some measures to properly manage your metadata:

• To manage the metadata of a React web app, take a look at React Helmet. A component like React Router will make the URL structure of your website more search engine friendly by creating paths between different pages.
• If JavaScript is disabled on the client-side, you can look into Isomorphic Javascript technology, which runs JavaScript on the server-side before sending it to the client. Alternatively, a tool like Prerender will pre-render the website and return the content in full HTML.

Optimize images

Optimize image size in your headless CMS. You can pre-define the desired maximum size of your image assets in your GraphQL query. Even if an inexperienced content creator uploads a large image to the CMS, your precautions will take care of fast loading times.

Make use of Lazy Loading of images and video. The most essential content is downloaded first and only when required do media resources get fetched. Page size goes down, page load time goes up.

Use images in the SVG or WebP format. They are vectorized for the best quality and optimized in size for the fastest loading possible.

Add Open Graph metatags for your images. Users get a quick visual summary of your content, so Google loves them.

HTTPS Everywhere

Secure your communication with users by upgrading to HTTPS. Users are more conscious about websites that aren’t secure by default, and with Google marking HTTP websites as insecure, there’s no excuse to avoid adding that layer of encryption and security.

Webriq's DXP Studio

Now you should probably understand. A headless CMS allows you to completely customize your front-end without compromising on SEO. It is necessary to know the good practices but this aspect is absolutely not put aside when using headless cms.

To make things even easier, we here at Webriq have newly launched our newest service - DXP Studio.

This is a landing page builder and microsite builder that takes full advantage of the Headless CMS setup and is made available to everyone who wants to create website pages without headaches.

All you have to do is choose the right website elements and components amongst the choices available and build your site from the ground up without having to deal with clunky codes and other tiresome stuff.

With this, you can focus on creating impactful landing pages and microsites for marketing purposes or to aid your larger e-commerce sites.

Want to know more about what headless CMS and our DXP studio can do for you? Get in touch with us and request access here.