https://github.com/tannerdolby/eleventy-plugin-metagen

Eleventy shortcode that generates document metadata
https://github.com/tannerdolby/eleventy-plugin-metagen

eleventy eleventy-plugin meta-tag-generator

Last synced: about 1 month ago
JSON representation

Eleventy shortcode that generates document metadata

• Host: GitHub
• URL: https://github.com/tannerdolby/eleventy-plugin-metagen
• Owner: tannerdolby
• License: mit
• Created: 2020-11-18T10:55:27.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2024-06-28T22:23:27.000Z (7 months ago)
• Last Synced: 2024-12-24T07:14:13.647Z (about 1 month ago)
• Topics: eleventy, eleventy-plugin, meta-tag-generator
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/eleventy-plugin-metagen
• Size: 1.3 MB
• Stars: 41
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - tannerdolby/eleventy-plugin-metagen - Eleventy shortcode that generates document metadata (others)

README

        
# eleventy-plugin-metagen

[![NPM Version](https://img.shields.io/npm/v/eleventy-plugin-metagen.svg?style=flat)](https://www.npmjs.org/package/eleventy-plugin-metagen)

[![NPM Downloads](https://img.shields.io/npm/dm/eleventy-plugin-metagen.svg?style=flat)](https://npmcharts.com/compare/eleventy-plugin-metagen?minimal=true)

[![Install Size](https://packagephobia.now.sh/badge?p=eleventy-plugin-metagen)](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

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

h1 { color: #f06; }

console.log("hello, world.");

```

## 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 %}

```