Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Easly get dynamically generated open graph images for your markdown pages out of a custom template of your own and use the nifty component to pass to your pages SEO ready og images.

How to install

  1. yarn add gatsby-plugin-og-images or npm i gatsby-plugin-og-images
  2. Place your config options in your main gatsby-config.js as mentioned below.

Sample gatsby-config.js configuration:

plugins: [
    resolve: 'gatsby-plugin-og-images',
    options: {
      template: 'og',
      domain: process.env.GATSBY_DOMAIN,
      debug: true

Available options

option value description
template string (required) Provide here the template you want to use as the OG image page (from the /templates folder
domain string (required, unless hosted on Netlify) Provide here the url of your website, you can obviously store it in a .env variable and ie. process.env.GATSBY_DOMAIN
debug boolean (otional) Log the generated og images

In-built SEO component

In combo with og image generation the plugin provides a component that in combo with react-helmet provides SEO friendly og:images.

To use it:

import OgImage from  'gatsby-plugin-og-images'

const  Og = ({ data }) => {
	const { id } = data.markdownRemark
	return (
			<OgImage id={id}  />

export const og = graphql`
query og($id: String!) {
	markdownRemark(id: { eq: $id }) {
© 2023 Gatsby, Inc.