Headless CMS and Strapi SEO best practices

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 is 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 in using 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 the flexibility to use Strapi with any front-end you want. You are free to consume your content with Remix, Next.js, Gatsby, Nuxt.js, Jekyll, and more integrations.

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

Just in case you are clueless about what SEO or Search Engine Optimization is, it is nothing but the practice/process of getting your website to rank higher in search engines results.

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:

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

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

If you don’t have Strapi already set up, run the following command on your terminal:

    npx create-strapi-app@latest seo-tut

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.

Let’s 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 field.

To get started on creating the content types click on either the Content-Type Builder in the left sidebar or simply click on the blue button on your home dashboard.

Click on the Create new collection type.

Give the Display name as product and click on Continue.

Click on Text.

Give the Name field as name. This is going to be the name of the product. After that, click on Add another field.

Find UID from the field type list and click it to continue.

Give the Name field as a slug and select name from the Attached field dropdown and click Finish.

Click on Save to finalize and save the collection type. Wait for the server to reload.

Head over to the Content Manager, click on the newly created Collection Type, and let’s add a new entry.

Create a product of your own choice. For this tutorial, let's add a - My awesome product. While you type your product name, you will notice that the slug field is auto-generated.

Note: Just in case it hangs halfway while you are typing, click the Regenerate icon on the slug field.

We have completed creating the Product collection type. Now on your front end, 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.

Just in case you are new to Strapi and want to learn more about using it check out this Strapi v4 Crash Course by Laith Harb.

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.

Let's continue to improve the Product content type in order to implement this metadata.

Head back to the Content-Type Builder and click Add another field.

Find the Component field type and click on it to continue.

Let's name the component as Seo which belongs to the Shared category. Since the Shared category does not exist, typing it in the category form field will create it for us.

This way, any other content type will also be able to use this component. Click on Configure the component to continue.

Next, you will be prompted to add your fields, click on Add first field to the component to start adding our component fields.

Based on our discussion earlier, we are going to create three fields for this component:

• metaTitle - Contains the meta title tag. Type: Text
• metaDescription - Contains the meta description tag. Type: Text
• shareImage - Contains the image with the alternative text (alt) for the image. Type: Component

Let's go ahead and create all of these fields one by one:

You might be wondering how to create the shareImage component and might have thought about how can I add a component in a component. Well, Strapi is cool xD. It is not some sort of inception. The flexibility of Strapi is what makes it a powerful Headless CMS.

So, when creating the shareImage component, we can reuse the Shared category that we created earlier.

Go ahead and create the following fields in the SharedImage component

• alt - Type: Text
• media - Type: Media

After you have created the fields, go ahead and click Finish to finalize the component.

Easy right? Now let’s create a field to have a list of keywords. For this simply click the Add another field button and create a keywords Text field. This field will contain a list of keywords separated by commas.

Finally, let's add another field to prevent some content to be indexed. Simply follow the previous step and create a preventIndexing field of type Boolean (true or false).

Before you click on Finish, click on the Advanced Settings on the tab and change the default value to false and then click Finish.

Awesome! This content type is now SEO-friendly! Save and the changes and wait till Strapi restarts.

Now head back over to the Content Manager and edit the product you previously created.

Let’s go ahead and add some data to it.

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:

1const Seo = () => {
2  const { title, description, url, shareImage, keywords, preventIndexing } =
3    useContext(SeoContext);
4
5  return (
6    <Head>
7      <title>{title}</title>
8      <meta name="description" content={description} key="description" />
9      <meta name="keywords" content="{keywords}" />
10      <meta
11        name="twitter:card"
12        content="summary_large_image"
13        key="twitter:card"
14      />
15      <meta property="og:url" content={url} key="og:url" />
16      <meta property="og:title" content={title} key="og:title" />
17      <meta
18        property="og:description"
19        content={description}
20        key="og:description"
21      />
22      <meta property="og:image" content={shareImage} key="og:image" />
23      <link rel="canonical" href={url} />
24
25      {preventIndexing && (
26        <>
27          <meta name="robots" content="noindex"></meta>
28          <meta name="googlebot" content="noindex"></meta>
29        </>
30      )}
31    </Head>
32  );
33};

Regarding the preventIndexing field, if you set it to false in the Strapi CMS, then the React will render specific HTML meta tags to tell the search engines to not index the content:

1{
2  preventIndexing && (
3    <>
4      <meta name="robots" content="noindex"></meta>
5      <meta name="googlebot" content="noindex"></meta>
6    </>
7  );
8}

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 and 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 the JSON format.

To create a Single Type, head over to the Content Manager and click on Create new single type under the SINGLE TYPE section.

Give the Display Name as faq and click on Continue.

Find the JSON field and create the field with the name structuredData.

Click on Finish and save the single type and head over to the Content Manager to create a FAQ.

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

1const Microdata = ({ type, data }) => {
2  const structuredData = JSON.stringify(data);
3
4  return (
5    <Head>
6      <script type="application/ld+json">{structuredData}</script>
7    </Head>
8  );
9};

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.

To implement this, let’s set up a related product component in order to display a list of similar products on each product page.

Head back over to the Content Builder and edit the Product collection to have a component called RelatedProducts and a Products category. Since the Products category does not exist a new one will be created just like the previous components.

Go ahead and create a Text field with the name of the intro. This is going to be the heading in the frontend for the related products section.

After that, go ahead and create a Relation field. This is how we are going to choose which products are related to which. Since we have many products related to a single product, go ahead and click on the RelatedProduct has many Products relationship type.

Click on Finish and save the new changes.

Now head back over once again to edit the previously created product. You will see a new section for the newly created components. When you click on the components, the fields will be visible to allow you to add related products.

Before we add data to this section, go ahead and create some more products to link to this product. Once you have added more products, select and add them to this product.

Finally, here's what you can have on the front end:

Sitemap

One of the key elements of any website's SEO strategy is having a well-structured sitemap that accurately reflects the organization and hierarchy of the site's content. A sitemap is a file that lists all the pages on a website, making it easy for search engines to discover and crawl them.

Strapi allows you to generate a sitemap automatically based on their content types. This feature is made possible by a community-contributed plugin developed by Boaz Poolman 🎉 🙏

The Strapi sitemap plugin is highly customizable and allows developers to specify which content types and fields to include in the sitemap, as well as the frequency of updates. This means that the sitemap can be tailored to the specific needs of the website and its SEO strategy.

By automatically generating a sitemap based on your content types, Strapi makes it easy for developers to ensure that their website's sitemap is always up-to-date and accurate. This can help to improve the visibility of the website in search engine results and ultimately drive more traffic to the site.

Having a sitemap is an essential part of any website's SEO strategy, and Strapi makes it easy for developers to automatically generate one based on their content types, with the help of the community-contributed Strapi sitemap plugin. This can help to improve the visibility of the website in search engine results and ultimately drive more traffic to the site.

Conclusion

Now you should probably understand that a headless CMS like Strapi 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.

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, from enterprise SEO to eCommerce SEO, as long as you manage to create the necessary structure for it. Each CMS has a good alternative for it, depending on your specific needs. For example, you can migrate from Contentful to Strapi relatively easy, if you find that Strapi is what fits your needs.

The questions you also need to ask yourself are: 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?

If the answer to these questions is Yes, then Strapi is your best bet and is in indeed, The Best Headless CMS for SEO.

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