How to generate a Sitemap with a headless CMS?
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
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:
- RSS Feed
- Navigation Menus
- Pregenerate Pages
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.
Load all links
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.
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.