t's been a long time since I've posted an article and I can say that I missed it! Today, I am very happy to announce the release of the first SEO plugin!

Why? It's true, why make an SEO plugin? I could have improved our FoodAdvisor demo application or updated our outdated tutorials on v4!

More seriously, many of you ask how to properly manage your content so that it is SEO friendly. Indeed, Strapi does not generate views as a traditional CMS would. It is therefore difficult to have the feeling of having a direct impact on SEO. On Strapi, which is a Headless CMS, you only have access to the data. What concerns the front-end, i.e, the formatting which must please the search engine, is another distinct part that the content manager/editor does not have direct access to.

However, ensuring that your content is SEO friendly can and should be done upstream, during creation. It would therefore be interesting for you to be able to ensure that your content meets a few SEO criteria in order to rank on the SERP. Well, this is what this article is all about!

Disclaimer: This plugin has been developed internally but many other SEO plugins will emerge on our marketplace. It's up to you to use the one that best suits your needs. In any case, know that the ExFabrica dev team is currently working on another SEO plugin that works differently but can be combined with the one I'm about to present to you, which is just awesome!

Disclaimer: This plugin has been developed internally but many other SEO plugins will emerge on our marketplace. It's up to you to use the one that best suits your needs. In any case, know that the ExFabrica dev team is currently working on another SEO plugin that works differently but can be combined with the one I'm about to present to you, which is just awesome!

How it works The SEO plugin is divided into 2 parts:

Settings page This page will detect if you have a seo component in a shared category (shared.seo). For the v1 of this plugin, it was easier to define a classic and simple architecture in order to be able to reiterate more easily for a v2. The shared category means that it is a category of components containing components that can be shared among all the content-types of your application, which is the case of an SEO component.If such a component is not detected, then it will automatically import it inside your Strapi project.Otherwise, the plugin will list the Content-Types of your application with or without the SEO component. You will then be able to add your component for each Content-Type, being careful to name it: seo and include it at the first level (root) of your CT.

Modal in Content Manager It will then be possible for you from the content manager to have an SEO menu that will appear on the right in the right-links section when you have started to fill in your SEO component. IMAGE

This menu contains 4 things:

Browser preview button This will open a modal containing a SERP preview of your content based on the metaTitle and metaDescription fields. You can see the web and mobile preview :)

Social preview button This will open a modal containing a Facebook or Twitter preview card based on your metaSocial components in your content.

A Summary of your SEO results This allows you to quickly take a look at the results of SEO checks on your content. Note that you have to click on "SEE DETAILS" to update it.

SEO Checks The SEE DETAILS link button will open a modal containing all the SEO checks on your content. You'll be able to see what you can improve or fix for your content to be SEO friendly as it should be!

---

You will be able in the ./admin/src/translations folder to add the translations you want. This plugin has been translated into French only for now. Feel free to add any other translations :)

For the rest, it is very simple React code, the beginning is in the file ./admin/src/pages/HomePage. This file will contain the front-end of the plugin's Settings page. Then the part located in the content manager is managed by the SeoChecker component.

I don't think it's useful in this article to go deeper into the code. If you are more curious then I leave you the freedom to look at the source code of the plugin and do not hesitate to give any feedback or to directly contribute to the plugin, you are more than welcome!

See you later!