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 your OG image in seconds
Paste a title, pick a brand color, and get production-ready social cards for every platform — with framework-specific meta tag snippets included.
Generate an OG image for your Astro site