Add a sitemap to your server side rendered SvelteKit website

When my website, okupter.com, started to grow, I wanted to add a sitemap to it. I found a few tutorials online, but most of them were either for fully static websites (my website is a mix of both static and server-side rendering), or could not work in my context (my website content is fetched from DatoCMS).

I finally had to craft my own solution, by using insights from various tutorials, and other resources online.

This blog post is an attempt to walk you through the process of adding a sitemap to your SvelteKit website.

What is a sitemap?

You can see the sitemap as a source of truth for pages on your website, when and how often they are updated. In practice, the sitemap is a file that contains a list of URLs of your website, and some metadata about them.

One of the most common use cases for a sitemap is to improve SEO by healping search engines index your website. Search engines will crawl your website, and will use the sitemap to know which pages to index.

Here is a screenshot of the sitemap of my website on Google Search Console:

Google bots for example will regularly inspect the sitemap to know if some pages are updated or if new pages/content have been added.

The case for static websites

Static websites have basically all their content prerendered at build time. This means that the sitemap can be generated at build time. In most cases, if you're in a static website context, I'd recommend using a package that can handle the generation of the sitemap for you.

There are a few packages that can do that; the one I've experimented with is svelte-sitemap by bartholomej.

Sitemap for server-side rendered websites

If your website is server-side rendered, then the situation is a little bit more complex. A sitemap implementation will need to be aware at runtime of the pages that are available on your website. You can't just use a script that will analyze your static routes.

The most common usage I've seen for SSR SvelteKit content websites (and Jamstack websites in general) is to use a headless CMS to store the content of the website. This is interesting because you are able to get more information about your content from the CMS in your sitemap implementation.

API route for the sitemap

In SvelteKit, you can create API routes that export HTTP verbs like  GET ,  POST ,  PUT ,  PATCH ,  DELETE . These routes are accessible at the same URL as the page they are associated with. For example, if you have a  src/routes/api/hello.json/+server.ts  file that exports a  GET  function, then you can access it at  http://localhost:3000/api/hello.json  .

In our case, since we want a  sitemap.xml  file, our API route folder name will be  sitemap.xml .

Getting the list of pages/routes from the CMS

The first step is to get the list of pages or routes we want to include in the sitemap.

For me this includes the blog posts, the regular pages from DatoCMS ("About " and "Contact "), and other pages that are not in DatoCMS (like the blog index and the "Subscribe " page).

As you can see, most of these data are coming from functions like  getSitemapPosts  and  getSitemapPages . These functions are responsible for fetching the data from the CMS.

I'm planning in the future to use DatoCMS modular blocks feature to be able to have all the pages in the CMS, removing the need for manually including some pages in the source code.

Generating the sitemap

Once you have the list of routes to add to the sitemap, it's just a matter of looping through them and generating the XML.

The XML template I use is quite simple and allows me to add the  lastmod ,  frequency , and  priority  metadata for each route.

SvelteKit API routes return a  Response  object that you can of course customize to your need. In our case, we need to return a  Response  with a  Content-Type  header set to  application/xml  .

And that's it. You should now be able to access your sitemap at  http://yourwebsite.com/sitemap.xml http://yourwebsite.com/sitemap.xml .

A few observations

Frequency and priority

I arbitrarily determined the  frequency  and priority  of my sitemap entries. The  daily  frequency makes sense to me because I regularly update the content of my blog, create new entries, and experiment with new things on the website. The  priority  is also arbitrary, but I think it might be a good idea to have a higher priority for the blog posts, and a lower priority for the "About" and "Contact" pages.

Finding the sitemap file on your deployment platform

Depending on the SvelteKit adapter you are using, you might need to tell your deployment platform where to find your sitemap file. I'm using Vercel for this website, and I had to add a  vercel.json  file at the root of my project with the following content:

There is a  prerendered  path in the destination because all my routes are prerendered except a few ones like the blog posts.

Conclusion

I'm not sure if I've said this in a previous post, but I see this website as a playground and a digital garden to experiment, try things, and share what I learn. I hope this post will be useful to you if you are looking to add a sitemap to your server-side rendered SvelteKit website.