Generate a Sitemap in Astro with the sitemap Integration

Lazar Nikolov: [0:04] Just like the SEO, a sitemap is also crucial for a blog. The sitemap is an XML file that's consumed by the search engine. It lists all of your pages and their URLs, including the pages for each of your blog posts. The search engines will periodically fetch your sitemap to see if there are new pages to index.

[0:19] Having a sitemap will get your website and your articles to appear in Google searches. Luckily for us, implementing a sitemap in Astro is easy as running a command. There's an official Astro integration for the astro.js/sitemap package.

[0:37] In order to install the integration in our project, we're going to run npx astro add sitemap. This is going to trigger the integration wizard for the sitemap. Let's proceed with the installation. If we open the Astro config file, we're going to see that we have the sitemap integration included. The sitemap integration also requires a site property in our config. Let's add it.

[1:10] This would be the URL that you're going to deploy your website. I'm just going to set the URL of my website. We can now build our website for production by running npm run build. At the end of the build log, we can see sitemap index is created. This means that Astro created our sitemap file.

[1:30] We have this sitemap index file, which is a simple XML file that points to the sitemap-.xml file. It already knows our domain. That's why we needed to set the domain in our Astro config.

[1:49] If we open the sitemap file, we're going to see a bigger XML file that includes multiple URLs. Our home page. Our about page. Our block index pages. Here's the first, second, third, and the fourth page and also a URL for all of our blog posts. Since we confirmed that our sitemap gets generated successfully, we can open our layout file and add it in the head tag.

[2:02] We'll add a link. The relationship is going to be sitemap and the href is going to be /sitemap-index.XML. The sitemap index file exists just in case our website has more than 45,000 URLs, which is the maximum number of URLs a sitemap can have. In case our whole website surpasses that value, Astro will create a sitemap-1.XML file for us automatically.

[2:31] We don't need to worry about it. Aside from generating it, the sitemap integration also allows us to configure the way it generates our sitemap. In our Astro config map into the sitemap integration, we can pass an optional object parameter and there are multiple properties that we can set.

[2:48] We'll try the filter option first. The filter property is a method that accepts a page argument and needs to return a boolean to indicate whether that page should be included or not. Since we have links to all of our pages, it's safe to remove the paginated ones. We're talking about these ones. We can achieve that easily by filtering them with regex. I'm going to paste a regex string.

[3:12] This will not include any of the pages that match the starting domain/blog and /digit, which in our case is 123 and 4. If the page matches the regex, then it's not going to be included. If we close our sitemaps and run the build again, open the sitemap, we're going to see that the paginated links aren't included anymore. We have successfully filtered them out.

[3:46] Aside from filtering, we can also define custom pages by passing them in a string array to the custom pages property. For example, let's say we want to include some static routes like nicholeoflaser.com/discord, for example, or nicholeoflaser.com/twitter. Let's build our website again and check the sitemap. There we go, at the bottom, we're going to see the Discord and the Twitter URL.

[4:16] Additionally, we can define the change frequency of our pages, the last mod property, and also the priority index. Again, if we would just rebuild the website and open the sitemap, we're going to see that we have the last mod change frequency and also the priority index for all of our links.

[4:38] You might have noticed the trailing slash on all of our URLs, except our custom ones. If we wanted to fix that, we can use the serialize property, which again, just like the filter, it accepts the item and allows us to modify it. We can check if the item.url at -1, meaning the last character of the URL, equals to a slash, we can change the URL to item.url.slice from zero to -1.

[5:16] This is going to remove that trailing slash at the end. If not, nothing's going to happen. We'll just return the whole item. Let's rebuild the website.

[5:23] If we open the sitemap now, we're going to see that we have successfully removed the trailing slash except for the home page. I'm going to let you figure out why that happens.

[5:33] Lastly, the Astro sitemap also supports localization properties. In case your website also supports other languages like Spanish or French and you have separate pages, you can utilize the i18n property so that the sitemap can generate all of the links for all the languages. If I rebuild the website and open the sitemap, we're not going to see any changes. That's how we can generate a sitemap in Astro.

[6:01] Let's do a recap. To generate the sitemap, the least thing you can do is install the sitemap integration by running npx astro add sitemap. This command installs the sitemap package and adds the integration in the Astro config file.

[6:16] Additionally, we also needed to add the site property because the sitemap relied on that. When we built the website, Astro generated the sitemap index and sitemap zero file for us. To make our sitemap discoverable, we added a link to it in the layout components in the head tag.

[6:34] Aside from generating the sitemap, we were also able to configure the way it's being generated, like filter out certain pages, define custom ones, define the change frequency, priority and last mod properties. Even modify the properties before they're written, and at the end, configure localization.