Gatsby Plugin: Open Graph Images

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

How to install

1. yarn add gatsby-plugin-open-graph-images or npm i gatsby-plugin-open-graph-images
2. Place the plugin in your main gatsby-config.js:

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

How to use

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

exports.createPages = async ({ actions }) => {
  const { createPage } = actions;

  const openGraphImage = createOpenGraphImage(createPage, {
    path: "/og-image/index.png",
    component: path.resolve(`src/templates/index.og-image.js`),
    size: {
      width: 400,
      height: 50,
    },
    waitCondition: "networkidle0",
    context: {
      description: "a image created with gatsby-plugin-open-graph-images",
    },
  });
};

You can than simply include your open-graph image within your page. For example by using react-helmet:

<Helmet>
  <meta property="og:image" content={domain + "/og-image/index.png"} />
  <meta property="og:image:width" content="400" />
  <meta property="og:image:width" content="50" />
</Helmet>

A more advanced usage of createOpenGraphImage() is described in this dev.to article.

Options

| option | type | description | | ---------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------ | | defaultSize | optional | The default size for the generated image if not explicitly specified.default: { width: 1200, height: 630} | | componentGenerationDir | optional | The directory where the rendered gatsby components are temporarily stored, to be later saved as imagesdefault: "__generated" |

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

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