Example OG Social Image

Adding Custom Social Images for Individual Posts

This article shows how to add custom Open Graph social images (commonly called OG images) to blog posts. When you add the optional ogImage field to a post’s frontmatter, this site will skip the satori-generated image and use your specified image as the social share card.

Open the source of this post (src/content/post/109-示例-og-社交图片.md) and you’ll see that ogImage points to an image in the public directory¹:

ogImage: "/og.png"

Paste this post’s link into clients that support the Open Graph protocol—such as WeChat, X (Twitter), Telegram, Slack—and the card preview will display /og.png instead of the auto-generated version.

How It Works

• src/content.config.ts declares ogImage: z.string().optional() in the post schema
• src/layouts/BlogPost.astro uses ogImage ?? \/og-image/${post.id}.png`as thesocialImage`
• src/pages/og-image/[...slug].png.ts filters out posts that already have an ogImage with .filter(({ data }) => !data.ogImage) when generating static OG images — saving build time.
• src/components/BaseHead.astro injects this value into <meta property="og:image"> and <meta property="twitter:image">

Usage Tips

• Place images under public/ and reference them with an absolute path (starting with /), e.g., /og.png
• Recommended dimensions: 1200×630, keep size under 1MB, JPG / PNG / WebP all work
• If ogImage is not specified, satori will generate one based on the title — sufficient for most cases. Only set it separately for posts that require strong brand presence.