Centralized data layer for multiple content sources or frameworks. Dive deep into Valhalla

ContactSign Up for Free
Community Plugin
View plugin on GitHub

Gatsby plugin for dynamic open graph images

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


This plugin originates from gatsby-plugin-open-graph-images and uses the same approach - deriving open graph images from React components and integrating their creation into the Gatsby build pipeline.

The idea is awesome but it didn’t work as I expected. I figured out gatsby-plugin-open-graph-images uses Gatsby cache to manage open-graph image metadata and the cache is not updated correctly.

After several tries, I decided to change the internal implementation based on file system. Hope this can help anyone who struggles with cache issue.

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.


    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.


    • 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 =;
      posts.forEach(({ node }) => {
          path: node.frontmatter.slug,
          component: postTemplate,
          context: {
            // pass open-graph image metadata as pageContext
            ogImage: createOpenGraphImage(createPage, {
              component: postOgImageTemplate,
              context: {
                title: node.frontmatter.title,
    • Within your page or component
    export const Head = ({ location, pageContext }) => {
      const { ogImage } = pageContext;
      return (
    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" />


createOpenGraphImage(createPage, options)


parameter Required description
createPage O Gatsby createPage action
options O


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 preporty 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"


Open-graph image metadata

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


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

  resolve: `gatsby-plugin-sitemap`,
  options: {
    exclude: [`/__og-image/*`],
© 2022 Gatsby, Inc.