Back to Docs

Static site framework

Astro OG Image Integration

Add automatic MyOG.social images to Astro layouts, markdown pages, and content collections.

Prerequisites

  • An Astro site with a shared layout or Head component
  • A configured production site URL
  • A MyOG.social account with your domain added

How MyOG fits Astro

Astro sites usually centralize meta tags in a layout or Head.astro component. That makes MyOG a small server-rendered tag addition.

Use Astro.url to build the current page URL, or pass a canonical URL prop from content collections if your routing needs tighter control.

This is a docs/code-template opportunity, not a plugin. Astro developers expect a small component-level change.

1

Choose a layout

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

2

Add the Astro code

Head.astro snippet

Add this to the shared component that renders page metadata.

---
const pageURL = Astro.url.href
const myogImageURL = `https://api.myog.social/og?url=${encodeURIComponent(pageURL)}&template=screenshot-right`
---

<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} />
3

Place it correctly

  1. Find the component that renders your head tags, often src/components/Head.astro or a BaseLayout.astro.
  2. Build the current page URL from Astro.url or an explicit canonical prop.
  3. Add og:image, dimensions, twitter:card, and twitter:image alongside your existing title and description tags.
  4. Build and inspect the generated HTML for a markdown post and a normal page.

Avoid duplicate og:image tags

Some Astro starters already include an image prop or SEO component that emits og:image. Replace that image value with MyOG or add a condition so only one og:image is emitted.

Dynamic pages

For content collections, pass the page URL or slug into your Head component. For static markdown pages, Astro.url is often enough as long as the site option is configured for production.

Test the result

  • Run an Astro build and inspect dist HTML.
  • Test the deployed public URL with the MyOG checker.
  • Verify content collection pages separately from static pages.

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

Known limitations

Missing site configuration can produce localhost or relative URLs in build output.
Do not rely on client-side scripts to add OG tags.
Starlight and other Astro integrations may have their own head injection path.

Sources

Ready to get started?

Sign up for free and add generated social cards to Astro pages.

Already have an account?

cdf733b534ea2f2ed964d150330b323c44837e4f