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">
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.
}
}
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
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>
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 ☕️
...
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.
Thank you! 👋
Top comments (3)
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
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.Really nice idea, I never tought about using the very same packege.json as a source.