How to Add Custom OG Images to Your Astro Site
Astro sites often start without any OG image setup - and end up showing blank previews when links are shared. Adding a custom OG image takes one meta tag in your layout's `<head>`. Here's everything you need to know.
Add og:image in your base layout
In your `BaseLayout.astro` or equivalent, add `<meta property="og:image" content={ogImageUrl} />` inside `<head>`. Pass the URL as a prop from each page or use a default for the whole site.
Per-page OG images for blog posts
For content collections, pass the OG image URL through frontmatter and render it dynamically in your layout. OGImagen generates an image for each post title and gives you the frontmatter snippet.
Twitter card tags alongside og:image
Always pair `og:image` with `twitter:card: "summary_large_image"` and `twitter:image` for proper Twitter/X previews. The OGImagen snippet includes both.
Absolute URLs are required
Social crawlers require absolute URLs for images. Always prefix your image path with your site's full URL (e.g. `https://yoursite.com/og/post.png`) rather than a relative path.
Generate at author time, not build time
Astro can render cards at build, but that ties image work to build duration. Generating over MCP while you write the post, then referencing the CDN URL in frontmatter, keeps builds fast and the image stable across rebuilds.
Generate your OG image in seconds
Paste a title, pick a brand color, and get production-ready social cards for every platform. Try the AI generator free, no signup, or start from a free template.