README
rehype-meta
rehype plugin to add metadata to the <head>
.
Contents
- What is this?
- When should I use this?
- Install
- Use
- API
- Metadata
- Examples
- Types
- Compatibility
- Security
- Related
- Contribute
- License
What is this?
This package is a unified (rehype) plugin to manage the metadata (Open
Graph, Twitter Cards, SEO, etc.) that can be found in <head>
.
It focusses on reasonable and useful metadata that is supported by several and
popular vendors instead of every possible field supported somewhere.
unified is a project that transforms content with abstract syntax trees (ASTs). rehype adds support for HTML to unified. hast is the HTML AST that rehype uses. This is a rehype plugin that adds metadata to the head in the tree.
When should I use this?
This plugin is particularly useful as a metadata manager when you’re working with articles that are supposed to be shared on the web, whether it’s on Twitter or Slack. You can define key/value pairs, either with frontmatter, with other plugins, or as options, and this plugin will generate the HTML used by different services.
This plugin works on complete documents (not fragments).
A different plugin, rehype-document
, wraps fragments in
documents.
Install
This package is ESM only. In Node.js (version 12.20+, 14.14+, or 16.0+), install with npm:
npm install rehype-meta
In Deno with Skypack:
import rehypeMeta from 'https://cdn.skypack.dev/rehype-meta@3?dts'
In browsers with Skypack:
<script type="module">
import rehypeMeta from 'https://cdn.skypack.dev/rehype-meta@3?min'
</script>
Use
Say our module example.js
looks as follows:
import {rehype} from 'rehype'
import rehypeMeta from 'rehype-meta'
main()
async function main() {
const file = await rehype()
.data('settings', {fragment: true})
.use(rehypeMeta, {
twitter: true,
og: true,
copyright: true,
type: 'article',
origin: 'https://www.nytimes.com',
pathname: '/interactive/2019/12/02/nyregion/nyc-subway-map.html',
name: 'The New York Times',
siteTags: [
'US Politics',
'Impeachment',
'NATO',
'London',
'Food',
'Poverty',
'Climate Change',
'Global Warming'
],
siteAuthor: 'The New York Times',
siteTwitter: '@nytimes',
author: 'Jane Doe',
authorTwitter: '@jane',
authorFacebook: 'janedoe',
title: 'The New York City Subway Map as You’ve Never Seen It Before',
separator: ' | ',
description:
'The city has changed drastically over the past 40 years, yet the M.T.A. map designed in 1979 has largely endured.',
section: 'New York',
tags: [
'Subway',
'Map',
'Public Transit',
'Design',
'MTA',
'Massimo Vignelli',
'NYC'
],
image: {
url: 'https://static01.nyt.com/images/2019/12/02/autossell/mta-promo-image/mta-crop-facebookJumbo.jpg',
alt: 'M.T.A. map designed in 1979',
width: '1050',
height: '550'
},
published: '2019-12-02T10:00:00.000Z',
modified: '2019-12-03T19:13:00.000Z',
readingTime: 11.1
})
.process('')
console.log(String(file))
}
Now running node example.js
yields:
<head>
<title>The New York City Subway Map as You’ve Never Seen It Before | The New York Times</title>
<link rel="canonical" href="https://www.nytimes.com/interactive/2019/12/02/nyregion/nyc-subway-map.html">
<meta name="description" content="The city has changed drastically over the past 40 years, yet the M.T.A. map designed in 1979 has largely endured.">
<meta name="keywords" content="Subway, Map, Public Transit, Design, MTA, Massimo Vignelli, NYC, US Politics, Impeachment, NATO, London, Food, Poverty, Climate Change, Global Warming">
<meta name="author" content="Jane Doe">
<meta name="copyright" content="© 2019 Jane Doe">
<meta property="og:type" content="article">
<meta property="og:site_name" content="The New York Times">
<meta property="og:url" content="https://www.nytimes.com/interactive/2019/12/02/nyregion/nyc-subway-map.html">
<meta property="og:title" content="The New York City Subway Map as You’ve Never Seen It Before">
<meta property="og:description" content="The city has changed drastically over the past 40 years, yet the M.T.A. map designed in 1979 has largely endured.">
<meta property="og:image" content="https://static01.nyt.com/images/2019/12/02/autossell/mta-promo-image/mta-crop-facebookJumbo.jpg">
<meta property="og:image:alt" content="M.T.A. map designed in 1979">
<meta property="og:image:width" content="1050">
<meta property="og:image:height" content="550">
<meta property="article:published_time" content="2019-12-02T10:00:00.000Z">
<meta property="article:modified_time" content="2019-12-03T19:13:00.000Z">
<meta property="article:author" content="https://www.facebook.com/janedoe">
<meta property="article:section" content="New York">
<meta property="article:tag" content="Subway">
<meta property="article:tag" content="Map">
<meta property="article:tag" content="Public Transit">
<meta property="article:tag" content="Design">
<meta property="article:tag" content="MTA">
<meta property="article:tag" content="Massimo Vignelli">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://static01.nyt.com/images/2019/12/02/autossell/mta-promo-image/mta-crop-facebookJumbo.jpg">
<meta name="twitter:image:alt" content="M.T.A. map designed in 1979">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@jane">
<meta name="twitter:label1" content="Posted in">
<meta name="twitter:data1" content="New York">
<meta name="twitter:label2" content="Reading time">
<meta name="twitter:data2" content="12 minutes">
</head>
API
This package exports no identifiers.
The default export is rehypeMeta
.
unified().use(rehypeMeta[, options])
Add metadata to the <head>
.
- adds a
<head>
if one doesn’t already exist - overwrites existing metadata in
<head>
(for example, when a<title>
already exists, it’s updated)
options
Configuration with least priority. This is particularly useful for site wide metadata. Mixed into config.
Config
There are three ways to configure the metadata of a document.
- pass an object as
options
when usingmeta
- Define it in YAML front matter (by integrating with
vfile-matter
) - Define an object at
file.data.meta
Configuration is created by extending the defaults, with these objects, in the
above order (so file.data.meta
takes precedence over options
).
Only options
is enough if every file has the same metadata.
If your workflow enables front matter, that’s a good way to keep data in files.
Alternatively, do it yourself by adding data at file.data.meta
, which can also
be done by plugins:
unified-infer-git-meta
— infermodified
,published
, andauthor
from Gitrehype-infer-title-meta
— infertitle
from the documentrehype-infer-description-meta
— inferdescription
from the documentrehype-infer-reading-time-meta
— inferreadingTime
from the document
config.og
Whether to add Open Graph metadata (boolean
, default: false
).
Affects: meta[property=og:site_name]
,
meta[property=og:url]
,
meta[property=og:title]
,
meta[property=og:description]
,
meta[property=og:image]
,
meta[property=article:published_time]
,
meta[property=article:modified_time]
,
meta[property=article:author]
,
meta[property=article:section]
,
meta[property=article:tag]
,
meta[name=twitter:card]
.
config.ogNameInTitle
Whether to add the site name name
to the og:title
(boolean
, default:
false
).
Affects: meta[property=og:title]
.
config.twitter
Whether to add Twitter metadata (boolean
, default: false
).
Affects: meta[name=twitter:card]
,
meta[name=twitter:image]
,
meta[name=twitter:site]
,
meta[name=twitter:creator]
,
meta[name=twitter:label1]
,
meta[name=twitter:data1]
,
meta[name=twitter:label2]
,
meta[name=twitter:data2]
.
config.copyright
Whether to add copyright metadata (boolean
, default: false
).
Affects: meta[name=copyright]
.
config.type
What the document refers to ('website' | 'article'
, default: website
).
Affects: meta[property=og:type]
,
meta[property=article:published_time]
,
meta[property=article:modified_time]
,
meta[property=article:author]
,
meta[property=article:section]
,
meta[property=article:tag]
.
config.origin
Origin the file will be hosted on (string
, optional, example:
https://www.nytimes.com
).
Affects: link[rel=canonical]
,
meta[property=og:url]
.
config.pathname
Absolute pathname of where the file will be hosted (string
, default: /
,
example: /interactive/2019/12/02/nyregion/nyc-subway-map.html
).
Affects: link[rel=canonical]
,
meta[property=og:url]
.
config.name
Name of the whole site (string
, optional, example: 'The New York Times'
).
Affects: title
, meta[property=og:site_name]
,
meta[property=og:title]
.
config.siteTags
Tags associated with the whole site (Array<string>
, optional, example:
['US Politics', 'Impeachment', 'NATO', 'London', 'Food', 'Poverty', 'Climate Change', 'Global Warming']
).
Affects: meta[name=keywords]
.
config.siteAuthor
Name of the author of the whole site (string
, optional, example:
'The New York Times'
).
Affects: meta[name=author]
, meta[name=copyright]
.
config.siteTwitter
Twitter username of the whole site (string
, optional, example: '@nytimes'
).
Affects: meta[name=twitter:site]
.
config.color
Hexadecimal theme color of document or site (string
, optional, example:
'#bada55'
).
Affects: meta[name=theme-color]
.
config.author
Name of the author of the document (string
, optional, example:
'Jane Doe'
).
Affects: meta[name=author]
, meta[name=copyright]
.
config.authorTwitter
Twitter username of the author of the document (string
, optional, example:
'@janedoe'
).
Affects: meta[name=twitter:creator]
.
config.authorFacebook
Facebook username of the author of the document (string
, optional, example:
'example'
).
Affects: meta[property=article:author]
.
config.title
Title of the document (string
, optional, example: 'The New York City Subway Map as You’ve Never Seen It Before'
).
Affects: title
, meta[property=og:title]
.
config.separator
Value to use to join the title
and name
together (string
, default:
' - '
).
Affects: title
, meta[property=og:title]
.
config.description
Description of the document (string
, optional, example:
'The city has changed drastically over the past 40 years, yet the M.T.A. map designed in 1979 has largely endured.'
).
Affects: meta[name=description]
,
meta[property=og:description]
.
config.section
Section associated with the document (string
, optional, example:
'New York'
).
Affects: meta[property=article:section]
, meta[name=twitter:label1]
,
meta[name=twitter:data1]
.
config.tags
Tags associated with the document (Array<string>
, optional, example:
['Subway', 'Map', 'Public Transit', 'Design', 'MTA', 'Massimo Vignelli', 'NYC']
).
Affects: meta[name=keywords]
,
meta[property=article:tag]
.
config.image
One or more images associated with the document (string
, Image
, or
Array<string|Image>
, optional).
If strings are passed, they are seen as Image
objects with a url
field set
to that value.
Image
:
url
(string
, required, example:'https://static01.nyt.com/images/…/mta-crop-jumbo.jpg'
)alt
(string
, optional, example:'M.T.A. map designed in 1979'
)width
(string
, optional, example:'1050'
)height
(string
, optional, example:'550'
)
Affects: meta[property=og:image]
,
meta[name=twitter:card]
,
meta[name=twitter:image]
.
config.published
Date the document (or site) was first published (Date
or string
, optional,
example: '2019-12-02T10:00:00.000Z'
).
👉 Note: parsing a string is inconsistent, prefer dates.
Affects: meta[name=copyright]
,
meta[property=article:published_time]
.
config.modified
Date the document was last modified (Date
or string
, optional, example:
'2019-12-03T19:13:00.000Z'
).
👉 Note: parsing a string is inconsistent, prefer dates.
Affects: meta[property=article:modified_time]
.
config.readingTime
Estimated reading time in minutes for the document ([number, number]
or
number
, optional, example: 1.219403
).
If two numbers are given, they represent a range of two estimates.
Affects: meta[name=twitter:label1]
,
meta[name=twitter:data1]
,
meta[name=twitter:label2]
,
meta[name=twitter:data2]
.
Metadata
The following metadata can be added by rehype-meta
.
title
Affected by: title
, name
, separator
.
If title
is 'About'
:
<title>About</title>
If name
is 'Example'
:
<title>Example</title>
If title
is 'About'
and name
is 'Example'
:
<title>About - Example</title>
If title
is 'About'
, name
is 'Example'
, and separator to ' | '
:
<title>About | Example</title>
link[rel=canonical]
Affected by: origin
, pathname
.
If origin
is 'https://example.com'
and path
is '/path/'
:
<link rel="canonical" href="https://example.com/path/">
If origin
is 'https://example.com'
and path
is not set:
<link rel="canonical" href="https://example.com/">
meta[name=description]
Affected by: description
.
If description
is 'Lorem ipsum'
:
<meta name="description" content="Lorem ipsum">
meta[name=keywords]
If tags
is ['a', 'b']
:
<meta name="keywords" content="a, b">
If siteTags
is ['b', 'c']
:
<meta name="keywords" content="b, c">
If tags
is ['a', 'b']
and siteTags
is ['b', 'c']
:
<meta name="keywords" content="a, b, c">
meta[name=author]
Affected by: author
, siteAuthor
.
If author
is 'Jane'
:
<meta name="author" content="Jane">
If siteAuthor
is 'John'
:
<meta name="author" content="John">
If author
is 'Jane'
and siteAuthor
is 'John'
:
<meta name="author" content="Jane">
meta[name=copyright]
Affected by: copyright
, author
,
siteAuthor
, published
.
The below examples depend on the current date, so for example purposes, say it was the year 2030.
If copyright
is not true
, meta[name=copyright]
is not added.
If copyright
is true
and author
is 'Jane'
:
<meta name="copyright" content="© 2030 Jane">
If copyright
is true
and siteAuthor
is 'John'
:
<meta name="copyright" content="© 2030 John">
If copyright
is true
, author
is 'Jane'
, and siteAuthor
is 'John'
:
<meta name="copyright" content="© 2030 Jane">
If copyright
is true
, author
is 'Jane'
, and published
is '2015'
:
<meta name="copyright" content="© 2015 Jane">
meta[name=theme-color]
Affected by: color
.
If color
is '#bada55'
:
<meta name="theme-color" content="#bada55">
meta[property=og:type]
If og
is not true
, meta[property=og:type]
is not added.
If og
is true
and type
is 'website'
:
<meta property="og:type" content="website">
If og
is true
and type
is 'article'
:
<meta property="og:type" content="article">
meta[property=og:site_name]
If og
is not true
, meta[property=og:site_name]
is not added.
If og
is true
and name
is 'Example'
:
<meta property="og:site_name" content="Example">
meta[property=og:url]
Affected by: og
, origin
, pathname
.
If og
is not true
, meta[property=og:url]
is not added.
If og
is true
, origin
is 'https://example.com'
, and path
is
'/path/'
:
<meta property="og:url" content="https://example.com/path/">
If origin
is 'https://example.com'
and path
is not set:
<meta property="og:url" content="https://example.com/">
meta[property=og:title]
Affected by: og
, ogNameInTitle
,
title
, name
, separator
.
If og
is not true
, meta[property=og:title]
is not added.
If og
is true
and title
is 'About'
:
<meta property="og:title" content="About">
If og
is true
, ogNameInTitle
is true
, title
is 'About'
, and name
is 'Site'
:
<meta property="og:title" content="About - Site">
If og
is true
, ogNameInTitle
is true
, title
is 'About'
, name
is
'Site'
, and separator
is ' | '
:
<meta property="og:title" content="About | Site">
meta[property=og:description]
Affected by: og
, description
.
If og
is not true
, meta[property=og:description]
is not added.
If og
is true
and description
is 'Lorem ipsum'
:
<meta property="og:description" content="Lorem ipsum">
meta[property=og:image]
If og
is not true
, meta[property=og:image]
, meta[property=og:image:alt]
,
meta[property=og:image:width]
, and meta[property=og:image:height]
are not
added.
👉 Note: up to 6 images are added.
If og
is true
and image
is 'https://example.com/image.png'
:
<meta property="og:image" content="https://example.com/image.png">
If og
is true
and image
is ['https://example.com/a.png', 'https://example.com/b.png']
:
<meta property="og:image" content="https://example.com/a.png">
<meta property="og:image" content="https://example.com/b.png">
If og
is true
and image
is {url: 'https://example.com/a.png', alt: 'A', width: '670', height: '1012'}
:
<meta property="og:image" content="https://example.com/a.png">
<meta property="og:image:alt" content="A">
<meta property="og:image:width" content="670">
<meta property="og:image:height" content="1012">
meta[property=article:published_time]
Affected by: og
, type
, published
.
If og
is not true
or type
is not 'article'
,
meta[property=article:published_time]
is not added.
If og
is true
, type
is 'article'
, and published
is
'2014-06-30T15:01:35-05:00'
:
<meta property="article:published_time" content="2014-06-30T20:01:35.000Z">
meta[property=article:modified_time]
Affected by: og
, type
, modified
.
If og
is not true
or type
is not 'article'
,
meta[property=article:modified_time]
is not added.
If og
is true
, type
is 'article'
, and modified
is
'2017-04-26T22:37:10-05:00'
:
<meta property="article:modified_time" content="2017-04-27T03:37:10.000Z">
meta[property=article:author]
Affected by: og
, type
,
authorFacebook
.
If og
is not true
or type
is not 'article'
,
meta[property=article:author]
is not added.
If og
is true
, type
is 'article'
, and authorFacebook
is
'jane'
:
<meta property="article:author" content="https://www.facebook.com/jane">
meta[property=article:section]
Affected by: og
, type
, section
.
If og
is not true
or type
is not 'article'
,
meta[property=article:section]
is not added.
If og
is true
, type
is 'article'
, and section
is 'Politics'
:
<meta property="article:section" content="Politics">
meta[property=article:tag]
If og
is not true
or type
is not 'article'
, meta[property=article:tag]
are not added.
👉 Note: up to 6 tags are added.
If og
is true
, type
is 'article'
, and tags
is ['US Politics', 'Impeachment', 'NATO', 'London', 'Food', 'Poverty', 'Climate Change']
:
<meta property="article:tag" content="US Politics">
<meta property="article:tag" content="Impeachment">
<meta property="article:tag" content="NATO">
<meta property="article:tag" content="London">
<meta property="article:tag" content="Food">
<meta property="article:tag" content="Poverty">
meta[name=twitter:card]
Affected by: og
, twitter
, image
.
If twitter
is not true
, meta[name=twitter:card]
is not added.
If twitter
is true
, og
is true, and there is no valid image, no
meta[name=twitter:card]
is added either, because Twitter assumes a summary in
this case.
If twitter
is true
and there is a valid image:
<meta name="twitter:card" content="summary_large_image">
If twitter
is true
and there is no valid image:
<meta name="twitter:card" content="summary">
meta[name=twitter:image]
If twitter
is not true
, meta[name=twitter:image]
and
meta[name=twitter:image:alt]
are not added.
👉 Note: only one image is added.
If twitter
is true
and image
is 'https://example.com/image.png'
:
<meta name="twitter:image" content="https://example.com/image.png">
If twitter
is true
and image
is ['https://example.com/a.png', 'https://example.com/b.png']
:
<meta name="twitter:image" content="https://example.com/a.png">
If twitter
is true
and image
is {url: 'https://example.com/a.png', alt: 'A', width: '670', height: '1012'}
:
<meta name="twitter:image" content="https://example.com/a.png">
<meta name="twitter:image:alt" content="A">
meta[name=twitter:site]
Affected by: twitter
, siteTwitter
.
If twitter
is not true
, meta[name=twitter:site]
is not added.
If twitter
is true
and siteTwitter
is '@example'
:
<meta name="twitter:site" content="@example">
meta[name=twitter:creator]
Affected by: twitter
, authorTwitter
.
If twitter
is not true
, meta[name=twitter:creator]
is not added.
If twitter
is true
and authorTwitter
is '@example'
:
<meta name="twitter:creator" content="@example">
meta[name=twitter:label1]
meta[name=twitter:data1]
Affected by: twitter
, section
,
readingTime
.
👉 Note: this data is used by Slack, not by Twitter.
If twitter
is not true
, meta[name=twitter:label1]
and
meta[name=twitter:data1]
are not added.
If twitter
is true
and section
is 'Food'
:
<meta name="twitter:label1" content="Posted in">
<meta name="twitter:data1" content="Food">
If twitter
is true
, section
is not defined, and readingTime
is 3.083
:
<meta name="twitter:label1" content="Reading time">
<meta name="twitter:data1" content="4 minutes">
meta[name=twitter:label2]
meta[name=twitter:data2]
Affected by: twitter
, section
,
readingTime
.
👉 Note: this data is used by Slack, not by Twitter.
If twitter
is not true
, section
is not defined, or readingTime
is not
defined, meta[name=twitter:label2]
and meta[name=twitter:data2]
are not
added.
If twitter
is true
, section
is defined, and readingTime
is 0.8
:
<meta name="twitter:label2" content="Reading time">
<meta name="twitter:data2" content="1 minute">
If twitter
is true
, section
is defined, and readingTime
is [8, 12]
:
<meta name="twitter:label2" content="Reading time">
<meta name="twitter:data2" content="8-12 minutes">
Examples
Example: frontmatter in markdown
This example shows how it’s possible to combine the different data sources to pass site wide info as options and define more specific data from within markdown files with frontmatter.
Say we have the following file example.md
:
---
title: Neptune
author: U. Le Verrier
authorTwitter: '@leverrier123'
description: Neptune is blue.
tags:
- neptune
- blue
---
# Neptune
To do: write some stuff about why neptune is cool.
And our module example.js
looks as follows:
import {matter} from 'vfile-matter'
import {read} from 'to-vfile'
import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkFrontmatter from 'remark-frontmatter'
import remarkRehype from 'remark-rehype'
import rehypeDocument from 'rehype-document'
import rehypeMeta from 'rehype-meta'
import rehypeStringify from 'rehype-stringify'
main()
async function main() {
const file = await read('example.md')
// Define where the generated file will be available.
file.data.meta = {
origin: 'https://planets.com',
pathname: '/neptune/'
}
await unified()
.use(remarkParse)
.use(remarkFrontmatter)
.use(() => (_, file) => {
matter(file)
})
.use(remarkRehype)
// `rehype-document` manages non-metadata things in `<head>`.
.use(rehypeDocument, {
css: 'https://planets.com/index.css',
js: 'https://planets.com/index.js'
})
// Site wide metadata:
.use(rehypeMeta, {
og: true,
twitter: true,
copyright: true,
type: 'article',
name: 'Planets',
siteTags: ['planet', 'solar', 'galaxy'],
siteAuthor: 'J. Galle',
siteTwitter: '@the_planets'
})
.use(rehypeStringify)
.process(file)
console.log(String(file))
}
Now, running node example.js
yields:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Neptune - Planets</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://planets.com/index.css">
<link rel="canonical" href="https://planets.com/neptune/">
<meta name="description" content="Neptune is blue.">
<meta name="keywords" content="neptune, blue, planet, solar, galaxy">
<meta name="author" content="U. Le Verrier">
<meta name="copyright" content="© 2022 U. Le Verrier">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Planets">
<meta property="og:url" content="https://planets.com/neptune/">
<meta property="og:title" content="Neptune">
<meta property="og:description" content="Neptune is blue.">
<meta property="article:tag" content="neptune">
<meta property="article:tag" content="blue">
<meta name="twitter:site" content="@the_planets">
<meta name="twitter:creator" content="@leverrier123">
</head>
<body>
<h1>Neptune</h1>
<p>To do: write some stuff about why neptune is cool.</p>
<script src="https://planets.com/index.js"></script>
</body>
</html>
Example: inferring metadata
Some metadata can be automatically gathered, either by extracting it from the
document, or by accessing the file system or Git.
This is done by other plugins (see config) which “infer” that metadata and
store their results on file.data.meta
, which this plugin then looks at.
Taking this readme as an example and running the following code within this repo:
import {read} from 'to-vfile'
import {unified} from 'unified'
import unifiedInferGitMeta from 'unified-infer-git-meta'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeDocument from 'rehype-document'
import rehypeInferTitleMeta from 'rehype-infer-title-meta'
import rehypeInferDescriptionMeta from 'rehype-infer-description-meta'
import rehypeInferReadingTimeMeta from 'rehype-infer-reading-time-meta'
import rehypeMeta from 'rehype-meta'
import rehypeStringify from 'rehype-stringify'
main()
async function main() {
const file = await unified()
.use(remarkParse)
.use(unifiedInferGitMeta) // Find published, modified, and authors in Git.
.use(remarkRehype)
.use(rehypeDocument)
.use(rehypeInferTitleMeta) // Find the main title.
.use(rehypeInferDescriptionMeta, {truncateSize: 64}) // Find the description.
.use(rehypeInferReadingTimeMeta) // Estimate reading time.
.use(rehypeMeta, {og: true, twitter: true, copyright: true})
.use(rehypeStringify)
.process(await read('readme.md'))
console.log(String(file))
}
Yields:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>rehype-meta</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="rehype plugin to add metadata to the <head…">
<meta name="author" content="Titus Wormer">
<meta name="copyright" content="© 2019 Titus Wormer">
<meta property="og:type" content="website">
<meta property="og:title" content="rehype-meta">
<meta property="og:description" content="rehype plugin to add metadata to the <head…">
<meta name="twitter:label1" content="Reading time">
<meta name="twitter:data1" content="16-25 minutes">
</head>
<body>
<h1>rehype-meta</h1>
…
Types
This package is fully typed with TypeScript.
The extra types Options
and Image
are exported.
Compatibility
Projects maintained by the unified collective are compatible with all maintained versions of Node.js. As of now, that is Node.js 12.20+, 14.14+, and 16.0+. Our projects sometimes work with older versions, but this is not guaranteed.
This plugin works with rehype-parse
version 3+, rehype-stringify
version 3+,
rehype
version 4+, and unified
version 6+.
Security
Use of rehype-meta
is relatively safe, however, it is possible for an attacker
to define metadata from within a because of the matter
integration.
Related
unified-infer-git-meta
— infer file metadata from Gitrehype-infer-description-meta
— infer file metadata from the description of a documentrehype-infer-title-meta
— infer file metadata from the title of a documentrehype-infer-reading-time-meta
— infer file metadata about how long the document takes to readrehype-document
— wrap a fragment in a documentrehype-format
— format HTMLrehype-minify
— minify HTML
Contribute
See contributing.md
in rehypejs/.github
for ways
to get started.
See support.md
for ways to get help.
This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.