Sitemaps make it easier for web crawlers to index your page and are a common best practise for improving search rank.
The Astro Sitemap integration (@astrojs/sitemap) makes it really easy to generate a sitemap for your Astro website.
Simply install the integration
npm install --save @astrojs/sitemap
and add it as an integration in your AstroJS configuration file. At the time of writing, my AstroJS configuration file looks as follows:
// https://astro.build/config
export default defineConfig({
site: 'https://friedrichkurz.me', // <--
markdown: {
remarkPlugins: [readingTime]
},
integrations: [
tailwind(),
icon(),
mdx(mdxConfiguration),
cookieconsent(cookieconsentConfiguration),
sitemap() // <--
],
});
Note that I added the site property to the configuration object (to tell the integration the base URL of my website) as well as
sitemap()
to the integrations array to activate the sitemap integration.
Astro will now run the @astrojs/sitemap integration when you generate a build which will in turn create add a sitemap-0.xml and sitemap-index.xml file and add it to the output.
This is all fine and dandy so fare, but web crawlers also need to know where to find your sitemap. To accomplish that, add a <link> element pointing to sitemap-index.xml in the head of your pages:
<head>
<!-- ... -->
<link rel="sitemap" href="/sitemap-index.xml" />
<!-- ... -->
</head>
and additionally add a Sitemap entry to your robots.txt, if you have one:
# ...
Sitemap: https://<YOUR SITE>/sitemap-index.xml
# ...
We can confirm that the integration is working, by looking at the build output (it should include a sitemap-index.xml as well as a sitemap-0.xml). Additionally, we may check the logs of the build. The output of astro build should contain a line like the following
08:02:51 [@astrojs/sitemap] `sitemap-index.xml` created at `dist`