Sitemaps are incredibly important for letting search engines know what pages are available to index. As part of my plans to improve my site that lets you play chess against ChatGPT, I wanted to make sure that I had a sitemap in place as I started to add new pages.
With SvelteKit you can easily generate a compliant sitemap.xml
file as part of your build process!
Prerequisites
- You need some prerenderable routes. If your site is completely static, you can add
export const prerender = true;
to yoursrc/routes/+layout.js
file. - You're using the
@sveltejs/adapter-cloudflare
adapter for SvelteKit
As long as you have these, you can easily generate your sitemap!
Install svelte-sitemap
For sitemaps I like to use svelte-sitemap
which you can install as a dev dependency:
npm i --save-dev svelte-sitemap
Add a postbuild script
To generate your sitemap, you can do so in a postbuild script so you never need to run it manually. You can add your postbuild script in package.json
like so:
{
"name": "my-cool-project",
"scripts": {
"postbuild": "npx svelte-sitemap --out-dir .svelte-kit/cloudflare --domain https://example.com"
}
}
Update your adapter
Once you've got your postbuild script set up, all you need to do now is make a few amends to your adapter in svelte.config.js
!
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-cloudflare';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
- adapter: adapter()
+ adapter: adapter({ routes: { include: ['/*'], exclude: ['<all>', '/sitemap.xml'] }})
}
};
export default config;
That's it!
Before you push that up, I would test it by running an npm run build
and confirming that the file .svelte-kit/cloudflare/sitemap.xml
is there.
As a final touch, make sure you've got a robots.txt
, for instance in static/robots.txt
like so:
User-agent: *
Disallow:
Sitemap: https://example.com/sitemap.xml
Top comments (0)