The Ultimate Guide to "vite-plugin-sitemap"

A sitemap is a fundamental component of search engine optimization (SEO). It acts like a roadmap, helping search engines discover and index all the pages on your site. Without one, even well-structured applications might miss out on full visibility. Traditionally, developers had to create sitemaps manually or use external tools. But with vite-plugin-sitemap, Vite developers now have a seamless, integrated solution.

What is Vite Plugin Sitemap?

Vite Plugin Sitemap, formerly known as the vite-plugin-sitemap is a Vite plugin that automatically generates a sitemap.xml and an optional robots.txt file during the build process. It supports both simple and complex site structures, including multi-page applications (MPAs), internationalized routes (i18n), dynamic paths, exclusions, and more. It saves time, prevents mistakes, and improves SEO best practices—all with a few lines of configuration.

Why Is This Important?

Search engines rely on sitemaps to effectively crawl and understand the content of a website. For single-page applications (SPAs) or static sites generated using Vite, routing is typically handled on the client side, and it’s easy for important URLs to be overlooked during indexing. A well-generated sitemap ensures:

• Better indexing by Google and other search engines
• Control over crawl priorities and update frequencies
• Support for dynamic and multilingual content
• Automation in the build process with minimal configuration

Installation

Before diving into the setup options, you'll need to install the vite-plugin-sitemap in the project root of your Vite project.

1npm install -D vite-plugin-sitemap

Basic Setup

Once installed, include the plugin in your vite.config.js or vite.config.ts. You must also provide your production hostname for correct URL generation.

1// vite.config.js
2import { defineConfig } from 'vite'
3import react from '@vitejs/plugin-react' // or vue / svelte / etc.
4import Sitemap from 'vite-plugin-sitemap'
5
6export default defineConfig ({
7  plugins: [
8    react(),
9    Sitemap({ hostname: 'https://example.com' }),
10  ],
11});

After configuring, simply run your Vite build command:

1npm run build

This will generate sitemap.xml and robots.txt files in your dist/ folder. These files are ready to be deployed with your app.

Working with Dynamic Routes

Sometimes, your site has routes that are generated dynamically at runtime (e.g., user profiles, blog posts, product pages). To include these in your sitemap, use the dynamicRoutes option.

1const pages = ['page-one', 'page-two', 'page-three', 'page-four']
2const dynamicRoutes = pages.map(page => `/${page}`)
3
4export default defineConfig ({
5  plugins: [
6    react(),
7    Sitemap({ hostname: 'https://example.com', dynamicRoutes }),
8  ],
9});

This ensures these paths are included in the generated sitemap even though they don't exist as physical files during build.

Excluding Specific Routes

You may want to exclude certain pages like /404, /admin, /private, or /draft routes. The exclude option supports this:

1export default  defineConfig {
2  plugins: [
3    react(),
4    Sitemap({ exclude: ['/404', '/admin', '/private'] }),
5  ],
6}

Combining External Sitemaps

If your site is composed of multiple apps or micro-frontends, you may want to include links to external sitemaps. You can do that using externalSitemaps:

1Sitemap({
2  externalSitemaps: [
3    'sitemap_1',
4    'sitemap_2',
5    'subpath/sitemap_3',
6    'https://site.com/sitemap.xml'
7  ]
8})

Fine-Tuning SEO with 'changefreq' and 'priority'

Search engines rely on additional metadata to decide how often to crawl a page and how important it is compared to others.vite-plugin-sitemap supports two powerful options for this: changefreq and priority.

How Often Do Pages Change?

The changefreq option communicates how frequently a page's content is likely to change. This helps search engines optimize their crawling schedules.

Global Example

1Sitemap({
2  hostname: 'https://example.com',
3  changefreq: 'weekly',
4})

This will apply weekly as the <changefreq> value in your sitemap for all pages.

Per-Route Configuration

1Sitemap({
2  hostname: 'https://example.com',
3  changefreq: {
4    '*': 'monthly',
5    '/': 'daily',
6    '/blog': 'weekly',
7    '/contact': 'yearly',
8  },
9})

• '*': default for all unspecified routes
• '/': homepage changes daily
• '/contact': rarely changes, so it's set to yearly

How Important Is Each Page?

The priority field helps define the relative importance of pages on your website. Values range from 0.0 (least important) to 1.0 (most important). By default, all pages are set to 1.

Global Priority

1Sitemap({
2  hostname: 'https://example.com',
3  priority: 0.7,
4})

Per-Route Priority

1Sitemap({
2  hostname: 'https://example.com',
3  priority: {
4    '*': 0.5,
5    '/': 1,
6    '/blog': 0.7,
7    '/contact': 0.4,
8  },
9})

This allows you to prioritize SEO-critical routes like your homepage or landing pages.

Other Noteworthy Options

i18n Support

The plugin also supports internationalized (i18n) paths using the i18n option. You can define languages, a default language, and specify whether the language code should be a prefix or suffix:

1Sitemap({
2  i18n: {
3    defaultLanguage: 'en',
4    languages: ['en', 'fr', 'de'],
5    strategy: 'prefix' // or 'suffix'
6  }
7})

This will generate appropriate alternate links for search engines to understand language-specific URLs.

Generating Robots.txt

By default, vite-plugin-sitemap also generates a robots.txt file with basic configurations. You can customize this with the robots option to allow or disallow specific paths for crawlers:

1Sitemap({
2  robots: [
3    { userAgent: '*', allow: '/' },
4    { userAgent: 'Googlebot', disallow: ['/private'] }
5  ]
6})

Namespaces (xmlns)

You can control XML namespaces using the xmlns option, especially if you’re integrating with custom search engine tools or APIs that expect specific schemas. Refer to the plugin documentation and the underlying sitemap.js library for valid options.

Complete Vite Plugin Sitemap Setup

To wrap things up, here’s a comprehensive example showing how to use `vite-plugin-sitemap` with all the common options — including dynamic routes, exclusion rules, external sitemaps, i18n, robots.txt, and SEO-specific settings like `changefreq` and `priority`. This unified setup can serve as a reference for most production-level applications.

1// vite.config.js
2import { defineConfig } from 'vite'
3import react from '@vitejs/plugin-react'
4import Sitemap from 'vite-plugin-sitemap'
5
6const pages = ['page-one', 'page-two', 'page-three', 'page-four']
7const dynamicRoutes = pages.map(page => `/${page}`)
8
9export default defineConfig({
10  plugins: [
11    react(),
12    Sitemap({
13      hostname: 'https://example.com',
14
15      // Optional: Static and dynamic route generation
16      dynamicRoutes,
17
18      // Optional: Exclude sensitive or error routes
19      exclude: ['/404', '/admin', '/private'],
20
21      // Optional: Combine additional sitemap files
22      externalSitemaps: [
23        'sitemap_1',
24        'sitemap_2',
25        'subpath/sitemap_3',
26        'https://site.com/sitemap.xml'
27      ],
28
29      // Optional: Change frequency for specific paths
30      changefreq: {
31        '*': 'monthly',
32        '/': 'daily',
33        '/blog': 'weekly',
34        '/contact': 'yearly',
35      },
36
37      // Optional: Set importance (SEO hint)
38      priority: {
39        '*': 0.5,
40        '/': 1,
41        '/blog': 0.7,
42        '/contact': 0.4,
43      },
44
45      // Optional: Multilingual site support
46      i18n: {
47        defaultLanguage: 'en',
48        languages: ['en', 'fr', 'de'],
49        strategy: 'prefix', // or 'suffix'
50      },
51
52      // Optional: Robots.txt rules
53      robots: [
54        { userAgent: '*', allow: '/' },
55        { userAgent: 'Googlebot', disallow: ['/private'] }
56      ],
57    }),
58  ],
59})
60

Conclusion

vite-plugin-sitemap is a small but powerful plugin that brings automated sitemap generation to modern frontend workflows. Whether you're building a multilingual site, a content-heavy blog, or a dynamic e-commerce platform, this plugin streamlines SEO readiness with virtually zero overhead. From basic use cases to advanced configurations, it adapts well to almost every Vite project out there.

If you care about SEO—and you should—integrating vite-plugin-sitemap is a smart move. Install it, configure it, and let your content shine on the web.