跳转到正文
青云 Qingyun
返回

AstroPaper 文章的动态 OG 图生成

更新于:
编辑此页

OG 图(社交分享图)会直接影响内容在社交平台上的点击率。动态生成可以让每篇文章拥有更贴合标题的视觉卡片。

目录

静态 OG 图的限制

旧方案依赖 frontmatter 中的 ogImage;若未填写则回退到站点默认图。问题是:大量文章会共用同一张图,区分度较低。

动态 OG 图机制

从 AstroPaper v1.4.0 开始,项目使用 Satori 在构建阶段生成动态 OG 图。通常会为未配置 ogImage 且非草稿的文章自动生成。

动态图包含哪些信息

动态图一般包含:

这样每篇文章在分享时都更具识别度。

非拉丁文字支持

如果标题包含中文、日文等非拉丁文字,默认字体可能无法正确渲染。可在 loadGoogleFont.ts 中替换 fontsConfig 为支持 CJK 的字体。

性能取舍

动态图会增加构建时间。假设每张图约 1 秒,文章越多,构建时长近似线性增长。

若文章很多,可考虑关闭 dynamicOgImage 并按需手动配置。

当前限制

Satori 仍有一些限制,例如:

总结

动态 OG 图能显著提升内容分发质量,但也会增加构建成本。建议在“内容规模”和“构建时长”之间平衡取舍。


编辑此页
分享这篇文章:

上一篇
如何在 Astro 博客文章中使用 LaTeX 公式
下一篇
如何在 AstroPaper 中集成 Giscus 评论