# eleventy-plugin-metagen
[](https://www.npmjs.org/package/eleventy-plugin-metagen)
[](https://npmcharts.com/compare/eleventy-plugin-metagen?minimal=true)
[](https://packagephobia.com/result?p=eleventy-plugin-metagen)
An Eleventy [shortcode](https://www.11ty.dev/docs/shortcodes/) that generates document metadata for the `` of a webpage supporting: Open Graph, Twitter card, generic meta tags, CSS, JS, canonical link, and custom tags. Metadata generated by [meta-generator](https://github.com/tannerdolby/meta-generator). Check out [metagen docs](https://metagendocs.netlify.app/docs/eleventy/intro) for more details on plugin usage.
## Installation
Install the plugin from [npm](https://www.npmjs.com/package/eleventy-plugin-metagen):
```
npm install eleventy-plugin-metagen
```
Add it to your [Eleventy Config](https://www.11ty.dev/docs/config/) file:
```js
import metagen from 'eleventy-plugin-metagen';
export default async function(eleventyConfig) {
eleventyConfig.addPlugin(metagen);
};
```
CommonJS Usage
```js
const metagen = require('eleventy-plugin-metagen');
module.exports = (eleventyConfig) => {
eleventyConfig.addPlugin(metagen);
};
```
## What does it do?
The plugin turns [11ty shortcodes](https://www.11ty.dev/docs/shortcodes/) in a Nunjucks template:
```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:
```html
Eleventy Plugin Meta Generator
```
## Use Your Template Data
To make your metadata dynamic, you can use template data as arguments to the shortcode without quotes or braces in a Nunjucks template.
```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 %}
```