Add Sitemap | Astro Tutorials

Sitemap.xml files are XML files containing all the pages of your website and are used for improving site ranking in Search Engine Optimization. Search engines such as Google and Bing index and crawl 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 the Astro website

In the existing project, Open the terminal Run command 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 a required attribute to generate a sitemap.

It genenerates sitemap-index.xml file Build the code using the 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 the sitemap is generated, You can add these files using a 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 the sitemap by passing a 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 the below code

integrations: [
    sitemap({
      entryLimit: 1000,
    }),
  ],

Astro - Sitemap

How to add Sitemaps to the Astro website

Astro Customize Sitemap

notes