Naive Puppets Marching

    gatsby-plugin-open-graph-images

    0.1.8 • Public • Published

    gatsby-plugin-open-graph-images

    Gatsby Plugin: Open Graph Images

    Publish npm version

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

    Install

    npm i gatsby-plugin-open-graph-images

    DownloadsWeekly Downloads

    92

    Version

    0.1.8

    License

    MIT

    Unpacked Size

    51.3 kB

    Total Files

    17

    Last publish

    Collaborators

    • duffleit