Dynamic OG Images for Gatsby Sites

Ditch gatsby-plugin-image for OG cards. One API call, perfect previews on every social platform.

Get Started

gatsby-image Free

No heavy plugins needed—just simple, clean image generation.

React Helmet

Native integration with React Helmet for easy meta tag management.

SSG Compatible

Works at build time for static site generation workflows.

Example Integration

// src/templates/blog-post.js
import { Helmet } from 'react-helmet';

export default function BlogPost({ data }) {
  const { title } = data.markdownRemark.frontmatter;
  const ogUrl = `https://imagoapi.com/api/og/generate?title=${encodeURIComponent(title)}&template=modern&api_key=${process.env.GATSBY_IMAGO_API_KEY}`;

  return (
    <>
      <Helmet>
        <meta property="og:image" content={ogUrl} />
        <meta name="twitter:image" content={ogUrl} />
        <meta name="twitter:card" content="summary_large_image" />
      </Helmet>
    </>
  );
}

Ready to improve your social shares?

Join thousands of developers using Imago API for stunning OG images.

Start Building Free