Skip to main content

Getting Started

Let's discover eleventy-plugin-metagen in less than 5 minutes.

This plugin is powered by meta-generator and creates document metadata through a shortcode for sites built with Eleventy. Generate meta tags for Open Graph and Twitter along with other useful metadata. All of the tags necessary for baseline social share functionality are included with this plugin along with additional metadata support for more custom use cases.

What you'll need​

Setup​

In your Eleventy project, install the plugin from npm:

npm install eleventy-plugin-metagen

Then add it to your Eleventy Config file:

const metagen = require('eleventy-plugin-metagen');

module.exports = (eleventyConfig) => {
    eleventyConfig.addPlugin(metagen);
};

What does it do?​

The plugin turns 11ty shortcodes used in a Nunjucks template like this:

{% metagen
  title='Eleventy Plugin Meta Generator',
  desc='An eleventy shortcode for generating meta tags.',
  url='https://tannerdolby.com',
  img='https://tannerdolby.com/images/arch-spiral-large.jpg',
  img_alt='Archimedean Spiral',
  twitter_card_type='summary_large_image',
  twitter_handle='tannerdolby',
  name='Tanner Dolby',
  generator='eleventy',
  comments=true,
  css=['style.css', 'design.css'],
  js=['foo.js', 'bar.js:async'],
  inline_css='h1 { color: #f06; }',
  inline_js='console.log("hello, world.");'
%}

into <meta> tags and other document metadata:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Eleventy Plugin Meta Generator</title>
<meta name="author" content="Tanner Dolby">
<meta name="description" content="An eleventy shortcode for generating meta tags.">
<meta name="generator" content="eleventy">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://tannerdolby.com">
<meta property="og:locale" content="en_US">
<meta property="og:title" content="Eleventy Plugin Meta Generator">
<meta property="og:description" content="An eleventy shortcode for generating meta tags.">
<meta property="og:image" content="https://tannerdolby.com/images/arch-spiral-large.jpg">
<meta property="og:image:alt" content="Archimedean Spiral">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@tannerdolby">
<meta name="twitter:creator" content="@tannerdolby">
<meta name="twitter:url" content="https://tannerdolby.com">
<meta name="twitter:title" content="Eleventy Plugin Meta Generator">
<meta name="twitter:description" content="An eleventy shortcode for generating meta tags.">
<meta name="twitter:image" content="https://tannerdolby.com/images/arch-spiral-large.jpg">
<meta name="twitter:image:alt" content="Archimedean Spiral">
<link rel="canonical" href="https://tannerdolby.com">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="design.css">
<style>h1 { color: #f06; }</style>
<script src="foo.js"></script>
<script src="bar.js" async></script>
<script>console.log("hello, world.");</script>