Implementing Sitemaps with SvelteKit using sveltekit-sitemap

If you’re developing a website with SvelteKit, you might want to add a sitemap to help search engines index your content efficiently. Thankfully, there’s a plugin designed to make this process straightforward – sveltekit-sitemap.

Here’s a step-by-step guide on how to implement a sitemap with SvelteKit using the sveltekit-sitemap plugin:

1. Installation

Install the plugin using npm:

npm install Joonel/sveltekit-sitemap

It’s worth noting that the sveltekit-sitemap library from Joonel’s repository is a fork of the original beynar’s sveltekit-sitemap. Joonel’s version includes more bug fixes, making it a preferred choice for stability.

2. Add the Vite Plugin

To integrate the sitemap functionality with your SvelteKit project, you’ll need to add the sitemapPlugin to your Vite configuration. You can do this by editing the vite.config.js file:

import { sveltekit } from "@sveltejs/kit/vite";
import { sitemapPlugin } from "sveltekit-sitemap";

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [sveltekit(), sitemapPlugin()]
};

export default config;

3. Make use of the Sitemap Hook

After integrating the plugin in the Vite configuration, it’s crucial to know how it interacts with the routes in your SvelteKit application.

The sveltekit-sitemap library automatically generates a sitemap.ts in the ./src directory. This file includes definitions derived from the static routes defined in your SvelteKit application. You don’t have to manually create or edit the sitemap.ts, as the library automates this process.

You can harness this auto-generated sitemap by incorporating the sitemapHook within your hooks.server.ts:

import type { Handle } from "@sveltejs/kit";
import { sitemapHook } from "sveltekit-sitemap";
import { sitemap } from "./sitemap";

export const handle: Handle = sitemapHook(sitemap);

The sitemapHook also supports dynamic generation by accepting a second argument. This argument is an object with a method named getRoutes, which is an async function allowing you to fetch data and construct your sitemap routes dynamically.

Here’s a comprehensive example:

import type { Handle } from "@sveltejs/kit";
import { sitemapHook } from "sveltekit-sitemap";
import { sitemap } from "./sitemap";

export const handle: Handle = sitemapHook(sitemap, {
  //...
  getRoutes: async (event) => {
    const blogs = await event.locals.api.getBlogsForSitemap();
    // ^-- make async api call to get fresh data

    return {
      "/about": {
        path: "/",
        priority: "0.8"
      },
      // ^-- Static routes are automatically added to the sitemap. But if you want to customize them, you can return a route definition object.
      "blogs/[handle]": blogs,
      "/products/[id]": [
        { path: "/products/test-1" },
        { path: "/products/test-2" },
        {
          path: "/products/test-3",
          changeFreq: "Monthly",
          priority: "0.8",
          lastMod: "2023-01-01",
          image: {
            url: "https://picsum.photos/200/300",
            title: "test-1",
            altText: "image-product-test-1"
          }
        }
      ]
      // ^-- For dynamic routes you have to return an array of route definitions
    };
  }
});

1. The getRoutes function allows for dynamic fetching of data. The event.locals.api.getBlogsForSitemap() is an illustrative example of how you might fetch fresh blog data forthe sitemap.
2. Static routes, like /about, are already auto-included in the sitemap. If you want to customize their attributes, like priority, you can explicitly define them in the returned object.

By using this setup, you ensure that your sitemap dynamically adjusts based on the most recent content of your SvelteKit application, enhancing the accuracy and relevance of your sitemap for search engines.

Conclusion

Adding a sitemap to your SvelteKit application can significantly boost your SEO by making it easier for search engines to find and index your content. With the sveltekit-sitemap plugin, this process becomes a breeze. Just remember to define your custom routes and set any necessary directives, and you’ll be on your way to enhancing your website’s discoverability in no time!