我的作品 bookmark.style: 你的链接有了新的样式

xiaoluoboding · 2022年05月19日 · 最后由 koosol 回复于 2022年05月19日 · 66 次阅读

最近将一直自用的一款将任意链接转换生成分享图的工具 bookmark.style 发布到了 ProductHunt

bookmark.style 适用于开发者、创作者、公众号写手，它可以美化你的链接，让你的链接 “开口说话”，以下图片有 bookmark.style 生成，链接为：https://www.producthunt.com/posts/bookmark-style

需求

去年写了一篇文章《如何创建可视化的 Web Bookmark》

了解了一下 OG 协议，以及从搭建一个 Serveless 服务，到最终前端展现 Web Bookmark 样式。最终输出的内容有点类似 Twitter Card 或者 Notion 中的 Web Bookmark 的站点元信息。

这个需求也源自于我一直在维护的《前端技术栈月刊》，每次分享的工具、资源、教程链接好像很枯燥，所以我都会截取站点的图片加以说明，希望带给读者更好的体验，那么如何将一个链接自动就转变为带图文的卡片呢，实际上浏览器早就有了相关规范，就是 Open Graph 协议，只要遵循协议在站点中添加相关规则，即可让一个浏览器更好地去辨认，OG 协议是一种为社交分享而生的协议。

演进

Metafy

Metafy 是最底层的 Serveless 服务，基于 Vercel 搭建，它能够根据给定的 URL 输出相关 metadata 信息

比如：

输入：https://metafy.vercel.app/api?url=https://github.com/xiaoluoboding/metafy

输出：

{
  audio: false,
  author: "one-tab-group",
  date: false,
  description: "Easily scrape metadata from websites as a service. - GitHub - one-tab-group/metafy: Easily scrape metadata from websites as a service.",
  image: "https://opengraph.githubassets.com/e855dfcc905f5f459056c93be62b72fdf1f109124878a366a01a738f3d9921a8/one-tab-group/metafy",
  logo: "https://github.com/fluidicon.png",
  lang: null,
  publisher: "GitHub",
  title: "GitHub - one-tab-group/metafy: Easily scrape metadata from websites as a service.",
  video: false
}