open-graph-dynamic

A package for dynamic generate og image for blog/posts based in templates simples and customs, support all platforms JavaScript & TypeScript.

Start

npm install open-graph-dynamic

#or with yarn

yarn add open-graph-dynamic

• create data with for post content, exemple:

import { openGraphInputType, openGraphOutputType } from 'open-graph-dynamic';

const data: openGraphInputType = {
  title:
    'Automatically Generate OG Images From Post Content Automatically Generate OG Images From Post Content Automatically Generate OG Images From Post Content',
  tags: ['#next', '#react', '#microfronds'],
  timestamp: 'November 11, 2022',
  url: 'yazaldefilimone.dev',
  user: {
    name: `Yazalde Filimone`,
    username: `@yazaldefilimone`,
    image: 'https://github.com/yazaldefilimonepinto.png',
  },
};

// pass data of function openGraph
let ogImage: openGraphOutputType;

(async function () {
  ogImage = await openGraph(data);
})();

• Exemple In ReactJs:

function SEO(props) {
  //...
  return (
    //...
    {ogImage && <meta property="og:url" content={ogImage.source} />}
    //...
  )
}

Result:

MIT © Yazalde Filimone