How to Create a Sitemap for Your SvelteKit Project

Learn how to create a dynamic sitemap in SvelteKit to improve your website's SEO and ensure efficient search engine indexing. Step-by-step guide with examples.

How to Create a Sitemap for Your SvelteKit Project

How to Create a Sitemap for Your SvelteKit Project

Every website can benefit from having a sitemap.xml file. A sitemap helps search engines like Google discover and index your site's pages efficiently. In this post, we'll walk you through creating a sitemap route for your SvelteKit project. Additionally, we'll discuss the significance of the lastmod tag and when you should include it.


Step 1: Creating the sitemap.xml Route

First, you need to create a route that serves a dynamically generated sitemap. In your SvelteKit project, create a folder sitemap.xml inside the routes directory, and within it, add a +server.ts file. Here's a simple example in JavaScript:

const baseUrl = "https://example.com"

export async function GET() {
    // Define your static pages
    const pages = [
        { url: '/', lastmod: '2024-12-15' },
        { url: '/about', lastmod: '2024-12-10' }
    ];

    // Build the XML structure
    const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${pages
    .map(
        (page) => `
    <url>
        <loc>${new URL(page.url, baseUrl}</loc>
        <lastmod>${page.lastmod}</lastmod>
    </url>`
    )
    .join('')}
</urlset>`;

    return new Response(sitemap, {
        headers: {
            'Content-Type': 'application/xml'
        }
    });
}

Explanation

  1. Static Pages: The pages array defines the paths you want in the sitemap (e.g., / and /about) along with their lastmod dates.

  2. Dynamic Sitemap Generation: Each page is dynamically converted into <url> tags using JavaScript's map method.

  3. Headers: The response includes the Content-Type header set to application/xml to ensure browsers and search engines correctly interpret it as an XML file.

When you visit /sitemap.xml, the generated XML file will be served to the browser or search engine crawler.


Step 2: Understanding the lastmod Tag

The lastmod tag is optional, but it can play an important role in specific scenarios. Here’s a breakdown:

When lastmod is Important

  • Dynamic Content: If your site has frequently updated pages, lastmod helps search engines know when the content was last updated, prompting them to reindex it.

  • SEO: It can signal freshness, potentially improving your ranking.

  • Efficient Crawling: Search engines prioritize re-crawling pages with recent updates.

When lastmod is Less Important

  • Static Content: For pages that rarely change, such as a portfolio homepage or contact page, search engines will generally revisit the pages without needing a lastmod tag.

  • Small Websites: For small sites, search engines can easily crawl all pages without relying on lastmod.

Example Without lastmod

If you decide not to use lastmod, your sitemap could look like this:

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
        <loc>https://example.com/</loc>
    </url>
    <url>
        <loc>https://example.com/about</loc>
    </url>
</urlset>

Conclusion

Adding a sitemap.xml to your SvelteKit project is a simple yet effective way to improve its discoverability by search engines. While the lastmod tag is optional, it’s a good practice to include it if your content changes regularly. Even for static sites, having a sitemap ensures your pages are indexed correctly.

Take this guide as a starting point, and customize the sitemap to fit your project's needs. Happy coding!

Follow Us

Connect with us on social media to stay updated on our latest news and offerings.