Astro OG Image: Meta Tags, Astro.site and Per-Page Images

Astro renders HTML on the server or at build time, so crawlers see your tags. The only real trap is relative image URLs.

Set the site URL

// astro.config.mjs
import { defineConfig } from 'astro/config'
export default defineConfig({ site: 'https://yourdomain.com' })

Without site, Astro.site is undefined and you'd end up with relative image URLs, which crawlers can't use.

A head component

---
// src/components/SEOHead.astro
const { title, description, image = '/og-image.png' } = Astro.props
const canonical = new URL(Astro.url.pathname, Astro.site)
const ogImage = new URL(image, Astro.site)
---
<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonical} />
<meta property="og:type" content="website" />
<meta property="og:url" content={canonical} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

Use it inside <head> in your layout: <SEOHead title={title} description={description} />. Launchpack Pro exports a ready LaunchHead.astro with your icons and colors.

Per-page images

Pass image="/og/my-post.png" from a page or a content collection's frontmatter. For images generated from each post's title at build time, community packages built on Satori can render them; for a static set (home, socials, launch platforms) a single designed image per page is simpler.

Checking it

Run astro build && astro preview, view the source and confirm og:image starts with your domain. After deploying, test the live URL in the link preview checker.

Images and an Astro head component

Pro exports public/ files and LaunchHead.astro, ready to paste.

Make my kit

Questions

How do I add an OG image in Astro?

Put the image in public/, set site in astro.config.mjs, and output og:image with new URL(image, Astro.site) in a head component used by your layout.

Why is my Astro og:image URL relative?

site isn't set in astro.config.mjs, so Astro.site is undefined. Set it to your production domain.

Can Astro generate OG images per page?

Yes, with community packages that render images at build time, or by pointing each page's image prop at its own file.

Astro OG image: meta tags in your layout, with absolute URLs