Skip to content

Site Metadata

Posted on: Feb 14, 2021 by Stephanie Eckles
🍿 1 min. read

A useful technique to manage site metadata (title, description, url, etc) for ease of retrieval throughout templates and content.

The _data directory is an expected location for various data sources for your Eleventy site.

A convention you'll see variations of in several starters is a data file to hold site metadata. This concept is useful for creating extendable solutions so that certain template bits don't need repeated or started from scratch everytime.

Here's the one that's included in my 11ty Netlify Jumpstart which you can adapt to your own needs:

// Located in _data/meta.js
module.exports = {
// NOTE: `process.env.URL` is provided by Netlify, and may need
// adjusted pending your host
url: process.env.URL || "http://localhost:8080",
siteName: "",
siteDescription: "",
authorName: "",
twitterUsername: "", // no `@`
};

Then, you can access that data in templates and content by using the filename first, followed by the data key of what you'd like using dot notation.

For example, if I wanted the siteName I could access it within Nunjucks as:

{{ meta.siteName }}

See this idea in use for the 11ty Netlify Jumpstart base template

View more quick tips