fbpx

Headless CMS and Strapi SEO best practices

Our community is looking for talented writers who are passionate about our ecosystem (jamstack, open-source, javascript) and willing to share their knowledge/experiences through our Write for the community program.

Are you looking to use a headless CMS that excels in terms of SEO? You came across the right article. In this post, I will explain to you how you can make Strapi the best content management system for your SEO.

What is a Headless CMS

A headless CMS is a back-end only content management system (CMS) built from the ground up as a content repository that makes content accessible via an API for display on any device.

Headless CMS are also particularly suitable for websites designed using the Jamstack model where JavaScript, APIs, and Markup work together to make web development easier and user experiences better. There is a real advantage to use the Jamstack to be successful in SEO. An article will be released soon on our blog, stay connected.

If you want to learn more about it, we published the Ultimate Guide to Headless CMS. Feel free to download it, it’s free 😉

The term Headless indicates that unlike a classic CMS, your content is not directly attached to a default front-end. By opting for a headless cms you are giving yourself flexibility as you can use Strapi with any front-end you want. You are free to consume your content with Next.js, Gatsby, Nuxt.js, Jekyll and more.

But on the SEO side, everything has to be created. It will be up to you to create an SEO friendly content. The customization and flexibility of Strapi will allow you to optimize your content structure and improve your website SEO.

I will show you the best practices that we internally established for our website which performs very well in SEO.

SEO Best Practices

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

We will see each of these aspects in more details below. I will create for this an empty Strapi project in which I will build the essential components for SEO.

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 Strapi, it is possible to generate a slug based on the name of your content.

I create a product content-type containing the following fields:

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.

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:

Let’s continue to improve our product content-type in order to implement these metadata.

https://assets.strapi.io/uploads/best_headless_cms_for_seo_6_869b96720c.png

https://assets.strapi.io/uploads/best_headless_cms_for_seo_7_d08b33d0dc.png

https://assets.strapi.io/uploads/best_headless_cms_for_seo_8_7efa924a29.png

https://assets.strapi.io/uploads/best_headless_cms_for_seo_9_4d1fa5b7a5.png

https://assets.strapi.io/uploads/best_headless_cms_for_seo_13_0a4ead56ea.png

https://assets.strapi.io/uploads/best_headless_cms_for_seo_14_186a101bb1.png

https://assets.strapi.io/uploads/best_headless_cms_for_seo_16_679f2ce65a.png

Perfect! This is a very good and simple implementation of metadata in a Strapi project. It will allow you to properly inform search engines about the nature of your content.

Then, on your front-end, you just have to create an SEO component that creates the necessary tags from these fields. Here’s an example in React:

Concerning the preventIndexing field. If you set it to false then in this example, we’ll render the specific tag to tell the search engines to not index the 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 Strapi 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.

Here’s what you can have on the front-end.

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 a headless cms.

So if you are asking yourself the following question: Which headless CMS should I use to have the best SEO?

The answer is: Any headless CMS can satisfy your SEO needs as long as you manage to create the necessary structure for it.

The questions you also need to ask yourself is: Do I want to maintain control over my data? Do I want to use an open-source solution driven by a growing and caring community? Do I want to use a solution that is part of the promising Jamstack movement?

Then in this case Strapi is the answer to all these questions and is indeed, The Best Headless CMS for SEO.

Get started with Strapi by creating a project using a starter or trying our live demo.
Also, join our academy to become a Strapi expert, and consult our forum if you have any questions. We will be there to help you.

Translate »