Add a Sitemap (sitemap.xml) for Your Eleventy Website

Whether you're just getting started with 11ty SSG or it's been a while, you might've noticed that it doesn't officially document anything about creating sitemaps.

That's fine, because creating a sitemap.xml is pretty straightforward and easy with Eleventy.

In this article, we'll go through some of the basics of what is a sitemap and how to generate an XML sitemap in Eleventy.

Let's get started.

What Is a Sitemap?

A sitemap is a file that tells search engines like Google or Bing on which links to crawl on your website.

Think of it as a central file where you maintain and place all the site links you want search engines to follow in order to build the internal linking structure.

Unlike a robots.txt file which tells search engines what URLs they're allowed to access, a sitemap.xml simply lists all the website URLs that the search engines use to follow and index the site links more efficiently.

The Sitemap XML Format

A typical sitemap.xml file looks like and has the following elements inside it.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://w3things.com/about/</loc>
  </url>

  <url>
    <loc>https://w3things.com/blog/</loc>
  </url>
</urlset>

Apart from the XML declaration at the top of the file, notice the following 3 tags or elements:

• urlset
• url
• loc

While there are more optional tags like lastmod and changefreq, the above ones are the required tags.

The sitemaps.org Protocol page explains about these tags in detail.

Adding a Sitemap File for Your Eleventy Website

Before we move on, I'd like to mention that given the flexibility of Eleventy, we have several ways of creating and maintaining the sitemap file. I'll mention one of the quickest and straightforward ways of doing so.

Furthermore, I'm using a JavaScript data file (*.11tydata.js) as my template data, and Liquid as my template language. However, the general concept is the same for other template languages like Nunjucks, albeit with some syntax differences.

Keep in mind that you might need to make some changes to data variables depending on how you have set up and configured your 11ty project.

Step 1 - Create the Template File

In your 11ty input directory, create a new file and save it as sitemap.html (you may choose a different name if you want to).

Next, add the following piece of code in the file:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  
  {% for item in collections.all %}
  {% if item.data.excludeFromSitemap != true  %}
  <url>
    <loc>{{ site.url }}{{ item.url }}</loc>
  </url>
  {% endif %}
  {% endfor %}
  
</urlset>

Let's go over our sitemap template file to see what it's doing.

First, using the for loop, we're iterating through the 11ty's special all collection to add all the generated pages in our sitemap file.

Second, we're using an if conditional block to check for and exclude any pages/files that have the option excludeFromSitemap: true set in them.

The reason for doing this is because there might be some pages you'd want to exclude from the sitemap (404 page, confirmation pages, etc.).

As far as our data variables are concerned, {{ site.url }} holds the site domain/URL address (in this case, https://w3things.com).

And {{ item.url }} holds the item's URL (permalink) (in this case, /blog/add-sitemap-for-eleventy-website/).

If you're curious about the item.url (or page.url) data variable, read more about it on the Eleventy Supplied Data official docs page.

Step 2 - Add the Frontmatter Data

Next, create the template data file (in this case, sitemap.11tydata.js) and add the following code:

module.exports = {
  permalink: 'sitemap.xml',
  eleventyExcludeFromCollections: true
}

This one is pretty self-explanatory, but let me explain what's going on here.

The permalink property specifies our output file name and location. In this case, we want it in our top-level output directory with the name sitemap.xml.

The eleventyExcludeFromCollections property ensures our sitemap file is not included in itself (by excluding it from collections.all). Read more about the property here.

Step 3 - Build the Sitemap File

Next, go ahead and build your 11ty site. It should place the rendered sitemap file in your 11ty output directory (_site, by default).

Open the file in a text editor or IDE. It should contain URLs to all the pages you specified in the input file. For reference, you can see the W3Things sitemap.xml file here.

If you find any redundant or unexpected pages included in it, simply ignore them from your front matter or template data file (like we did above with the excludeFromSitemap: true property).

Conclusion

That's it. In this blog post, we learned how to create a sitemap with Eleventy site generator.

If you're still facing any issues or need help in building your sitemap, feel free to let me know via X (formerly Twitter) or via [email protected].