eleventy-plugin-metagen


An Eleventy shortcode that generates document metadata containing: Open Graph, Twitter card, generic meta tags, CSS, JS, canonical link, and custom tags. See metagen docs for more details on plugin usage.

Installation

Install the plugin from npm:

``
npm install eleventy-plugin-metagen
`

Add it to your Eleventy Config file:

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

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

What does it do?

The plugin turns 11ty shortcodes like this:

`njk
{% 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 tags and other document metadata like this:

`html































`

Use Your Template Data

To make your metadata dynamic, you can use template data as arguments to the shortcode without quotes or braces. The following example is within a Nunjucks file:

`njk
---
title: Some title
desc: Some description
metadata:
title: Some other title
desc: Some other description
url: https://tannerdolby.com
image: https://tannerdolby.com/images/arch-spiral-large.jpg
alt: Archimedean spiral
type: summary_large_image
twitter: tannerdolby
name: Tanner Dolby
---
{% metagen
title=title or metadata.title,
desc=desc or metadata.desc,
url=url + page.url,
img=image,
img_alt=alt,
twitter_card_type=type,
twitter_handle=twitter,
name=name
%}
`

Shorthand syntax:

`njk
---
metadata:
title: foo bar
desc: some desc
...
---
{% metagen metadata %}
``