A Simple Guide to Adding a Sitemap to Your Eleventy Website

By XaHertz  |  October 29, 2024  |  Last Updated : December 17, 2024

Creating a sitemap is an essential step in optimizing your website for search engines. It helps search engines find and index your content more effectively, which boosts your site's visibility. If you're using Eleventy, a popular static site generator, adding a sitemap is simple. In this article, we'll show you how to create and add a sitemap to your Eleventy website step-by-step.

Step 1: Create a Sitemap Template File

First, you need to create a new file for your sitemap template. In your Eleventy project directory, create a file named sitemap.njk inside the root folder.

Step 2: Add Sitemap Configuration

Inside the sitemap.njk file, add the following code to configure the sitemap:

---
permalink: /sitemap.xml
eleventyExcludeFromCollections: true
---
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="/sitemap.xsl"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
    xmlns:xhtml="http://www.w3.org/1999/xhtml"
    xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
    xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
    {%- for page in collections.all %}
    <url>
        <loc>https://www.yoursite.com{{ page.url }}</loc>
        <lastmod>{{ page.date.toISOString() }}</lastmod>
        <changefreq>{{ page.data.changefreq | default("monthly") }}</changefreq>
    </url>
    {%- endfor %}
</urlset>

Here’s a breakdown of what this code is doing:

  • The permalink property ensures that the output file is named sitemap.xml.
  • The eleventyExcludeFromCollections property excludes this file from Eleventy's collections. Peventing it form appearing in the sitemap.
  • The urlset element is defined with multiple namespaces for xhtml, image, and video.
  • The Nunjucks {% for %} loop iterates over all the pages in the collection to create individual <url> entries for each page.
  • The <loc> element contains the full URL of each page. Replace yoursite.com with the url of your website.
  • The <lastmod> element specifies the last modified date of the page in ISO format.
  • The <changefreq> element indicates how frequently the content is expected to change (e.g., daily, weekly). If no value is found, default value(monthly) is used.

Step 3: Customize the Sitemap

You may want to customize the changefreq element for different types of content. You can set this value in the front matter of your pages or posts. For example:

---
title: "My Blog Post"
date: "2024-10-28"
changefreq: "weekly"
---

Also, you may want to exclude some pages from the sitemap. You can do this by setting the eleventyExcludeFromCollections property of that file to true, this excludes that file from Eleventy's collections. Peventing it form appearing in the sitemap. This value can also be set in the front matter:

---
title: "My Page"
date: "2024-06-18"
eleventyExcludeFromCollections: true
---

Step 4: Add an XSL Stylesheet (Optional)

For better readability of your sitemap in browsers, you can add an XSL stylesheet. Create a file named sitemap.xsl in the root directory and add your stylesheet code there. This step is optional but can help with visual inspection of the sitemap.

Step 5: Generate the Sitemap

Now, when you build your Eleventy site, the sitemap will be generated automatically at /sitemap.xml. To verify, you can run the build command:

npx @11ty/eleventy

Visit https://www.yoursite.com/sitemap.xml in your browser to see the generated sitemap.

Final Thoughts

Adding a sitemap to an Eleventy website is a straightforward process that significantly enhances your site's SEO. By following the steps outlined above, you ensure that search engines can efficiently crawl and index your content, improving your site's visibility and ranking.

Remember, a well-maintained sitemap is crucial for effective SEO, so make sure to keep it up-to-date. Happy coding!


Last updated on December 17, 2024