DEV Community

Cover image for Add a generator meta tag to your Eleventy website
Luciano Mammino
Luciano Mammino

Posted on

Add a generator meta tag to your Eleventy website

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:

<meta name="generator" content="Dreamweaver CS4">
Enter fullscreen mode Exit fullscreen mode

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:

'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.
  }
}
Enter fullscreen mode Exit fullscreen mode

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):

npm i --save-dev @11ty/eleventy
Enter fullscreen mode Exit fullscreen mode

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):

<!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>
Enter fullscreen mode Exit fullscreen mode

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:

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

# A great blog post

My day started with some great ☕️

...
Enter fullscreen mode Exit fullscreen mode

An example of a markdown post referencing an Eleventy base layout

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.

If you found this article interesting please follow me here, on Twitter and check out my personal website/blog for other web related articles.

Also, if you like Node.js please have a look at my book, Node.js Design Patterns third edition, 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

Thank you! 👋

Oldest comments (3)

Collapse
 
edo78 profile image
Federico "Edo" Granata

Really nice idea, I never tought about using the very same packege.json as a source.

Collapse
 
andrealeardini profile image
Andrea Leardini

Great tip, now you can do this using the eleventy variable (new in v1.0.0)
<meta name="generator" content="{{ eleventy.generator }}">

11ty.dev/docs/data-eleventy-suppli...

Some considerations on using this tag directly from Zack

Collapse
 
philips_salt_2e560e0fbb64 profile image
philips salt • Edited

Search engines such as Google use metadata from meta tags to open graph image generator understand additional information about the webpage. They can use this information for ranking purposes, to display snippets in search results, and sometimes they can ignore meta tags. Example of meta tags include the

and elements.