开源项目调研报告 · 全面对比 12 个开源项目
把分享链接变成卡片预览，本质上靠三个协议标准：
og:title / og:description / og:image / og:url
Facebook 2010年提出，最通用标准
twitter:card / twitter:title / twitter:image
Twitter/X 卡片标准，兼容 OG
JSON 端点返回结构化嵌入数据
YouTube / Spotify 等富媒体嵌入用
目标网页在 <head> 里放 <meta> 标签（标题、描述、封面图），分享平台读取这些标签 → 渲染一张带图+标题+描述的卡片。点击卡片 → 跳转到原始链接查看完整内容。
JS/React 库从 URL 提取 meta 信息，在页面内渲染卡片组件。适用于博客、笔记、聊天应用内嵌预览。
服务器动态生成 HTML→图片，作为 og:image 返回。适用于社交分享时自动生成精美卡片封面。
把链接变成可交互卡片
| 项目 | ⭐ | 语言 | 更新 | 核心功能 |
|---|---|---|---|---|
| microlinkhq/sdk | 622 | JS/HTML | 2026-07 | 最全面的卡片方案，任何URL→精美预览卡片，支持React/Vue/Vanilla，有CDN直接引入 |
| winhtaikaung/react-tiny-link | 256 | TypeScript | 2026-02 | React 组件，支持YouTube/Twitter/Spotify等富媒体卡片 |
| Dhaiwat10/react-link-preview | 196 | TypeScript | 2026-04 | 纯React卡片预览组件，轻量简洁 |
| e-oj/grabity | 290 | JavaScript | 2026-06 | 纯前端OG/Twitter Card元数据提取器，无后端依赖 |
| linkpreview/linkpreview | 75 | JavaScript | 2026-04 | 仿社交平台卡片样式，支持OG/Twitter/oEmbed |
动态生成社交分享封面图
| 项目 | ⭐ | 语言 | 更新 | 核心功能 |
|---|---|---|---|---|
| vercel/satori | 13,705 | TypeScript | 2026-07 | Vercel出品，HTML/CSS→SVG渲染引擎，next/og 底层依赖 |
| vercel/og-image ⚠️已归档 | 4,043 | TypeScript | 2026-07 | OG Image as a Service 鼻祖，建议用 satori 替代 |
| kane50613/takumi | 2,514 | Rust | 2026-07 | JSX/HTML→SVG/图片，160+ CSS属性，next/og 高性能替代 |
| kvnang/workers-og | 349 | TypeScript | 2026-07 | 无浏览器依赖，Edge原生（Cloudflare Workers），API兼容@vercel/og |
特定框架或场景的集成方案
| 项目 | ⭐ | 语言 | 更新 | 核心功能 |
|---|---|---|---|---|
| po3rin/github_link_creator | 206 | Go | 2026-07 | 专门生成GitHub仓库链接卡片图片 |
| Robot-Inventor/rehype-og-card | 6 | TypeScript | 2026-07 | Rehype插件，Markdown→自动将裸链接转为卡片 |
| Robot-Inventor/astro-link-card | 18 | TypeScript | 2026-06 | Astro框架集成，自动把链接转卡片 |
按核心需求"分享链接→卡片→点击看完整内容"排序：
| 方案 | 易用性 | 自部署成本 | 效果 | 推荐指数 |
|---|---|---|---|---|
| microlink SDK | ★★★★★ CDN一行引入 |
低 有免费SaaS也可自建 |
★★★★★ 专业卡片 |
🥇 首选 |
| react-tiny-link | ★★★★★ npm install 即用 |
低 | ★★★★★ 支持富媒体 |
🥈 React首选 |
| grabity | ★★★★★ 纯前端无后端 |
零 | ★★★★★ 基础卡片 |
🥉 最简方案 |
| satori + @vercel/og | ★★★★★ 需Next.js/Edge |
中 | ★★★★★ 可完全定制 |
自定义封面 |
| workers-og | ★★★★★ 需Cloudflare |
中低 | ★★★★★ 高性能 |
Edge首选 |
→ microlink SDK：引入一行 CDN 脚本，所有 <a> 链接自动变成预览卡片。
→ react-tiny-link：<ReactTinyLink url="..." /> 即可，支持 YouTube 等富媒体。
→ grabity：在浏览器里直接 fetch URL 并解析 OG meta，渲染卡片。
→ satori + @vercel/og：用 HTML/CSS 写封面模板，动态渲染成图片。
→ workers-og 或 takumi：毫秒级生成，无需 Puppeteer/Chrome。
og:title / og:description / og:image 等 meta 标签，分享到微信/Facebook/Twitter/Slack 等平台都会自动显示卡片。