Sveltekit add a static sitemap

How to add a sitemap to sveltekit website

A sitemap is a tool that helps search engines better understand the content of a website, especially when there is a lot of it.

Before I share how to generate a sveltekit static sitemap, Remember that there are better ways to generate a sitemap. This is a noob way just to get the job done. This way requires updating the sitemap file manually after a certain interval.

The Sveltekit website has detailed documentation to generate the sitemap.

1. Create a folder named “sitemap.xml” inside the “routes” folder

2. Now create a “+server.js” file inside the “sitemap.xml” folder.

3. Now copy these codes inside +server.js file

js

export async function GET() 

{ return new Response( 
`<?xml version="1.0" encoding="UTF-8" ?> 
<urlset
      xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
      xmlns:xhtml="https://www.w3.org/1999/xhtml"
      xmlns:mobile="https://www.google.com/schemas/sitemap-mobile/1.0"
      xmlns:news="https://www.google.com/schemas/sitemap-news/0.9"
      xmlns:image="https://www.google.com/schemas/sitemap-image/1.1"
      xmlns:video="https://www.google.com/schemas/sitemap-video/1.1"
    >
      <!-- <url> elements go here -->
    </urlset>`.trim(),
    {
      headers: {
        'Content-Type': 'application/xml'
      }
    }
  );
}

4. We have to replace  this section with our manually generated URL

5. Now visit this website https://www.xml-sitemaps.com/ and paste your website URL on the search box This will generate a static sitemap

Manually generated sitemap

6. Copy the highlighted section & paste it inside the +server.js file

Sveltekit placeholder to place sitemap url

7. Now visit your www.yoursite.com/sitemap

Keep in mind this is just a noob way of getting the job done.