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/*`],
  },
},