分享出去那张卡片：目录站的 og:image 和 Twitter Card 该怎么配
分
Open Graph 是 Facebook 提出的一套协议，后来被几乎所有平台采用了。它的作用只有一个：告诉社交平台和聊天软件，这个链接被分享的时候，卡片上该显示什么图、什么标题、什么描述。
图片来源：网络，版权归原作者所有，侵权请联系删除
四个必填
能凑出一张正常卡片的最小集合是这四个：
<meta property="og:title" content="站名 - 一句话说明">
<meta property="og:description" content="这个站点做什么的，给谁用">
<meta property="og:image" content="https://example.com/og/1234.png">
<meta property="og:url" content="https://example.com/site/1234.html">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">注意属性的写法不一样：OG 用 property=，Twitter 用 name=。混用是最常见的低级错误，写了等于没写。
X（Twitter）会读 OG 标签，所以只需要额外补一个 twitter:card。不写这一行，X 会退化成小方图卡片，og:image 再好看也白搭。
图片尺寸就记一个数
1200×630，比例 1.91:1。这一个尺寸在 Facebook、LinkedIn、Slack、Discord、WhatsApp 上都能正常显示，X 的大图卡也基本兼容。
两个边界值：
- 低于 600×315，Facebook 会降级成小缩略图
- 文件尽量控制在几百 KB 以内，X 的上限是 5MB，但太大的图平台会直接放弃加载
加 og:image:width 和 og:image:height 是个好习惯，平台在第一次分享、还没下载图片的时候就能把卡片版面排好。
三个最常见的错
用了相对路径
content="/og/1234.png"。在浏览器里看着没问题，但抓取卡片的是平台服务器，它不知道相对谁。必须是完整的 https 绝对地址。这一个错误大概占了"为什么我的分享没有图"的一半。
所有页面共用一张图
全站 og:image 都指向首页那张，结果每个条目分享出去长得都一样。带标题的专属卡片，被分享的意愿明显更高。
改了标签没生效
平台会把第一次抓到的卡片缓存起来，有时候缓存好几天。改完标签用各自的调试工具强制刷新：Facebook 用 Sharing Debugger 点 Scrape Again，LinkedIn 用 Post Inspector。X、Slack、Discord 没有公开的刷新入口，可以换个图片 URL（比如加个 ?v=2）绕过缓存。
目录站怎么批量出图
条目成千上万，不可能一张张做。程序化生成是唯一可行的路，思路是做一张模板图，把变量填进去：
- 站点名（要做截断，超过十几个字就缩到省略号）
- 所属类目，比如"设计工具 / 配色"
- 一句话简介，控制在两行
- 站点图标或 logo，放左上角
- 你的站名和域名，放底部
生成方式看技术栈：Node 上有 @vercel/og，PHP 可以用 GD 或 Imagick，懒一点用 Puppeteer 截一张 HTML 也行。关键是在构建期或首次访问时生成并缓存，别每次分享请求都现生成。
用截图还是用卡片
很多目录站直接把目标站的页面截图当 og:image，看着挺直观。不推荐，两个原因：一是截图版权说不清，二是缩到 1200×630 之后再被平台裁一次，页面上的文字基本糊成一团，反而没人点。
自己画的卡片图更可控。文字放中间 80% 的区域，四周留白，因为不同平台的裁剪比例不一样，边缘的文字可能被切掉。
还有一件容易漏的事
社交平台的爬虫不执行 JavaScript。如果你的 OG 标签是靠前端框架在客户端塞进去的，爬虫看到的是空的。必须出现在服务端返回的 HTML 里。
目录站如果是纯静态生成的，这一点天然满足；如果是 SPA，就得上预渲染或者服务端渲染。跟搜索引擎的处境一模一样——同一个坑，踩两次。
它对 SEO 有用吗
直接作用没有。搜索引擎不用 OG 标签排名。间接作用是有的：卡片好看，分享出去点击多，点击带来访问，访问里可能长出引用和链接。这条链路长，但它是真实存在的，而且成本就是几行 meta 加一套图片模板。