bug: 官网缺少 Open Graph / Twitter Card 分享图元数据
- Dominant language
- TypeScript
- Stars
- 2.7k
- Forks
- 401
- Avg merge
- 21h 48m
- Merged PRs (30d)
- 776
Description
## 问题描述 / What happened
访问并分享 Cindy 官网(`https://cindy.app`、`https://cindy.cn`)时,聊天软件 / 社交媒体 / iMessage / Slack 等无法展示品牌分享预览卡:没有大图、卡片信息也不完整。
**实际行为**
- 页面 `` 仅有 `title` / `description`,以及 favicon 相关 link
- **完全没有** Open Graph / Twitter Card 元数据,例如:
- `og:title` / `og:description` / `og:url` / `og:type`
- `og:image`(以及建议的 `og:image:width` / `og:image:height` / `og:image:alt`)
- `twitter:card` / `twitter:title` / `twitter:description` / `twitter:image`
- 结果:链接被粘贴到社交平台时退化为纯文本标题/描述,或使用平台默认抓取的小图,品牌曝光弱
**期望行为**
- 官网首页(及主要落地页如 `/pricing`、`/download`)输出完整 OG + Twitter Card meta
- 提供一张固定的品牌分享图(建议 1200×630 或 1280×640),与现有视觉系统一致
- 抓取器(Facebook / X / Slack / iMessage / 微信等)能稳定显示 Cindy 品牌预览卡
**补充说明(已核对,避免误报)**
- favicon / icon 本身是存在且可访问的,不是「完全没 icon」:
- `/favicon.ico` → 200
- `/icon.svg` → 200(深底 + 红色 brand mark)
- `/apple-icon.png` → 200(180×180)
- 本次缺陷聚焦在 **社交分享预览(OG 图 + OG/Twitter meta)缺失**,不是浏览器标签页图标 404
仓库 README 侧已有 social preview 资产先例可参考:PR #347 曾补充 `.github/assets/cindy-social-preview.png`(1280×640),但那是 GitHub 仓库 Social preview,**不会**自动作用于 `cindy.app` / `cindy.cn` 的网页分享。
## 环境 / Environment
- Cindy 版本或 commit / version or commit: n/a(官网 web,非客户端)
- 平台与版本 / platform & OS version: Web — `https://cindy.app`、`https://cindy.cn`(后者由 `cindy.com.cn` 跳转)
- 安装方式 / install method: 直接访问官网生产环境
- 核对时间:2026-07-27
## 复现步骤 / Steps to reproduce
1. 打开 `https://cindy.app`(或 `https://cindy.cn`)
2. 查看页面源码 / DevTools → Elements → ``
3. 搜索 `og:image`、`og:title`、`twitter:card`、`twitter:image`
4. 观察:上述 meta 均不存在
5. (可选)用任意 OG 调试器或把链接贴到 Slack / iMessage / X,确认无品牌大图预览卡
也可命令行快速核对:
```bash
curl -sL https://cindy.app | rg -i 'og:|twitter:'
# 预期:应有 og:* / twitter:* 输出;当前为空
```
## 日志与截图 / Logs & screenshots
当前首页 metadata 片段(已脱敏,仅列相关项):
```html
Cindy — The open-source AI agent, ready from day one
```
**建议修复范围(供参考,非强制方案)**
1. 为官网增加默认 `openGraph` / `twitter` metadata(Next.js `metadata` API 即可)
2. 产出并托管一张品牌 OG 图(可用现有 hero / wordmark / character 视觉合成,尺寸建议 1200×630+)
3. 首页、定价页、下载页至少覆盖;中英(`cindy.app` / `cindy.cn`)同步
4. 用 [opengraph.xyz](https://www.opengraph.xyz/) 或平台官方 debugger 回归
Contributor guide
Research direction
Start at the website's Next.js metadata API entry point and inspect the homepage, /pricing, and /download outputs with the curl command in the issue. Add the requested OG/Twitter metadata and hosted brand image for both domains. Done means the relevant tags and image are present and social preview tools or platform previews show the Cindy card.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100