rehype-meta

[![Build][build-badge]][build]
[![Coverage][coverage-badge]][coverage]
[![Downloads][downloads-badge]][downloads]
[![Size][size-badge]][size]
[![Sponsors][sponsors-badge]][collective]
[![Backers][backers-badge]][collective]
[![Chat][chat-badge]][chat]

[rehype][] plugin to add metadata to the .

Contents

* What is this?
* When should I use this?
* Install
* Use
* API
* [unified().use(rehypeMeta[, options])](#unifieduserehypemeta-options)
* Image
* Options
* Metadata
* Examples
* Example: frontmatter in markdown
* Example: inferring metadata
* 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 .
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][rehype-document], wraps fragments in
documents.

Install

This package is [ESM only][esm].
In Node.js (version 16+), install with [npm][]:

``sh
npm install rehype-meta
`

In Deno with [esm.sh][esmsh]:

`js
import rehypeMeta from 'https://esm.sh/rehype-meta@4'
`

In browsers with [esm.sh][esmsh]:

`html

`

Use

Say our module example.js looks as follows:

`js
import {rehype} from 'rehype'
import rehypeMeta from 'rehype-meta'

const file = await rehype()
.data('settings', {fragment: true})
.use(rehypeMeta, {
author: 'Jane Doe',
authorFacebook: 'janedoe',
authorTwitter: '@jane',
copyright: true,
description:
'The city has changed drastically over the past 40 years, yet the M.T.A. map designed in 1979 has largely endured.',
image: {
alt: 'M.T.A. map designed in 1979',
height: '550',
url: 'https://static01.nyt.com/images/2019/12/02/autossell/mta-promo-image/mta-crop-facebookJumbo.jpg',
width: '1050'
},
modified: '2019-12-03T19:13:00.000Z',
name: 'The New York Times',
og: true,
origin: 'https://www.nytimes.com',
pathname: '/interactive/2019/12/02/nyregion/nyc-subway-map.html',
published: '2019-12-02T10:00:00.000Z',
readingTime: 11.1,
section: 'New York',
separator: ' | ',
siteAuthor: 'The New York Times',
siteTags: [
'US Politics',
'Impeachment',
'NATO',
'London',
'Food',
'Poverty',
'Climate Change',
'Global Warming'
],
siteTwitter: '@nytimes',
tags: [
'Subway',
'Map',
'Public Transit',
'Design',
'MTA',
'Massimo Vignelli',
'NYC'
],
title:
'The New York City Subway Map as You’ve Never Seen It Before',
twitter: true,
type: 'article'
})
.process('')

console.log(String(file))
`

…now running node example.js yields:

`html




































`

API

This package exports no identifiers.
The default export is [rehypeMeta][api-rehype-meta].

$3

Add metadata to the .

###### Parameters

* options ([Options][api-options], optional)
— configuration

###### Returns

Transform ([Transformer][unified-transformer]).

##### Notes

###### Algorithm

* adds a if one doesn’t already exist
* overwrites existing metadata in (for example, when a
`

If name is 'Example':

`html

`

If title is 'About' and name is 'Example':

`html

`

If title is 'About', name is 'Example', and separator to ' | ':

`html

`

Examples

$3

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:

`markdown
---
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 a module example.js:

`js
import remarkFrontmatter from 'remark-frontmatter'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeDocument from 'rehype-document'
import rehypeMeta from 'rehype-meta'
import rehypeStringify from 'rehype-stringify'
import {read} from 'to-vfile'
import {unified} from 'unified'
import {matter} from 'vfile-matter'

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(function () {
return function (_, file) {
matter(file)
}
})
.use(remarkRehype)
// rehype-document manages non-metadata things in .
.use(rehypeDocument, {
css: 'https://planets.com/index.css',
js: 'https://planets.com/index.js'
})
// Site wide metadata:
.use(rehypeMeta, {
copyright: true,
name: 'Planets',
og: true,
siteAuthor: 'J. Galle',
siteTags: ['planet', 'solar', 'galaxy'],
siteTwitter: '@the_planets',
twitter: true,
type: 'article'
})
.use(rehypeStringify)
.process(file)

console.log(String(file))
`

…now running node example.js yields:

`html

























Neptune

To do: write some stuff about why neptune is cool.

`

$3

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:

`js
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'
import {read} from 'to-vfile'
import {unified} from 'unified'
import unifiedInferGitMeta from 'unified-infer-git-meta'

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:

`html


















rehype-meta


…
`

Types

This package is fully typed with [TypeScript][].
It exports the additional types [Image][api-image] and
[Options][api-options].

It also registers expected fields on file.data.meta and file.data.matter
with vfile.
If you’re working with the file, make sure to import this plugin somewhere in
your types, as that registers the new fields on the file.

`js
/**
* @import {} from 'rehype-meta'
*/

import {VFile} from 'vfile'

const file = new VFile()

console.log(file.data.meta.title) //=> TS now knows that this is a string?.
`

Compatibility

Projects maintained by the unified collective are compatible with maintained
versions of Node.js.

When we cut a new major release, we drop support for unmaintained versions of
Node.
This means we try to keep the current release line, rehype-meta@^4, compatible
with Node.js 16.

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][vfile-matter]
integration.

Related

* unified-infer-git-meta
— infer file metadata from Git
* rehype-infer-description-meta
— infer file metadata from the description of a document
* rehype-infer-title-meta
— infer file metadata from the title of a document
* rehype-infer-reading-time-meta
— infer file metadata about how long the document takes to read
* [rehype-document][rehype-document]
— wrap a fragment in a document
* rehype-format
— format HTML
* rehype-minify
— minify HTML

Contribute

See [contributing.md][contributing] in [rehypejs/.github][health] for ways
to get started.
See [support.md`][support] for ways to get help.

This project has a [code of conduct][coc].
By interacting with this repository, organization, or community you agree to
abide by its terms.

License

[MIT][license] © [Titus Wormer][author]

[build-badge]: https://github.com/rehypejs/rehype-meta/workflows/main/badge.svg

[build]: https://github.com/rehypejs/rehype-meta/actions

[coverage-badge]: https://img.shields.io/codecov/c/github/rehypejs/rehype-meta.svg

[coverage]: https://codecov.io/github/rehypejs/rehype-meta

[downloads-badge]: https://img.shields.io/npm/dm/rehype-meta.svg

[downloads]: https://www.npmjs.com/package/rehype-meta

[size-badge]: https://img.shields.io/bundlejs/size/rehype-meta

[size]: https://bundlejs.com/?q=rehype-meta

[sponsors-badge]: https://opencollective.com/unified/sponsors/badge.svg

[backers-badge]: https://opencollective.com/unified/backers/badge.svg

[collective]: https://opencollective.com/unified

[chat-badge]: https://img.shields.io/badge/chat-discussions-success.svg

[chat]: https://github.com/rehypejs/rehype/discussions

[npm]: https://docs.npmjs.com/cli/install

[esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

[esmsh]: https://esm.sh

[health]: https://github.com/rehypejs/.github

[contributing]: https://github.com/rehypejs/.github/blob/main/contributing.md

[support]: https://github.com/rehypejs/.github/blob/main/support.md

[coc]: https://github.com/rehypejs/.github/blob/main/code-of-conduct.md

[license]: license

[author]: https://wooorm.com

[rehype]: https://github.com/rehypejs/rehype

[rehype-document]: https://github.com/rehypejs/rehype-document

[typescript]: https://www.typescriptlang.org

[unified]: https://github.com/unifiedjs/unified

[unified-transformer]: https://github.com/unifiedjs/unified#transformer

[vfile-matter]: https://github.com/vfile/vfile-matter

[timestamp]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Date#Timestamp_string

[config]: #config

[api-image]: #image

[api-options]: #options

[api-rehype-meta]: #unifieduserehypemeta-options

[m-article-author]: #metapropertyarticleauthor

[m-article-modified-time]: #metapropertyarticlemodified_time

[m-article-published-time]: #metapropertyarticlepublished_time

[m-article-section]: #metapropertyarticlesection

[m-article-tag]: #metapropertyarticletag

[m-author]: #metanameauthor

[m-canonical]: #linkrelcanonical

[m-copyright]: #metanamecopyright

[m-description]: #metanamedescription

[m-keywords]: #metanamekeywords

[m-og-description]: #metapropertyogdescription

[m-og-image]: #metapropertyogimage

[m-og-site-name]: #metapropertyogsite_name

[m-og-title]: #metapropertyogtitle

[m-og-type]: #metapropertyogtype

[m-og-url]: #metapropertyogurl

[m-title]: #title-1

[m-theme-color]: #metanametheme-color

[m-twitter-card]: #metanametwittercard

[m-twitter-creator]: #metanametwittercreator

[m-twitter-data1]: #metanametwitterdata1

[m-twitter-data2]: #metanametwitterdata2

[m-twitter-image]: #metanametwitterimage

[m-twitter-label1]: #metanametwitterlabel1

[m-twitter-label2]: #metanametwitterlabel2

[m-twitter-site]: #metanametwittersite

[o-author]: #author

[o-author-facebook]: #authorfacebook

[o-author-twitter]: #authortwitter

[o-color]: #color

[o-copyright]: #copyright

[o-description]: #description

[o-image]: #image-1

[o-modified]: #modified

[o-name]: #name

[o-og]: #og

[o-og-name-in-title]: #ognameintitle

[o-origin]: #origin

[o-path-name]: #pathname

[o-published]: #published

[o-reading-time]: #readingtime

[o-section]: #section

[o-separator]: #separator

[o-site-author]: #siteauthor

[o-site-tags]: #sitetags

[o-site-twitter]: #sitetwitter

[o-tags]: #tags

[o-title]: #title

[o-twitter]: #twitter

[o-type]: #type