Creating Sitemap with Astro

What is Sitemap.xml

A sitemap.xml is an XML file that lists all the important pages of a website, allowing search engines like Google to crawl the site more efficiently. It provides metadata about each URL, such as when it was last updated, how often it changes, and its importance relative to other URLs on the site.

Benefits of Sitemap.xml Specific to Astro.js

Static Site Generation:

Astro.js generates static sites by default, which means that all your routes are known at build time. This makes it straightforward to generate a comprehensive sitemap.

Performance:

Since Astro.js focuses on delivering fast, static content, having a sitemap ensures that search engines can index your site quickly and efficiently, matching the performance goals of Astro.

SEO Optimization:

Astro.js projects often emphasize SEO. A sitemap complements this by making sure all pages are discoverable and indexed properly, enhancing the overall SEO strategy.

Sitemap.xml for Astro Projects

Creating a sitemap.xml in an Astro project involves generating the XML content based on the routes in your site. Here's a step-by-step guide with a code snippet to help you get started:

Step 1: Install Necessary Packages

First, make sure you have the necessary packages installed. You might need astro and globby for file handling.

npm install astro globby

Step 2: Create the Sitemap Generator Script

Create a file named generate-sitemap.js in the root directory of your project.

import fs from 'fs';
import { globby } from 'globby';
import { resolve } from 'path';

const generateSitemap = async () => {
  const pages = await globby([
    'src/pages/**/*.astro',
    '!src/pages/404.astro', // Exclude the 404 page
  ]);

  const urlSet = pages
    .map((page) => {
      const path = page
        .replace('src/pages', '')
        .replace('.astro', '')
        .replace('index', '');
      return `
        <url>
          <loc>${`https://yourwebsite.com${path}`}</loc>
        </url>
      `;
    })
    .join('');

  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      ${urlSet}
    </urlset>
  `;

  fs.writeFileSync(resolve('./public/sitemap.xml'), sitemap, 'utf8');
};

generateSitemap().catch(console.error);

Step 3: Run the Sitemap Generator

You can run the script manually by executing the following command:

node generate-sitemap.js

Step 4: Add a Build Script

To automate this process, you can add a build script in your package.json file.

{
  "scripts": {
    "generate-sitemap": "node generate-sitemap.js",
    "build": "astro build && npm run generate-sitemap"
  }
}

Step 5: Configure Astro to Serve the Sitemap

Ensure that your Astro project is configured to serve files from the public directory. The public directory is already used by default in Astro for static files, so any file you place there, including sitemap.xml, will be served automatically.

Now, every time you run npm run build, the sitemap.xml will be generated and placed in the public directory.

Full Example Project Structure

/my-astro-project
├── /public
│   └── sitemap.xml (generated)
├── /src
│   └── /pages
│       ├── index.astro
│       ├── about.astro
│       └── ...
├── generate-sitemap.js
├── package.json
└── ...

This setup will generate a sitemap.xml for your Astro project and place it in the public directory, making it accessible at https://yourwebsite.com/sitemap.xml.