Description

Easly get dynamically generated open graph images for your markdown pages out of a custom template of your own and use the nifty component to pass to your pages SEO ready og images.

How to install

1. yarn add gatsby-plugin-og-images or npm i gatsby-plugin-og-images
2. Place your config options in your main gatsby-config.js as mentioned below.

Sample gatsby-config.js configuration:

plugins: [
  {
    resolve: 'gatsby-plugin-og-images',
    options: {
      template: 'og',
      domain: process.env.GATSBY_DOMAIN,
      debug: true
    }
  }
];

Available options

In-built SEO component

In combo with og image generation the plugin provides a component that in combo with react-helmet provides SEO friendly og:images.

To use it:

...
import OgImage from  'gatsby-plugin-og-images'
....
 
const  Og = ({ data }) => {
    const { id } = data.markdownRemark
    return (
        <div>
            ...
            <OgImage id={id}  />
        </div>
    )
}
 
export const og = graphql`
query og($id: String!) {
    markdownRemark(id: { eq: $id }) {
        id
    }
}`