In-Depth SEO for Headless CMS
If you want your website or service to be found online, search engine optimization is key: Google and other search engines crawl the internet to essentially assess how well a specific website fits the users’ search query. To get to the top of the results page and drive relevant traffic to your site, SEO is your best option. There are several things you can do in your headless CMS to be easier to find, let’s dive right in.
Section titled What is Search Engine Optimization? What is Search Engine Optimization?
Regardless of whether you are using a headless CMS or not, some general best practices can help improve your SEO. It’s important to provide relevant content for users, choose keywords wisely, make sure your headlines help readers easily find the right section and not simply copy and paste content from other sites (content needs to be unique). In other words: search engines want to make sure their users are happy and get the best possible results for their searches. As well as crawling your page for specific search terms, it therefore also checks which other pages link to yours and whether it has “domain authority” and can be trusted as a source.
Section titled What’s the difference between SEO, SEM & SEA? What’s the difference between SEO, SEM & SEA?
While all the abbreviations might sound confusing, it gets a little clearer if you know what’s behind them. SEM stands for Search Engine Marketing, which is an overarching term for all efforts to improve visibility among the search results. SEO, Search Engine Optimization includes all activities which are done to generate organic traffic. SEA, Search Engine Advertising, however, describe activities that are paid for - like Google Ads. This can also improve traffic and visibility but simply falls into a different category. In short: SEM = SEA + SEO.
Section titled SEO for Headless CMS SEO for Headless CMS
In a traditional or monolithic CMS, editors can access and adjust metadata, title tags and descriptions on the fly. However, that doesn’t mean a monolithic approach is better for SEO, on the contrary: Set up correctly, the headless CMS approach can be even better, especially when it comes to omnichannel experiences.
To achieve this, there are a few things you can set up:
Section titled Add Metadata to your Headless CMS Add Metadata to your Headless CMS
Section titled SEO application SEO application
To enable a special field for managing SEO meta tags, Open Graph (Facebook) meta tags, and Twitter meta tags, you can install the Seo application.
In the Apps Directory {1} select the Seo application {2} and then install it. It enables a new custom type Plugin in the Plugin field type.
)
Section titled SEO Plugin SEO Plugin
An in-depth tutorial and video demo of how to use the SEO App can be found here.
There are a few different options to add metadata to your content to improve your SEO. The first one is Storyblok’s SEO Plugin which you can add to your app by following these steps:
- Install the SEO metatags plugin. Click on three dots {1} of your Story and select "Open in Block Library" {2}.
)
- In the Block library, in the Fields tab, add a new field to the schema of your page, filling the name {1}, selecting Plugin as field type {2} and the click to Add button {3}.
)
- Once the field is added, it is available in the list of fields of the page. To define its properties, select the new element from the list {1}.
)
- In the ‘Edit field‘ tab, for ‘Custom Type‘ select ‘seo-metatags’ {1}.
)
- Save, and now the authors can edit the title {1}, description {2}, and see the Google preview snippet {3} in the visual editor.
)
- By clicking on ‘Show/Hide advanced’ {1} you can also configure the OG image, OG title, Twitter description, and much more.
)
- Make sure you link the meta fields to your code - just like you do with your other content.
Section titled Creating Custom Fields Creating Custom Fields
If you require special fields for metadata or want to set specific validation rules (validation rules provided out of the box by Storyblok fields like the mandatory field, maximum characters, and regex validation), it might be a good option for you to create custom fields for SEO purposes.
Section titled Create nestable Components for SEO Create nestable Components for SEO
You can also create nestable components to store your metadata. This can be done through the ‘Block Library‘ tab {1} in your Storyblok Space.
- Add a new component by clicking the ‘New Block’ button in the top right corner {2}.
)
- Give your new component a name {1}, select ’Nested block’ {2}, and then click to ’Add block’ button {3}.
)
- Add the component fields, giving a name {1} and clicking the ’Add’ button {2}. Once you have created all fields, click the ’Save’ button {3}.
)
- Once the component is created, you can start using it, in your stories. Select the story you want to add the component to and make sure that the new component is whitelisted {1}.
)
- Now you can add your new component as you typically do for all other components. Once it's added you can edit its properties like Meta Text {1} and Meta Description {2}.
)
Make sure that your backend and data sources always reflect the changes you want to make in the frontend. If you add fields for metadata within Storyblok, you want to be sure these are also set up in your code.
Section titled Create your own Plugin Create your own Plugin
You can also create your own custom field type plugin to improve search engine optimization.
In the documentation of field types plugins, you can learn more about the topic. If you are looking for further examples, the field types plugin with Vue.js or the repository with examples from the community might be interesting to you.
In addition to the metadata, you can also improve your site's SEO score as well as overall usability by adding alt attributes to images and descriptive texts to links.
Section titled Security improves SEO Security improves SEO
We at Storyblok are serving everything through HTTPS - and you should consider moving your website to HTTPS as well if you can. An activated SSL certificate is one (of the many) ranking factors in Googles’ algorithm. But more importantly, it gives your users a feeling of security and forges trust in your services.
Section titled Fallback SEO Fallback SEO
You want to make sure that even if no detailed or specific information for SEO is given, like a preview image or a concrete meta description, at least there is something. This might be particularly relevant if you are dealing with a large number of pages. One way to make sure of that is setting a default value, that will apply if no other content is provided.
Section titled Performance Performance
Performance is one of the most important factors when it comes to search engine optimization - especially on mobile devices. This is where Headless CMS like Storyblok can shine. If you are interested in performance, you can read all about how to increase page speed with Storyblok in this article. While traditional CMS provide a lot of functionality out of the box or through additional plugins, they are also increasingly complex and therefore less performant. The fact that some of these plugins can be outdated harms both page speed and pose a security threat.
Section titled Jamstack saves the day Jamstack saves the day
By separating the content from the front-end as well as providing a decoupled backend, and delivering the pages through a CDN instead of sending requests to the server each time, the entire site is less complex, faster and more secure. It doesn’t matter however whether you decide to go for a SPA, SSG or SSR - all valid options for SEO with Jamstack.
Section titled Image Optimization Image Optimization
As already mentioned, performance and loading speed are crucial factors for SEO. This is why at Storyblok, we provide the powerful Image Service to generate highly optimized images in different formats and sizes for all the different endpoints you need. If the client supports it, the image service automatically compresses images in WebP format.
Another benefit of using the image service is that images are cached the first time they load - therefore they will load faster from there onwards.
Additionally, you can ensure that the ideal image sizes are provided, regardless of the users' device type by defining a source set for different viewports.
Section titled Lazy Loading Lazy Loading
Even more performant than exclusively loading images in the right size is not loading images that are (currently) not required at all. By lazy-loading images only when they enter the viewport, or using blurred placeholders for images before they are loaded, we can increase performance even further.
Section titled Asset Delivery through CDN Asset Delivery through CDN
Storyblok leverages a global CDN to deliver both content and assets like images, videos and documents.
Section titled Draw a map for Google’s crawlers - generate a sitemap Draw a map for Google’s crawlers - generate a sitemap
To help search engine crawlers identify the websites’ important content and grasp its structure, site maps are a useful overview of your website. You can use the Link API from Storyblok to access all your content entries through a simple GET request. If you are considering this as a next step, you might want to check out the article on How to generate a Sitemap with a headless CMS.
Section titled Create a network of Links Create a network of Links
To build up the “domain authority” mentioned in the beginning and position your site as a valuable source of information, it’s important to have other pages refer to it. This counts for both, internal and external sources linking to your page - as long as they are valid, working links. When you create these internal links with Storyblok’s native fields, these links will always be up to date - even if you change the URL of the linked entry. This is achieved through the resolve relations or resolve links feature, which gets the URL of the linked entry through the UUID.
Section titled SEO friendly URLs SEO friendly URLs
Another factor that goes into Google’s evaluation of your website is URLs. Generally speaking, you want to make sure your URLs are not too long, ideally contain relevant keywords and while its good to have some folder structure, don’t overdo it
Within Storyblok, you can change the slug of each page if required. You are also able to adjust the ‘Real Path’ - which overwrites the natural URL of an entry. The Advanced Path Plugin lets you programmatically change URLs at the folder level to further organize your content structure.
If you are thinking about making your URLs more SEO-friendly, translating slugs in a different language might also be interesting for you. You can read all about how to do that with Nuxt.js in this article.
Section titled Accessibility Accessibility
Generally speaking, what benefits performance and usability also improves the accessibility of your website - you are feeding two birds with one scone if you will. Faster loading times are great for users who don’t have a lot of bandwidth or are looking at your page from a mobile device. Screenreaders work very similarly to Google’s crawlers - therefore, using headlines and alt-tags correctly is a real asset to users of assistive technology. To learn more about how to improve your site's accessibility, read Christian’s article.