Gatsby plugin for dynamic open graph images

A Gatsby plugin to derive and generate images for the Open Graph Protocol directly from React Components.

📌 NOTICE

This plugin originates from gatsby-plugin-open-graph-images and uses the same approach and usage. The only difference is the internal implementation. It creates open graph images relying only on file system.

How to install

npm i gatsby-plugin-dynamic-open-graph-images

How to use

1. Place the plugin in your main gatsby-config.js

   plugins: [`gatsby-plugin-dynamic-open-graph-images`];

2. The creation of Open Graph images is done by createOpenGraphImage() within your gatsby-node.js file.

   Example

   const { createOpenGraphImage } = require("gatsby-plugin-dynamic-open-graph-images");
   
   exports.createPages = async ({ actions }) => {
     const { createPage } = actions;
   
     const openGraphImage = createOpenGraphImage(createPage, {
       component: path.resolve(`src/templates/index.og-image.js`),
       size: {
         width: 400,
         height: 50,
       },
     });
   };

   You can also pass open-graph image metadata as pageContext and simply use it within your page or component.

   Example

   • gatsby-node.js

   const { createOpenGraphImage } = require("gatsby-plugin-dynamic-open-graph-images");
   
   exports.createPages = async ({ actions, graphql }) => {
     const { createPage } = actions;
   
     // query data
     const result = await graphql(...)
   
     // get posts data from query result
     const posts = result.data.allMdx.edges;
   
     posts.forEach(({ node }) => {
       createPage({
         path: node.frontmatter.slug,
         component: postTemplate,
         context: {
           // pass open-graph image metadata as pageContext
           ogImage: createOpenGraphImage(createPage, {
             component: postOgImageTemplate,
             context: {
               id: node.id,
               title: node.frontmatter.title,
               ...
             },
           }),
         },
       });
     });
   };

   • Within your page or component

   export const Head = ({ location, pageContext }) => {
     const { ogImage } = pageContext;
   
     return (
       <SEO
         ogImage={ogImage}
         ...
       />
     )
   }
   
   const SEO = ({ ogImage }) => {
     return (
       <>
         <meta property="og:image" content={domain + ogImage.imagePath} />
         <meta property="og:image:width" content="400" />
         <meta property="og:image:width" content="50" />
       </>
     );
   }

API

createOpenGraphImage(createPage, options)

Parameters

| parameter | Required | description | | ---------- | -------- | ---------------------------------------------------------------------------------------------------- | | createPage | O | Gatsby createPage action | | options | O | |

options

| option | Required | type | description | default | | ----------- | -------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------- | ----------------------------- | | component | O | string | The absolute path of React component for open-graph iamge template. It receives context value as pageContext. | N/A | | context | O | object | Gatsby page context. id property must be provided to distinguish components/images. | N/A | | size | X | { width: number, height: number } | The size for the generated image. | { width: 1200, height: 630} | | outputDir | X | string | The directory where the rendered gatsby components are temporarily stored, to be later saved as images. | "__og-image" |

Returns

Open-graph image metadata

{
  componentPath: '__og-image/c6f9bb',
  imagePath: '__og-image/c6f9bb.png',
  size: { width: 1200, height: 630 }
}

Note

If you use plugins that iterate over your pages, like gatsby-plugin-sitemap, exclude the outputDir:

{
  resolve: `gatsby-plugin-sitemap`,
  options: {
    exclude: [`/__og-image/*`],
  },
},