Automatically add <meta> tags for SEO and social networks.

Options See on

extensions string[]

The list extensions this plugin applies to

name string

The key name for the transformations definitions


This plugin generates <meta> tags in your HTML pages for Open graph, Twitter cards,, and SEO purposes. The data must be defined in the metas keyword of every page and the supported values are:

  • type: The page type (by default is website).
  • site: The name of the site.
  • title: The title of the page, article, post, etc.
  • lang: The language of the page.
  • description: Page description.
  • image: The main image of the page, article, post, etc.
  • icon: The logotype or icon of the site.
  • keywords: An array of keywords.
  • twitter: The twitter username.
  • color: The color theme of the website.
  • robots: Configuration for search engines (a boolean to enable/disable or a string with a custom value).
  • generator: The software that generated the page (Lume v1.x). It can be true to autogenerate or a string with a custom value.


Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import metas from "lume/plugins/metas.ts";

const site = lume();

site.use(metas(/* Options */));

export default site;


In a data file (like /_data.yml) in the root of your project, add the default values.

  site: Oscar's blog
  twitter: "@misteroom"
  icon: /img/icon.png
  lang: en
  generator: true

You can complete the meta values with the specific values for every page. For example:

  title: Hello world
  description: My first post
  image: /hello-world.png

This is my first post

The output HTML page will include the <meta> tags with the result of merging the default values with the specific page values. It should be something similar to:

    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Oscar's blog">
    <meta property="og:locale" content="en">
    <meta property="og:title" content="Hello world">
    <meta property="og:description" content="My first post">
    <meta property="og:url" content="">
    <meta property="og:image" content="">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@misteroom">
    <meta itemprop="name" content="Hello world">
    <meta itemprop="description" content="My first post">
    <meta itemprop="image" content="">
    <meta name="description" content="My first post">
    <meta name="generator" content="Lume v1.10.1">
    <p>This is my first post</p>

Field aliases

Field aliases allow to use an existing value in the metas. Aliases start with = following by the field name:

title: This is the title

  title: "=title" # Alias to the title value

It's also possible to use dots for subvalues:

title: This is the title
  text: Page description
  title: "=title"
  description: "=intro.text"

As of Lume 1.17.0 is possible to use CSS selectors using the $ prefix:

  title: "$ h1" # Use the content of the first <h1> element
  image: "$ img.cover attr(src)" # Use the src attribute of img.cover element

Additional values

As of Lume 2.2, any additional value is used to create a custom <meta> tag. For example the following metas object has additional twitter:* keys:

title: Lume is awesome
author: Dark Vader
  title: =title
  "twitter:label1": Reading time
  "twitter:data1": 1 minute
  "twitter:label2": Written by
  "twitter:data1": =author

This configuration generates the following code:

<meta name="title" content="Lume is awesome">
<meta name="twitter:label1" content="Reading time">
<meta name="twitter:data1" content="1 minute">
<meta name="twitter:label2" content="Written by">
<meta name="twitter:data2" content="Dark Vader">