open-graph-dynamic
TypeScript icon, indicating that this package has built-in type declarations

0.1.10 • Public • Published

Unsplash welcome! License License Stars Languages

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:

open graph

MIT © Yazalde Filimone

Package Sidebar

Install

npm i open-graph-dynamic

Weekly Downloads

53

Version

0.1.10

License

MIT

Unpacked Size

17.1 kB

Total Files

20

Last publish

Collaborators

  • yazaldefilimone