示例 OG 社交图片

为单篇文章添加自定义社交图片

这篇文章演示了如何为博客文章添加自定义的 Open Graph 社交图片(俗称 OG 图)。当你在文章 frontmatter 中加上可选的 ogImage 字段时,本站会跳过 satori 自动生成的图片,改用你指定的图片作为社交分享卡片。

打开本文源码 src/content/post/109-示例-og-社交图片.md,可以看到 ogImage 指向了 public 目录里的一张图片¹:

ogImage: "/og.png"

把这篇文章的链接粘贴到微信、X(Twitter)、Telegram、Slack 等支持 Open Graph 协议的客户端,卡片预览就会展示 /og.png 而不是自动生成的版本。

工作原理

• src/content.config.ts 在 post schema 里声明了 ogImage: z.string().optional()
• src/layouts/BlogPost.astro 取 ogImage ?? \/og-image/${post.id}.png`作为socialImage`
• src/pages/og-image/[...slug].png.ts 在生成静态 OG 图时用 .filter(({ data }) => !data.ogImage) 把已指定 ogImage 的文章跳过 —— 不浪费构建时间
• src/components/BaseHead.astro 把这个值注入到 <meta property="og:image"> 和 <meta property="twitter:image">

使用建议

• 图片放在 public/ 下,用绝对路径(以 / 开头)引用,如 /og.png
• 推荐尺寸 1200×630,大小控制在 1MB 以内,JPG / PNG / WebP 均可
• 不指定 ogImage 时会用 satori 基于标题自动生成 —— 大多数情况下足够了,只有需要强品牌露出的文章再单独设置