Sitemap.xml files are xml files contains all the pages of your website and used for improving site ranking in Search Engine Optimization. Search engines such as Google and bing index and crawls all Urls in sitemap.xml.

AstroJS provides an easy way to add sitemaps to your sites.

First, Let’s create an app as per here

How to add Sitemaps to Astro website

In the existing project, Open terminal Run commmand below commands For npx users

# Using NPM
npx astro add sitemap

or yarn users

# Using Yarn
yarn astro add sitemap

or For pnpm users

# Using PNPM
pnpm astro add sitemap

using plain astr command

 astro add sitemap
 E:\myblogs\astro_app> astro add sitemap
✔ Resolving packages...

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭───────────────────────────────╮
 │ npm install @astrojs/sitemap  │
 ╰───────────────────────────────╯

? Continue? » (Y/n)
√ Continue? ... yes
✔ Installing dependencies...
  
   success  Configuration up-to-date.
  • It installs @astrojs/sitemap dependency
  • It adds sitemap integration in astro.config.js
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';

import sitemap from '@astrojs/sitemap';

// https://astro.build/config
export default defineConfig({
 site: 'https://mysite.com',
 integrations: [mdx(), sitemap()],
});

site is an required attribute to generate sitemap.

  • It genenerates sitemap-index.xml file Build the code using below command
npm run build
PS E:\myblogs\astro_app> npm run build

> [email protected] build
> astro build

02:28:45 pm [content] Types generated 1.26s
02:28:45 pm [build] output target: static
02:28:45 pm [build] Collecting build info...
02:28:45 pm [build] Completed in 1.87s.
02:28:45 pm [build] Building static entrypoints...
02:28:48 pm [build] Completed in 3.16s.

 generating static routes 
▶ src/pages/index.astro
  └─ /index.html (+154ms)
λ src/pages/rss.xml.js
  └─ /rss.xml (+68ms)
▶ src/pages/about.astro
  └─ /about/index.html (+69ms)
▶ src/pages/blog/index.astro
  └─ /blog/index.html (+23ms)
▶ src/pages/blog/[...slug].astro
  ├─ /blog/markdown-style-guide/index.html (+145ms)
  ├─ /blog/using-mdx/index.html (+199ms)
  ├─ /blog/first-post/index.html (+237ms)
  ├─ /blog/third-post/index.html (+305ms)
  └─ /blog/second-post/index.html (+384ms)
Completed in 0.97s.

@astrojs/sitemap: `sitemap-index.xml` is created.

02:28:49 pm [build] 8 page(s) built in 6.15s
02:28:49 pm [build] Complete!

Next, You can preview the build using astro preview

PS E:\myblogs\astro_app> astro preview
Port 3000 is in use, trying another one...
   astro  v2.7.3 started in 27ms

  ┃ Local    http://localhost:3001/
  ┃ Network  use --host to expose

It starts server http://localhost:3001/

Once sitemap is generated, You can add these file using meta tag

<head>
  <link rel="sitemap" href="/sitemap-index.xml" />
</head>

on accessing url http://localhost:3001/sitemap-index.xml

<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <sitemap>
        <loc>https://example.com/sitemap-0.xml</loc>
    </sitemap>
</sitemapindex>

on accessing url http://localhost:3001/sitemap-0.xml

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url>
<loc>https://example.com/</loc>
</url>
<url>
<loc>https://example.com/about/</loc>
</url>
<url>
<loc>https://example.com/blog/</loc>
</url>
<url>
<loc>https://example.com/blog/first-post/</loc>
</url>
<url>
<loc>https://example.com/blog/markdown-style-guide/</loc>
</url>
<url>
<loc>https://example.com/blog/second-post/</loc>
</url>
<url>
<loc>https://example.com/blog/third-post/</loc>
</url>
<url>
<loc>https://example.com/blog/using-mdx/</loc>
</url>
<url>
<loc>https://example.com/rss.xml/</loc>
</url>
</urlset>

Astro Customize Sitemap

You can customize sitemap by passing an config options object

integrations: [
    sitemap({
      // configuration options
      entryLimit: 10000,
      changefreq: 'daily',
      priority: 0.7,
      lastmod: new Date().new,

    }),
  ],

notes

  • Maximum count of entries in a sitemap file is 45000 You can customize using below code
integrations: [
    sitemap({
      entryLimit: 1000,
    }),
  ],