Contents

How to generate a Sitemap with a headless CMS?

Some of you already asked to receive a tutorial on this topic. So we will demonstrate how to use the Storyblok APIs to create a sitemap according to content-entries. We will use JavaScript to load the content and display it on a website to get you the idea.

Goal

We want to access to Links API to generate a sitemap for our project according to our content entries in Storyblok. To do so I’ll use the content of the Storyblok space: NuxtDoc. NuxtDoc is a NuxtJS setup that helps you get started with your own documentation pages. It includes a basic NuxtJS setup, Storyblok content structure and components and also a deploy step for Netlify

Let’s start

We will use the Links API of Storyblok. The It allows you to easily access all your content-entries without actually loading their content. Instead, you will have access to all properties you would need to create all kind of hierarchy structures like:

  • Breadcrumb
  • RSS Feed
  • Navigation Menus
  • Pregenerate Pages

and also a simple flat sitemap as we do in this tutorial. You can find a documentation for the Links API and all its parameters linked right here.

To get you started we will do a simple GET request to load a list of links. The structure of this is not an Array as the Stories collections since with the Links API you should be able to access all information of another content entries UUID instantly.

The result you can see above is an object with 25 properties. Each of those properties is one UUID (a reference to a content-entry or folder). To be able to load more than 25 we can either add the per_page parameter or (our recommendation) load it in a paged manner. Doing it like that you will never have to update the per_page parameter if you will have more than 1000 content-entries. You can check out the example code for this using Axios. We will use the total header of the response to generate all requests we need to perform and execute them to load our links. You can do the same with every other technology in a similar way.

Build the Sitemap

The final thing to do is to use those links to generate a sitemap. Since a basic sitemap will have elements that look like below. If you want to learn more about what you can do with a Sitemap make sure to read Google’s article: Learn about sitemaps and How to build a sitemap

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" 
  xmlns:image="http://www.sitemaps.org/schemas/sitemap-image/1.1" 
  xmlns:video="http://www.sitemaps.org/schemas/sitemap-video/1.1">
  <url><loc>https://www.example.org/</loc></url>
  <url><loc>https://www.example.org/home</loc></url>
  <url><loc>https://www.example.org/posts/post-1</loc></url>
  <url><loc>https://www.example.org/posts/post-2</loc></url>
</urlset>

In the next code example, I’ll output it with escaped HTML entities so you can see the result directly. However, you should make sure to output it as a proper XML or any other format you may choose after reading Google’s: How to build a sitemap.

Summary

You’ve now learned how to access the links API and use it’s content to generate a sitemap. We use the same approach to generate our Sitemap but with another technology. The same setup is also used in NuxtDoc to generate the routes we need to build out a static version of it. Since you also have access to the parent_id you can also build out breadcrumbs and whole menus. The best thing about it is that if you’ve routes from an e-commerce solution you can add those routes to the all_links variable and add them to your sitemap directly.


More to read...

About the author

Dominik Angerer

Dominik Angerer

A web performance specialist and perfectionist. After working for big agencies as a full stack developer he founded Storyblok. He is also an active contributor to the open source community and one of the organizers of Stahlstadt.js.