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.

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

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="">


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 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="">
  {% for item in collections.all %}
  {% if != true  %}
    <loc>{{ site.url }}{{ item.url }}</loc>
  {% endif %}
  {% endfor %}

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,

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).


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].

Frequently Asked Questions about Sitemap

What are the 2 types of sitemaps?

Generally, there are two types of sitemaps; XML and HTML.

The XML format is more common and recommended for the search engines.

On the other hand, the HTML format is commonly used for site users or visitors.

How do I check if I already have a sitemap?

The quickest way to check check if your website has a sitemap is to manually check it via its URL address (typically located at the top-level site directory).

For instance: {{ site.url }}/sitemap.xml

Alternatively, if you have access to your website files/directory, you can manually browse and check your top-level site directory (usually public_html).

Do I need a sitemap file for my website?

The answer basically depends on the size of your website and how many links you have on it and if they are interlinked correctly.

For example, if your site has a few pages, say ~20, and all of them are properly linked to one another, you might not need one.

On the other hand, if your site has many pages, say ~100, and if some of them aren't properly linked to one another, you should consider using one.

The Google Search Central website provides more information on this, so consider reading their documentation page to get a better idea.


    Danial Zahid's headshot.

    About Danial Zahid

    I'm a self-taught web developer passionate about everything related to websites and web development. Over the past years, I've explored and worked with different web technologies and tools, notably WordPress, Eleventy, npm, and Gulp.js, to name a few.

    In addition, I've created and currently maintain several open-source projects, including web apps, widgets, websites, and more.

    When I'm not writing content for W3Things or doing web development work, I enjoy my free time by playing games or listening to podcasts.

    Get Essential Gulp Kit

    The ultimate Gulp.js solution to improve your developer experience.

    • Includes complete Gulp.js toolkit setup
    • Optimize website content and static assets
    • Continuous asset optimization during development phase
    • Optimize unlimited number of files in bulk
    • Plus many more awesome features

    Subscribe to the Newsletter

    This website uses cookies to optimize your site experience. By continuing to use the site, you are agreeing to its privacy policy and the use of cookies.