Generating dynamic sitemaps in SvelteKit

Introduction

Sitemap.xml is an essential file for any website that helps search engines index and understand its content. Search engines like Google use sitemap.xml to crawl your website and gather information about the pages, links, and content on your site. In this post, we will explore how to create a dynamic sitemap.xml using SvelteKit, a server-side rendered framework.

What is SvelteKit?

SvelteKit is a popular framework that provides a modern and efficient way to build web applications. It offers a lot of benefits compared to other frameworks, such as being fast, easy to learn, and lightweight. In addition, SvelteKit makes it easy to generate URLs from slugs, which is a common task in server-side rendered frameworks. This makes it an ideal choice for creating dynamic sitemap.xml.

Why use SvelteKit?

Using SvelteKit to create your sitemap.xml file has several benefits over traditional methods. First, it allows you to dynamically update your sitemap.xml file as your website changes, so you can always ensure that search engines have the most up-to-date information about your site. Second, SvelteKit provides a more efficient and streamlined approach to building web applications, so you can focus on delivering a great user experience, rather than worrying about the underlying technology.

Initializing a new SvelteKit Project

The easiest way to create a new SvelteKit project is by using the CLI:

npm create svelte@latest my-app
cd my-app
npm install
npm run dev

Creating the Sitemap

Understanding the sitemap.xml structure

A sitemap.xml file consists of a series of URLs, each of which represents a page on your website. The URLs in the sitemap.xml file should be complete and accurate, as this helps search engines understand the content on your site and improve the search ranking of your pages. The basic structure of a sitemap.xml file is as follows:

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.example.com/about</loc>
    <lastmod>2023-02-03</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.7</priority>
  </url>
  <url>
    <loc>https://www.example.com/blog</loc>
    <lastmod>2023-02-03</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.3</priority>
  </url>
  ...
</urlset>

Each 'url' element in the sitemap.xml file represents a page on your website and contains four elements: 'loc', 'lastmod', 'changefreq', and 'priority'.

• loc: The URL of the page on your website.
• lastmod: The date when the page was last modified.
• changefreq: The frequency with which the page is expected to change, such as daily, weekly, monthly, etc.
• priority: The priority of the page relative to other pages on your site, where 0.1 is the lowest priority and 1.0 is the highest priority.

Creating the sitemap.xml on GET-requests

Next, you'll need to write the code for your sitemap.xml route. This will define the structure and content of your sitemap.xml directory. To do this, create a new directory in your project directory called routes/sitemap.xml.svelte. This directory will define your sitemap.xml route. Inside your sitemap.xml-directory, create a file called +server.js where we will serve the sitemap on GET-requests.

const posts = [] //list of posts containing a slug [{title: "Test title", slug: "test-title", updatedAt: "2023-01-01"}]

const pages = [] //list of pages as a string ex. ["about", "blog", "contact"]

const site = 'https://www.example.com'

/** @type {import('./$types').RequestHandler} */
export async function GET({ url }) {
  const body = sitemap(posts, pages)
  const response = new Response(body)
  response.headers.set('Cache-Control', 'max-age=0, s-maxage=3600')
  response.headers.set('Content-Type', 'application/xml')
  return response
}

const sitemap = (posts, pages) => `<?xml version="1.0" encoding="UTF-8" ?>
<urlset
  xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:news="https://www.google.com/schemas/sitemap-news/0.9"
  xmlns:xhtml="https://www.w3.org/1999/xhtml"
  xmlns:mobile="https://www.google.com/schemas/sitemap-mobile/1.0"
  xmlns:image="https://www.google.com/schemas/sitemap-image/1.1"
  xmlns:video="https://www.google.com/schemas/sitemap-video/1.1"
>
  <url>
    <loc>${site}</loc>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  ${pages
    .map(
      (page) => `
  <url>
    <loc>${website}/${page}</loc>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  `,
    )
    .join('')}
  ${posts
    .map((post) =>
      post.visible
        ? null
        : `
  <url>
    <loc>${website}/blog/${post.slug}</loc>
    <changefreq>weekly</changefreq>
    <lastmod>${post.updatedAt}</lastmod>
    <priority>0.3</priority>
  </url>
  `,
    )
    .join('')}
</urlset>`

Conclusion

In conclusion, Sitemap.xml is a crucial file for any website as it helps search engines understand and index the content on the site. SvelteKit provides an efficient and modern way to create a dynamic sitemap.xml by utilizing its server-side rendering capabilities. By using SvelteKit to create your sitemap.xml, you can ensure that search engines have up-to-date information about your website and can focus on delivering a great user experience. The process of creating the sitemap.xml with SvelteKit involves understanding its structure, initializing a new SvelteKit project, and creating the sitemap.xml file on GET-requests.