OG Pilot
Astro guide

OG Image Generator for Astro

Generate signed OG image URLs in Astro server context and render them in your layout metadata.

1

Configure OG Pilot credentials

Set OG_PILOT_API_KEY and OG_PILOT_DOMAIN in Astro server env vars.

2

Create a reusable helper

Generate OG image URLs in server code using page-level data.

3

Inject metadata in layout

Set og:image and twitter:image tags in your Astro layout template.

4

Re-scrape social URLs

Use platform debuggers to refresh caches after publishing.

Astro

Astro server helper + layout metadata

// src/lib/og-image.ts
import { configure, createImage } from "og-pilot-js"

configure((config) => {
  config.apiKey = import.meta.env.OG_PILOT_API_KEY
  config.domain = import.meta.env.OG_PILOT_DOMAIN
})

export async function ogImageForPage(data: {
  title: string
  description: string
  path: string
}) {
  return createImage(
    {
      template: "page",
      title: data.title,
      description: data.description,
      path: data.path,
    },
    { iat: Math.floor(Date.now() / 1000) },
  )
}

---
// src/layouts/BaseLayout.astro
import { ogImageForPage } from "../lib/og-image"

const ogImage = await ogImageForPage({
  title: Astro.props.title,
  description: Astro.props.description,
  path: Astro.url.pathname,
})
---
<meta property="og:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content={ogImage} />

Common questions

Does this work for static Astro builds?

Yes. Generate URLs at build-time or in server-rendered routes depending on your setup.

Can Astro pages use different OG Pilot templates?

Yes. Send template-specific payload fields for blog, product, event, and more.

Ship branded previews for every URL

OG Pilot turns page metadata into consistent, high-quality social previews without manual design exports.

Read API docsStart free trial