How the Strapi Marketing Team Uses Strapi

Why our Marketing team is using Strapi

You have just landed on this article and there are several reasons for that:

• You are a member of the Strapi community and you read our articles on a regular basis. I'll just let you know that we love you more than chocolate 🍫
• You are an Engineering leader and you try to convince your marketing colleagues that Strapi can be a good solution for managing content. This article will help you to do so!
• You are a member of a marketing team and you are evaluating Strapi to find out if it will meet your needs. This article will facilitate your research.

In this article we will cover how our own marketing team uses Strapi on a daily basis to manage the content of our website because yes, in case you did not know, strapi.io is made with Strapi and The React Framework for Production: Next.js.

On the menu for this article: Customization, SEO, Preview, Landing Pages, Webhooks, Collaboration, and just about everything you need to unleash your creativity. Let's start without further delay!

Strapi is a developer-oriented CMS

Eh! Where are you going!

You will understand why, from a marketer's point of view, Strapi has a lot of advantage. In case you did not know, Strapi is a headless CMS which is:

• Open-Source: Anyone can contribute to the source code and thus help, improve, fix issues, propose ideas, etc... Thanks to the community efforts, Strapi will always stay updated and product requests have more chance to be met. The project evolves next to the community and it is priceless. Beyond the code contributions, our community create a lot of educational resources like articles thanks to our Write for the Community program, videos on youtube, webinars, or plugins & providers that you'll probably use at some point: Awesome Strapi repository
• Self-Hosted: This is your technical team that will choose where your Strapi application will be hosted to be available on the web. Whether it is on AWS, Digital Ocean, Heroku, or your own servers. You keep control over your data. This is and will be more and more important as you scale and need to ensure data governance and privacy.
• 100% Javascript: As a marketing person, you probably do not see the advantage of Javascript but your CTO probably will. By using this programming language, we take part in the modern way to build websites and apps that delivers better performance: The Jamstack. Just mention to your engineers that Strapi is based on Node.js and React 😉
• Customizable: This is the most important advantage. Strapi is open-source, your technical team has access to the code, they can do whatever they want and whatever the marketing team wants. We have seen admin interfaces completely modified by customers and it's pretty impressive, to be honest. You can read more about customization at the end of this article

But why is this an advantage for the marketing team?

We work every day to facilitate the developer experience and ensure that they can build a Strapi application that is: customizable, well structured, scalable, quick and easy so that you can manage the content in a fluid and flexible way.

It would be great to have an example of a company using Strapi to manage its content...

Using Strapi at Strapi

We have rebuilt our website a year ago and we decided to use Strapi for the Backend (obviously) and Next.js for the frontend. It has been made by the Web agency Unlikely.

Our Marketing team has the same needs that many of our customers have, so writing this article was therefore quite easy. Here are the most important topics:

• Customization
• SEO
• Landing pages
• Preview
• Webhooks
• Collaboration

Customization

Customization is without a doubt Strapi's biggest advantage.

Indeed, assume that you can do almost anything you want on your Strapi application. You want to change the default WYSIWYG editor? Go ahead, it's entirely possible. You want to include a guided tour in the admin to onboard your content managers? That is what we did on our FoodAdvisor demo app. You want to be able to schedule the publication of your content? Create a publish_at field and insert a custom code that will use the cron feature to publish your data. This might be too technical for you so I will let your engineers follow the guide for this exact use case: Schedule publication in Strapi.

You own the code. I mean not you, your developers, but what I want to say is that we offer you the flexibility to do whatever you want with your Headless CMS.

I was able in FoodAdvisor to include a Preview button in the content manager and to create a guided tour plugin using react-tour package. Without it, I should have waited for these features to be released.

This is what we mean when we define ourselves as a product to Unleash Creativity. We put in your hands a customizable product, you do the rest and the community will be there to help you.

Now before I talk about SEO, I have to tell you something. I always try to provide as many answers as possible to simple questions asked by the community or potential users in order to reassure them that Strapi can be a solution for their project.

Many of them use Strapi without knowing what it is exactly or how it works. There was a time when many of them asked us the following question: Can I use Strapi with (x frontend framework/programming language) like React, Angular, Ionic or Python. The answer is obviously yes since Strapi is a CMS that allows you to consume its content via an API. If you use a technology that allows you to perform HTTP requests then yes, you can use Strapi as your data source. I wrote an article about it: Integrate Strapi with everything.

I also created several integration pages on the website as well as documentation pages containing actual examples of connections with various frontend frameworks/programming languages.

And you know what? Nobody asks this question anymore, or at least, not directly to me. I am both happy because I know that users now understand a little better what Strapi is and how it works (but I'm sad because no one speaks to me now...)

Why am I talking about this?

Well, the SEO topic is exactly the same thing. Many of you ask if using Strapi is SEO Friendly for your website/application. The answer is obviously yes, yes, yes, yes and yes.

So I will once again try to create useful resources on our website to prove to you that yes, Strapi is SEO friendly although it depends on you!

SEO

Let's take an example: You want to list articles on your application. You will probably have a collection-type article that will contain various fields:

• title (text)
• description (longtext)
• image (media) etc...

Now, consider that each article in your Strapi application will have its own page on the frontend. Well, for this page to be SEO Friendly, you will simply need to implement the necessary fields like a meta-title, meta-description, meta-image or a boolean (true/false) for indexing the page or not. Don't forget to set some rules like a character limitation for your meta-title and meta-description fields.

It's not more complicated than that! Do not forget, Strapi allows you to create and manage the data that your frontend will receive. The biggest work here is to think about the architecture of your data from the beginning to avoid your technical team iterating several times on it. It is therefore a question of planning with your developers, what are the fields you will need for the SEO, your developers will take care to implement them in Strapi. You can, for example, see with your technical team how you can automatically fill a structured data JSON field when creating your content.

Disclaimer: Your frontend and only your frontend will be the application that will need to perform on Google search results. Strapi will just provide the data for your frontend through its API. Many people think that the SEO of the Strapi application is important. Unless you want your CMS to rank on search results, which is a terrible idea, the SEO performance of your Strapi application deosn't matter. And therefore, the fact that Strapi is made using JavaScript is not in any way a disadvantage to your website. However, Javascript leads to faster API response time which together with static site generators frontend can lead to lightning-fast website which is definitely important for SEO.

I encourage you to send this article that I wrote to your technical team concerning some good SEO practices in Strapi. These are just the basics, feel free to go further in customization. These are practices that we have obviously used in our website as well as on Foodadvisor, our live demo.

According to SEMRush, our website health is 7% above the sites of our category 😎
It is based on the number of our total errors and total warnings that were found on the pages crawled on our website.

Landing pages

Having the ability to create landing pages is very important for any marketing team and this is absolutely possible with Strapi. Indeed a collection type can represent any type of data for your application, it can be an article, a product, a category, or even a page.

Let's go back to the example used above. You want to list articles on your website. You will therefore have a page listing these articles as well as a page for each article. This logic and architecture will be done at the frontend level, no need to go into details, your engineering leader knows 😉

However, you want to be able to have more generic pages like an /about-us, /pricing, or a /contact page. For that, it's very simple, you just need to create a Page collection-type. This will allow you, as for articles, to create several pages according to your needs.

Note: We are calling it Page in this article but feel free to call it how you want.

Here is a list of some of our landing pages on our website:

Feel free to visit them with by prefixing the slug with https://strapi.io/

Here is a list of 56 components that can be included in each of our page.

It is at this precise moment that I must tell you about the very powerful feature in Strapi that makes it possible: The Dynamic Zones.

This feature has scared a few. What is it exactly? What is it used for and how does it work? Let's try to cover all these questions!

Before coming to the Dynamic Zones, I must, first of all, tell you about two things:

• The fields of your content-types in Strapi.
• The Components.

Fields

When you create any content-type in Strapi, you define the fields it will contain. It's simple, for an article collection-type you will have for example:

• title (text)
• description (longtext)
• image (media) etc...

It turns out that we, developers, don't like to repeat ourselves at all. So when we create a product we also make sure that the people that will use it will not repeat themselves. This is why we created components.

Components

A component is a set of fields that can be used in any content-type. Let's say your Article and Category collection-types both share meta-title (text), meta-description (longtext), and meta-image (media) fields. Then it will be preferable for you to create a component containing these 3 fields named seo. Then use it for your two collection-types. So you don't repeat yourself! Easy right?

When you include a component in a content-type it will definitely be included. It sounds weird but once added, it will always be there. So the example of the SEO component is perfect, there is no problem but what if I sometimes, you want to include a component and sometimes you don't want to? Do you see the transition coming?

Dynamic Zones

A Dynamic Zone are "blocks" that, first of all, allows you to include a specific list of components in a content-type.

Let's say that I delete the SEO component of the Article collection-type previously created and I want to be able to include it or not in certain articles.

To do this, I create a Dynamic Zone in the Article collection-type and I simply include the SEO component there. If I go to any article, a little "+" button appears at the bottom of the content manager page. I just have to click on it to create a new "block" and select my SEO component. Then, I just need to fill the fields for my article to be SEO-friendly.

This is what a Dynamic Zone is used for dynamically include components in your content-types. That's it. - Me

Now imagine a Page collection-type containing a Dynamic Zone including components such as:

• Hero,
• Top Features,
• Step By Step Guide,
• Integrations,
• Reviews,
• CTA and more...

Well, that's exactly what we have on our website. (I'm not kidding, feel free to check our homepage).

We use Dynamic Zones to generate particular sections of our pages. It allows us to include or not specific components depending on the page. This way you can see that even if the majority of our pages are part of a Page collection-type, they don't display the same content, the same components.

This identical system is on FoodAdvisor with components such as:

• Hero,
• Features,
• Testimonial,
• Features With Images,
• FAQ,
• Team,
• CTA

The pricing page also has a Dynamic Zone but you can decide to include different components such as Pricing Cards.

I really hope that Dynamic Zone has no more secrets for you. If you are convinced by this feature, share the message with us on Twitter with the #StrapiDynamicZones 🐦

A tutorial on how to create landing pages using Strapi is coming soon 😉

Preview

The preview system allows us to visualize the content even before it has been published. As you know, Strapi is a Headless CMS. It means that we do not generate pages for your data. In fact, it will wait patiently at the edge of a beautiful lake to be fetched by a React, Python or Ionic application. We are almost certain that your technical team has already developed a nice frontend ready to consume this data.

There is therefore no native functionality allowing you to view your new article on your frontend since they are not connected by default. This connection must be created but I guarantee you, it is extremely simple, at least I know that your technical team can do it while drinking a coffee.

Here is a tutorial on How to Implement Previews with Next Applications using a Strapi backend that will surely be very useful to your engineers.

However, I told you that Strapi is largely customizable. I did not lie! It is quite possible to include a preview button in the content manager allowing you to open a page of your frontend in preview mode. This is a system that is currently in place on our FoodAdvisor demo.

Can you see the Preview button on the right bottom card? This will open this page on my Next.js frontend:

This demo is not bad at all!

Webhooks

I hope I haven't scared you with this one. If you don't know what it is, a webhook allows you to send information to another application for a particular event. In Strapi, you have the possibility to send a webhook to Zapier for example when you publish content, create, edit or delete some.

You can, for example, set a webhook to publish a tweet via Zapier when you create a new article in your Strapi application. The possibilities are endless, only your imagination is the barrier.

This one is for your CTO: It is also possible to use webhooks to build your static site generator when you publish data or simply by manually activating the webhook. This is exactly what we do at Strapi. A webhook allows us to build our Next.js site on Vercel directly from the Strapi admin which means that our team can decide when we can refresh the content of the website.

Collaboration

Our role in Role Based Access Control feature makes it possible to establish a collaboration system between the members of your teams. You can manage the reading, editing and publishing rights to your Strapi Admin Interface. Review and publish drafts but also share access to the necessary content only.

Here is what the interface of a Super Admin looks like:

Here is what an author user will see according to the permissions that will be attributed to him by the Super Admin:

This will allows you to align roles with the organizational workflow and help your team do their job more efficiently and autonomously. Feel free to read our user story of how Continuum delivered a corporate website for Banco Internacional with 30 custom roles

An easy way to start implementing an approval workflow process within Strapi could be to disable the Draft & Publish native feature and add a "State" enumeration field in a "Settings" components, mandatory in all new entries, that list the different states of your content.

Once the article is saved, a trigger is activated so the content is moving to the new state. And the Team that has the rights can now access the content.

Strapi's RBAC feature is fined (thanks to the 'custom conditions') enough to allow specific users to move content to a specific state. For example, the "Approval Team" can be the only team allowed to push the content in the "rejected state"

I redirect your engineers to a project that one of our Solution Engineer, Derrick Mehaffy did to show two different methods for more complex draft workflows.

Conclusion

We have always published articles more or less oriented for developers because they are the ones who use Strapi in the first place. It is very easy for them to understand the advantages and disadvantages of Strapi and we can actually communicate using code blocks. However, this is less the case for members of the marketing or growth teams. That's why I wanted to write this piece of content in order to try to answer the questions of many non-tech people about the most requested topics.

Our Marketing team uses Strapi with all the features seen in this article. We use it because it is simple, fast, convenient, beautiful and it allows us to easily create content for our website. We are confident that it is SEO friendly, we have the flexibility to create pages on the fly and dynamically define which content will live on these pages. We have different environments (staging, production) to help us improve our deployment experience and we can publish new content in less than 3 minutes.

If you want to get a taste of what we can do with Strapi, just browse our website! The data comes from Strapi and the design comes from a Next.js application. We are thinking about open-sourcing it soon. You are currently on our blog, continue your journey by discovering our showcase, our user stories, and our career page (we are recruiting).

Give a try to our brand new FoodAdvisor demo application or feel free to contact a member of the sales team if you need more information or a personalized demo. I wish you an excellent day and see you in a future article.