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
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
Static Pages: The
pages
array defines the paths you want in the sitemap (e.g.,/
and/about
) along with theirlastmod
dates.Dynamic Sitemap Generation: Each page is dynamically converted into
<url>
tags using JavaScript'smap
method.Headers: The response includes the
Content-Type
header set toapplication/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!