Now 100x Faster

Read the latest from Gatsby CTO Kyle Mathews Re-introducing Gatsby, a Reactive Site Generator

ContactSign Up for Free
Community Plugin
View plugin on GitHub



A super-flexible but more involved Social Card Image plugin.

Build your own completely custom social card html and css code (which is parametrizable with the values from your post frontmatter) and have it autogenerated on build. All without 3rd party platforms.

How to install

npm install gatsby-remark-social-image

How to use

In your gatsby-node.js file:

const renderCard = ({title, author}) => `<p>${title}</p><p>${author}</p>`

module.exports = {
  plugins: [
      resolve: 'gatsby-remark-social-image',
      options: { design: renderCard },

Be aware that that the parameters in the renderCard function will be destructured from the frontmatter of the node you’re using it on.

© 2022 Gatsby, Inc.