Back to Docs

React static site generator

Gatsby OG Image Integration

Add automatic MyOG.social images to Gatsby pages with the Head API, siteMetadata, and reusable SEO components.

Prerequisites

  • A Gatsby site using the Head API or an SEO component
  • siteMetadata.siteUrl set to your production domain
  • A MyOG.social account with your domain added

How MyOG fits Gatsby

Gatsby's Head API renders metadata into the static HTML Gatsby builds. That makes it a good fit for MyOG because social crawlers can read the image tags without running client code.

Add MyOG to your reusable SEO component, then pass the current pathname from each page or template.

For programmatic pages, build the pathname from pageContext or GraphQL data, then generate one MyOG URL per published page.

1

Choose a layout

MyOG detects page content and branding automatically. The layout only controls image composition.

2

Add the Gatsby code

SEO component Head output

Use this pattern inside a Gatsby SEO component called from page Head exports.

const siteURL = "https://example.com"

function getMyOGImageURL(pathname: string) {
  const pageURL = siteURL + pathname
  return `https://api.myog.social/og?url=${encodeURIComponent(pageURL)}&template=screenshot-right`
}

export function SEO({ pathname }: { pathname: string }) {
  const myogImageURL = getMyOGImageURL(pathname)

  return (
    <>
      <meta property="og:image" content={myogImageURL} />
      <meta property="og:image:width" content="1200" />
      <meta property="og:image:height" content="630" />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:image" content={myogImageURL} />
    </>
  )
}

In a production Gatsby site, read siteURL from siteMetadata instead of hardcoding it.

3

Place it correctly

  1. Confirm siteMetadata.siteUrl matches the production site.
  2. Add a helper that builds the MyOG image URL from siteUrl and pathname.
  3. Return the helper output from your SEO component inside the page Head export.
  4. Run gatsby build and inspect public HTML for a page and a template-generated post.

Avoid duplicate og:image tags

Many Gatsby starters already accept an image prop in their SEO component. Replace that prop with the MyOG URL or make it the fallback so the page does not emit two competing og:image values.

Dynamic pages

For createPages output, pass the pathname through pageContext or derive it from the page's slug. The Head API can then render the correct MyOG URL at build time.

Test the result

  • Inspect the built HTML in public/ after gatsby build.
  • Test a programmatic page and a normal page.
  • Check the deployed URL, not localhost:8000.

Start with the MyOG Open Graph Checker, then refresh social platform caches if needed.

Known limitations

Client-side Helmet updates are less reliable than the Head API for social crawlers.
Incorrect siteUrl values create wrong absolute URLs.
Draft pages or preview-only routes cannot produce public social cards.

Sources

Ready to get started?

Sign up for free and add generated OG images to Gatsby pages.

Already have an account?

cdf733b534ea2f2ed964d150330b323c44837e4f