NEW RELEASE:

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.


📌 NOTICE


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.

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

Returns

Open-graph image metadata

{
  componentPath: '__og-image/c6f9bb',
  imagePath: 'public/__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/*`],
  },
},
© 2022 Gatsby, Inc.