Community Plugin

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

Place the plugin in your main gatsby-config.js

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

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