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
yarn add gatsby-plugin-open-graph-imagesornpm i gatsby-plugin-open-graph-images- 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 images default: "__generated" |
If you use plugins that iterate over your pages, like gatsby-plugin-sitemap, exclude the componentGenerationDir:
{
resolve: `gatsby-plugin-sitemap`,
options: {
exclude: [`/__generated/*`],
},
},