Add a sitemap to your server side rendered SvelteKit website
Justin Ahinon
Last updated on
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
.
Learn more about API routes in the SvelteKit documentation.
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).
code loading...
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.
code loading...
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
.
code loading...
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:
code loading...
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.