OGGEN - OpenGraph metadata generator

Dynamically generate your open-graph metadata for your html files (with typescript support).

Usage

Install package:

# npm
npm install @it-tools/oggen

# yarn
yarn install @it-tools/oggen

# pnpm
pnpm install @it-tools/oggen

Import:

// ESM or typescript
import { generateMeta } from '@it-tools/oggen';

// CommonJS
const { generateMeta } = require('@it-tools/oggen');

API

Basic example

import { generateMeta } from '@it-tools/oggen';

const metadata = generateMeta(
  {
    title: 'IT-Tools',
    description: 'Lorem ipsum',
    image: {
      url: 'https://example.com/image.png',
      alt: 'The image alt text',
      width: 600,
      height: 400,
    },
    locale: 'en_US',
    siteName: 'IT-Tools',
    // Put here whichever key you want to generate the meta with
    //...
  },
  // Optional configuration
  {
    indentation: 2, // default: 0
    indentWith: '   ', // default: '  ' (two spaces)
    generateTwitterCompatibleMeta: true, // default: false
  },
);

console.log(metadata);

/*

      <!-- og meta -->
      <meta property="og:title" value="IT-Tools" />
      <meta property="og:description" value="Lorem ipsum" />
      <meta property="og:image:url" value="https://example.com/image.png" />
      <meta property="og:image:alt" value="The image alt text" />
      <meta property="og:image:width" value="600" />
      <meta property="og:image:height" value="400" />
      <meta property="og:locale" value="en_US" />
      <meta property="og:site_name" value="IT-Tools" />

      <!-- twitter meta -->
      <meta name="twitter:title" value="IT-Tools" />
      <meta name="twitter:description" value="Lorem ipsum" />
      <meta name="twitter:image" value="https://example.com/image.png" />
      <meta name="twitter:image:alt" value="The image alt text" />


*/

Please refer to ogp.me for the metadata semantic

Arrays

It support array of data

const metadata = generateMeta({
  music: {
    author: [
      { name: 'Person 1 ', city: 'London' },
      { name: 'Person 2', city: 'Paris' },
    ],
    tags: ['Tag 1', 'Tag 2'],
  },
});

console.log(metadata);

/*

<!-- og meta -->
<meta property="og:music:author:name" value="Person 1" />
<meta property="og:music:author:city" value="London" />
<meta property="og:music:author:name" value="Person 2" />
<meta property="og:music:author:city" value="Paris" />
<meta property="og:music:tags" value="Tag 1" />
<meta property="og:music:tags" value="Tag 2" />

*/

Twitter

You can put your extra twitter thing under the twitter key

const metadata = generateMeta(
  {
    title: 'IT-Tools',
    description: 'Lorem ipsum',
    twitter: {
      title: 'Title for twitter',
      card: 'summary_large_image',
    },
  },
  {
    generateTwitterCompatibleMeta: true, // default: false
  },
);

console.log(metadata);

/*

<!-- og meta -->
<meta property="og:title" value="IT-Tools" />
<meta property="og:description" value="Lorem ipsum" />

<!-- twitter meta -->
<meta name="twitter:title" value="Title for twitter" />
<meta name="twitter:description" value="Lorem ipsum" />   // <-- present because of 'generateTwitterCompatibleMeta'
<meta name="twitter:card" value="summary_large_image" />

*/

Development

• Clone this repository
• Install dependencies using pnpm install
• Run interactive tests using pnpm dev

Credits

Coded with ❤️ by Corentin Thomasset.

License

This project is under the MIT license.