Mark Thomas Miller's logo

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.

  1. Create a sitemap.liquid file.

  2. 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.
  3. 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"
      }
    }
    
  4. 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...
    
  5. 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...
    
  6. 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
    
  7. You may also want to submit your sitemap in the Google Search Console. But that part's totally up to you.