How to add a sitemap to Eleventy

June 2, 2020

When I rebuilt this blog with Eleventy, I wanted to add a sitemap for those juicy SEO benefits. Eleventy doesn't come with a sitemap, so this is the method I used to create one for myself.

This approach is nice because it's set-and-forget: you won't need to manually set properties on every page of your site, but you'll have the option to override the defaults for a specific page if you need to.

Create a sitemap.liquid file.

Add the following code to generate the sitemap:

---
permalink: /sitemap.xml
layout: null
sitemap:
  ignore: true
---
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  {%- for item in collections.all %}
    {%- unless item.data.sitemap.ignore == true %}
      <url>
        <loc>https://example.com{{ item.url }}</loc>
        {%- if item.data.updated -%}
          <lastmod>{{ item.data.updated | date: '%Y-%m-%d' }}</lastmod>
        {%- else -%}
          <lastmod>{{ item.date | date: '%Y-%m-%d' }}</lastmod>
        {%- endif -%}
        {%- if item.data.sitemap.changefreq -%}
          <changefreq>{{ item.data.sitemap.changefreq }}</changefreq>
        {%- endif -%}
        {%- if item.data.sitemap.priority -%}
          <priority>{{ item.data.sitemap.priority }}</priority>
        {%- endif -%}
      </url>
    {%- endunless %}
  {%- endfor %}
</urlset>

There are a couple things to note here:

Be sure to change https://example.com to your own URL.
This example will render your sitemap at yoursite.com/sitemap.xml. If you want to change that to something else, you can edit the permalink in the frontmatter.

Now, let's add some defaults for changefreq and priority. The cleanest way to do this is with Eleventy's built-in directory data files. Basically, this means that you can put a JSON file in a folder. If the JSON file has the same name as the folder, it will set the default frontmatter for that folder.

Or in plain English: if you store your posts in a posts folder, you can create a file directly inside that folder called posts.json. Inside this file, add the defaults for every post. For instance:
```
{
  "sitemap": {
    "changefreq": "weekly",
    "priority": "0.75"
  }
}
```
changefreq is how frequently the page is likely to change. Sitemaps.org says that valid values for this are always, hourly, daily, weekly, monthly, yearly, or never.

priority is a decimal from 0 to 1. This value doesn't affect how your pages are compared to other sites – it only compares your pages to each other. The default priority for a page is 0.5.
If you want to override your default settings from the previous step, you can change the settings for a specific page inside of its frontmatter:
```
---
title: Coffee and Curry
sitemap:
  changefreq: monthly
  priority: 0.9
  ignore: true
---

I'd just finished eating some delicious pancakes when...
```
In our sitemap.liquid code, we're looking for changefreq, priority, and ignore inside of a sitemap object. That's why we're indenting them here. This keeps your frontmatter clean so you could use these as frontmatter variables for other parts of your project.

Also, you may have guessed it, but ignore will hide the page from the sitemap.
If you want to use lastmod (the date of the last modification to your page), add an updated date to your frontmatter:
```
---
title: Life lessons from General Iroh
updated: 2020-05-01
date: 2020-01-31
---

A little help from others can be a great...
```
Note that the updated variable doesn't go in a sitemap object. I've left it outside because you'll probably want to access it in other places on your site that aren't related to the sitemap — like a little tip underneath the title that says "Last updated on MM/DD/YYYY".
You'll want to add your sitemap to your robots.txt file to tell search engines where to find it. Here's an example of what mine looks like (just change example.com to your own site):
```
User-agent: *
Sitemap: https://example.com/sitemap.xml
```
Also, make sure that Eleventy isn't building your robots.txt file into an HTML page! An easy way around this is to rename it to robots.liquid and add some frontmatter to make sure it doesn't receive a layout:
```
---
permalink: /robots.txt
layout: null
---
User-agent: *
Sitemap: https://mtm.dev/sitemap.xml
```
You may also want to submit your sitemap in the Google Search Console. But that part's totally up to you.