呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#工具推荐 #前端 #opengraph #tools #og #设计
最有用的一集：https://imgsrc.io/

🌟 分享一个制作 OG 图片的工具

http://imgsrc.io

内置多种OG图片的布局方式，只需要选择自己想要的布局，然后修改文案和图片即可，免费版有水印。

评论区我放了3种显示效果，感兴趣可以看下 👇

#buildinpublic #indiehackers


from Twitter @javayhuwx
工具推荐 前端 opengraph tools og 设计 buildinpublic indiehackers
#优质博文 #前端 #nextjs #opengraph #svg

在 Vercel 部署一个 OpenGraph Image 服务

Satori ：将 HTML 和 CSS 转换为 SVG 的库。

AI 摘要：这篇文章介绍了如何使用 `satori` 在 Vercel 上部署一个 OpenGraph Image 服务。文章首先描述了使用 Fastify 作为基座服务，并通过 `satori` 库生成 OpenGraph 图片。具体步骤包括初始化项目、引入必要的依赖库（如 `satori` 和 `@resvg`）、封装字体和图片生成方法，以及在 Vercel 环境下的部署。还强调了如何处理远程图片、引入自定义字体以及确保图片链接的可访问性。最终通过 Fastify 路由生成和缓存 OpenGraph 图片。


via https://innei.in/
innei.in
在 Vercel 部署一个 OpenGraph Image 服务
在 Vercel 部署一个 OpenGraph Image 服务
这篇文章是实现 Follow 的 Separate main application and external pages and SEO support 这个 PR 的一部分技术细节，由于其中的技术细节较多，所以这将是系列文中的一篇。 用过 Next.js 的同学应该都知道，Next.js 自带
优质博文 前端 nextjs opengraph svg
 
 
Back to Top