Add a generator meta tag to your Eleventy website
Tags: eleventy, jamstack, staticsite, javascript
Published: 2020-09-17 08:49:05

---
title: Add a generator meta tag to your Eleventy website
published: true
description: A generator meta tag is used to give some credit to the tools you use to build a plain HTML website. Let's give Eleventy some credit.
tags: [eleventy, jamstack, staticsite, javascript]
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/gyoiib2x7w5du9wj7dy7.png
---

Do you remember Microsoft Frontpage and Adobe Dreamweaver? Did you ever look at the HTML code they generated for you?

I actually did and I remember they used to add an interesting piece of code in the HEAD block of every HTML page, something like this:

```html
<meta name="generator" content="Dreamweaver CS4">
```

Even WordPress does something like that, by the way...

This tag doesn't actually do anything to the look and feel of the page, but it is used to tell the curious ones (yes, those who lurk into your HTML code) which tool was used to generate the website.

I actually like this and I think it's fair to give the tools you like some credit, so why not to do the same for websites built with Eleventy?

In this quick tutorial, we will see how to do that!


## Step 1: Creating a global site data file

I like to keep all the Site metadata organised in a file called `_data/site.js` so that I can easily reference this metadata from every template and layout.

For the sake of getting the current version of eleventy into that file we could do something like this:

```js
'use strict'

const eleventyPackage = require('@11ty/eleventy/package.json')

module.exports = function () {
  return {
    generator: `${eleventyPackage.name} v${eleventyPackage.version}`,
    // ... more site metadata like title, baseUrl, etc.
  }
}
```

What we are doing here is basically importing Eleventy's own `package.json` and reading the properties `name` and `version` to create our `generator` string.

Note that, for this to work, you need to have installed Eleventy directly into your project dependency (doesn't work with a global install):

```bash
npm i --save-dev @11ty/eleventy
```

This is a good practice, especially if you are building your website in a CI environment. Moreover, if you update the eleventy version, this will be consistently tracked as part of your project and the generator tag will be automatically updated to reference the current version.


## STEP 2: Use the generator metadata in your layout

Now that we have our generator string globally available through the `site.generator` global data variable, we can simply add that to our base layout (`_includes/layout.njk`):

```jinja
<!doctype html>
<html lang="en" class="has-navbar-fixed-top">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <meta name="generator" content="{{ site.generator }}">
    <!-- more metadata here ... -->
  </head>
  <body>
    {{ content | safe }}
    <!-- scripts and stuff here ... -->
  </body>
</html>
```

Note that we are defining a `<meta name="generator">` tag and using `site.generator` to populate the `content` attribute.

## STEP 3: Use the base layout

This is easy, just reference the base layout in every HTML page you want to generate with your templates, for instance:

```md
---
layout: layout.njk
title: A great blog post
---

# A great blog post

My day started with some great ☕️

...
```

![An example of a markdown post referencing an Eleventy base layout](https://dev-to-uploads.s3.amazonaws.com/i/jyu6ajnuy4wf98srcoxv.png)

Now build your website and every page will have the generator tag properly included in the HEAD section of the HTML markup!

Success 🎉

## That's all

In this article, we learned how to add a generator meta tag in the HEAD block of every HTML page generated by Eleventy. 

While doing that we also learned a bit about *global data files*, *layouts* and *templates*!

I wrote more about Eleventy in [Generate a sitemap for your Eleventy website](https://dev.to/loige/create-a-sitemap-for-your-eleventy-website-25h).

If you found this article interesting please follow me here, on [Twitter](https://twitter.com/loige) and check out my [personal website/blog](https://loige.co) for other web related articles.

Also, if you like Node.js please have a look at my book, [Node.js Design Patterns third edition](https://www.nodejsdesignpatterns.com/), which can help you to learn how to design and implement production-grade Node.js applications using proven patterns and techniques.

[![Node.js Design Patterns book hold by man](https://dev-to-uploads.s3.amazonaws.com/i/gm3sfzusx8s8bhpbpid0.png)](https://www.nodejsdesignpatterns.com/)

Thank you! 👋