OG 封面图生成
几下点击做出一张 1200×630 的社交卡片。带背景图来，或者用渐变，写上标题，下载 PNG。
用浏览器 Canvas API 渲染。不上传任何内容。
决定别人点不点你链接的那张卡片
把一个网址粘进聊天软件、社交平台或 Slack 频道，旁边出现的那块东西——图片、标题、描述——是由你页面 <head> 里的 Open Graph 标签拼出来的。写对了，你的链接就是一张小广告；写错了，就是一个灰方块。
真正起作用的四个标签
四个标签承担了绝大部分效果：
og:title—— 标题。短到不会被截断。og:description—— 一两行补充。很多平台会截断甚至直接不显示，所以最重要的信息要放在前面。og:image—— 图片的绝对地址。用相对地址是极常见、且悄无声息的失败原因。twitter:card—— 想要 X/Twitter 上的大图效果，就设成summary_large_image，否则它只会给你一个小方缩略图。
还有两个值得加，因为它们能避免肉眼可见的抖动：og:image:width 和 og:image:height。不声明的话，爬虫可能得先把图片下载下来才能排版卡片，某些平台会一直等到图片到位才渲染。
标准尺寸，以及那些不一样的家伙
1200×630（约 1.91:1）是事实标准——Facebook、LinkedIn 和生态里大多数平台都按这个来，也是本工具的输出尺寸。但它并非放之四海皆准：
- X/Twitter 的
summary_large_image也要 1200×630，但显示比例更接近 2:1，会裁掉一点。 - LinkedIn 同样按约 1.91:1 渲染，但边缘裁切的位置不一样。
- Slack、Discord、iMessage 各有各的偏好比例，其中一些裁得很凶。
由此引出一个实践结论：安全区。把卡片外圈那一圈当成可以随时被牺牲的部分，标题、logo 和任何关键信息都放在中间那一条带里。只在"刚好对的比例"下成立的设计，迟早会在某个平台上出错。
图上放文字：那条已经变了的规矩
Facebook 曾经执行过一条准则，限制文字不超过图片面积的约五分之一，而且这条准则被广泛当成通用法则到处引用。Facebook 多年前已经放松了自己的执行尺度。不过说回来，那条准则背后的直觉依然成立：通篇是字的卡片看着就像广告；而且烧进图片里的文字，读屏软件读不到，搜索引擎也搜不到。标题保持简短，补充说明放进 og:description——那里才是真文本。
另外，务必提供 og:image:alt。它是这张图片的无障碍名称，成本只有一行。
为什么图片一直不更新
社交平台对预览图的缓存非常强硬，而且它们的爬虫按自己的节奏跑，不按你的。换了图，旧的可以一直挂着。解决办法有两条：换图时给它一个新的 URL；以及用各平台自己的调试工具强制重新抓取。靠猜和等不是办法。
几条经得住实践的设计原则
高对比度胜过花心思——这些图经常是在手机上、日光下、以缩略图尺寸被看到的。主体放一边、文字放另一边，比把文字压在杂乱照片上更稳；如果一定要叠，就加一层压暗。上线前把它缩到 200 px 宽看一眼——只在全尺寸下才读得清的卡片，等于大多数人永远读不清。
常见问题
OG 图片应该用多大？
为什么我已经设了 OG 图却不显示？
og:image 里填的是相对地址而不是绝对地址；二、爬虫被 robots.txt 或防火墙挡了；三、图片超过平台的大小限制；四、平台手里还存着旧的缓存副本。用平台自己的调试工具可以看到它实际抓到了什么。图上应该放文字吗？
og:description，那里才是真文本。Twitter 需要单独做一张图吗？
twitter:card 设为 summary_large_image，同一张 1200×630 就能用。X/Twitter 裁切比例更接近 2:1，所以标题要留在安全区内，别贴着上下边缘。