# 链接卡片预览 — 开源项目调研报告
**调研日期**：2026-07-28
**调研委托**：主人
**执行**：南安-替身
---
## 一、技术原理
### 核心机制
把分享链接变成卡片预览，本质上靠三个协议标准：
| 标准 | 全称 | 作用 |
|------|------|------|
| **Open Graph** | og:title, og:description, og:image, og:url | Facebook 2010年提出，目前最通用标准 |
| **Twitter Cards** | twitter:card, twitter:title, twitter:image | Twitter/X 的卡片标准，兼容 OG |
| **oEmbed** | JSON 端点返回结构化嵌入数据 | YouTube/Spotify等富媒体嵌入用 |
### 一句话原理
**目标网页在 `` 里放 `` 标签（标题、描述、封面图），分享平台读取这些标签 → 渲染一张带图+标题+描述的卡片。点击卡片 → 跳转到原始链接查看完整内容。**
### 两种实现路径
| 路径 | 说明 | 适用场景 |
|------|------|---------|
| **前端卡片渲染** | JS/React 库从 URL 提取 meta 信息，在页面内渲染卡片组件 | 博客、笔记、聊天应用内嵌预览 |
| **服务端 OG 图片生成** | 服务器动态生成 HTML→图片，作为 og:image 返回 | 社交分享时自动生成精美卡片封面 |
---
## 二、开源项目清单
### A类：前端卡片渲染库（把链接变成可交互卡片）
| # | 项目 | ⭐ | 语言 | 更新时间 | 核心功能 |
|---|------|------|------|------|------|
| 1 | **microlinkhq/sdk** | 622 | JS/HTML | 2026-07 | 最全面的卡片方案，任何URL→精美预览卡片，支持React/Vue/Vanilla，有CDN直接引入 |
| 2 | **winhtaikaung/react-tiny-link** | 256 | TypeScript | 2026-02 | React 组件，支持YouTube/Twitter/Spotify等富媒体卡片 |
| 3 | **Dhaiwat10/react-link-preview** | 196 | TypeScript | 2026-04 | 纯React卡片预览组件，轻量简洁 |
| 4 | **e-oj/grabity** | 290 | JavaScript | 2026-06 | 纯前端OG/Twitter Card元数据提取器，无后端依赖 |
| 5 | **linkpreview/linkpreview** | 75 | JavaScript | 2026-04 | 仿社交平台卡片样式，支持OG/Twitter/oEmbed |
### B类：服务端 OG 图片生成器（动态生成社交分享封面图）
| # | 项目 | ⭐ | 语言 | 更新时间 | 核心功能 |
|---|------|------|------|------|------|
| 6 | **vercel/satori** | 13,705 | TypeScript | 2026-07 | Vercel出品，HTML/CSS→SVG渲染引擎，next/og 底层依赖 |
| 7 | **vercel/og-image** | 4,043 | TypeScript | 2026-07 | ⚠️已归档。OG Image as a Service 鼻祖，建议用 satori 替代 |
| 8 | **kane50613/takumi** | 2,514 | Rust | 2026-07 | JSX/HTML→SVG/图片，160+ CSS属性，next/og 高性能替代 |
| 9 | **kvnang/workers-og** | 349 | TypeScript | 2026-07 | 无浏览器依赖，Edge原生（Cloudflare Workers），API兼容@vercel/og |
### C类：专用/插件类
| # | 项目 | ⭐ | 语言 | 更新时间 | 核心功能 |
|---|------|------|------|------|------|
| 10 | **po3rin/github_link_creator** | 206 | Go | 2026-07 | 专门生成GitHub仓库链接卡片图片 |
| 11 | **Robot-Inventor/rehype-og-card** | 6 | TypeScript | 2026-07 | Rehype插件，Markdown→自动将裸链接转为卡片 |
| 12 | **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部署首选 |
---
## 四、实战推荐
### 场景1：在自己的网站/博客里，分享的链接自动变成卡片
→ **microlink SDK**：引入一行 CDN 脚本，所有 `` 链接自动变成预览卡片。
### 场景2：React 项目里展示链接预览
→ **react-tiny-link**：`` 即可，支持 YouTube 等富媒体。
### 场景3：纯前端、不依赖任何后端服务
→ **grabity**：在浏览器里直接 fetch URL 并解析 OG meta，渲染卡片。
### 场景4：需要自定义社交分享封面图（og:image）
→ **satori + @vercel/og**：用 HTML/CSS 写封面模板，动态渲染成图片。
### 场景5：在 Edge（CDN边缘节点）上极速生成卡片图
→ **workers-og** 或 **takumi**：毫秒级生成，无需 Puppeteer/Chrome。
---
## 五、关键结论
1. **"分享链接→卡片显示"本质是 Open Graph 协议**：任何网页只要加了 `og:title/og:description/og:image` 等 meta 标签，分享到微信/Facebook/Twitter/Slack 等平台都会自动显示卡片。
2. **"点击卡片看完整内容"就是点击跳转**：卡片是预览，点击后跳转到原链接的完整页面。
3. **如果想在自己网站里展示别人链接的卡片**：推荐 microlink SDK（最简单）或 react-tiny-link（React项目）。
4. **最活跃的开源引擎是 Vercel 的 satori**（13.7K⭐），takumi（2.5K⭐ Rust）是性能更强的替代品。
5. **vercel/og-image 已归档**，不建议新项目使用。
---
> 本报告由南安-替身在频道全程公开调研完成。