如何用 Open Graph 和 Twitter Card 优化 HTML 分享信息？

分享卡片优化只需要在 <head> 里加两组 meta 标签：Open Graph（og:）负责 Facebook、LinkedIn、Slack、Discord 等平台，Twitter Card（twitter:）负责 X/Twitter，两者都是纯静态标签，不需要任何 JS，加完用平台调试工具强制重新抓取即可生效。

Open Graph 和 Twitter Card 有什么区别？

结论：Open Graph 是 Facebook 2010 年提出的通用协议，用 property 属性声明；Twitter Card 是 Twitter 自己的规范，用 name 属性声明。X 在 2015 年后已经能回退读取 og 标签，但显式写 twitter:* 更可控。两组标签可以同时存在，互不冲突。

Open Graph 是「开放图谱」，本质是把网页变成社交图谱里的一个对象，所以除了标题描述图片，还有 og:type（article / website / video.movie）、og:locale 这类语义字段。Twitter Card 只关心卡片长什么样，字段少但决定展示形态：summary（小方图）和 summary_large_image（大横图）差别巨大，后者点击率通常明显更高。

如果只写一组，优先写 Open Graph，再补 twitter:card 和 twitter:image。

最基本的 Open Graph 标签怎么写？

结论：真正影响卡片渲染的是 5 个标签——og:title、og:description、og:image、og:url、og:type，其余都是锦上添花。

<meta property="og:type" content="article" />
<meta property="og:site_name" content="你的站点名" />
<meta property="og:locale" content="zh_CN" />
<meta property="og:title" content="如何用 Open Graph 优化分享信息" />
<meta property="og:description" content="120 字以内的摘要，说清这篇讲什么。" />
<meta property="og:url" content="https://example.com/posts/og-guide" />
<meta property="og:image" content="https://example.com/img/cover.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="封面图描述" />

三个硬性要求：og:url 和 og:image 必须是绝对 URL（带 https 协议头），不能用相对路径；og:title 控制在 60 字符内，超出会被截断；og:description 控制在 100-150 字符内。另外，多个页面不要共用同一张 og:image，列表页和详情页应该各配各的。

og:image 的尺寸和格式有什么要求？

结论：一张图同时满足各大平台的最低要求，就用 1200×630 像素、16:9 比例、JPG 或 PNG、体积压在 1MB 以内。

Facebook 的抓取上限是 8MB，X 的图片上限是 5MB，LinkedIn 建议 1200×627。低于 600×315 的图会被降级成小卡片或不显示图。用 WebP 兼容性最好还是配 JPG 兜底，因为部分抓取器至今不认 WebP。

图片 URL 必须允许匿名访问：不能被 robots.txt 屏蔽、不能需要登录、不能靠 CDN 的 referer 白名单拦截，否则抓取失败后卡片就是无图状态。同一张图里不要把关键文字放在边缘 10% 的区域，微信和 iMessage 的预览会把四边裁掉。

Twitter Card 怎么配置才不出错？

结论：X 上只需要 4 个标签——twitter:card、twitter:title、twitter:description、twitter:image，加上 twitter:site 标记站点账号。

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yoursite" />
<meta name="twitter:creator" content="@author" />
<meta name="twitter:title" content="如何用 Open Graph 和 Twitter Card 优化分享信息" />
<meta name="twitter:description" content="120 字以内的摘要。" />
<meta name="twitter:image" content="https://example.com/img/cover.png" />
<meta name="twitter:image:alt" content="封面图描述" />

易错点有三个：twitter:card 漏写会导致卡片退化成纯链接；twitter:site 必须带 @；标题超过 70 字符在移动端会被截断成两行加省略号。如果 og 和 twitter 都写了标题，X 优先取 twitter:title。

怎么验证分享信息抓取对不对？

结论：不要靠肉眼猜，用平台官方的抓取调试工具，输入 URL 后看它实际取到的字段。

常用工具：Facebook Sharing Debugger（developers.facebook.com/tools/debug）、LinkedIn Post Inspector、opengraph.xyz（第三方，能一次预览多平台）。调试器里点「Scrape Again / 重新抓取」可以清掉缓存。逐个检查它抓到的 image 是不是你预期的 URL、尺寸是否达标、有没有 403。

为什么改了标签但分享卡片没变？

结论：平台会缓存抓取结果，Facebook 缓存周期不固定，改完后必须手动触发重新抓取，否则要等缓存过期。

在 Facebook Debugger 里点一次「重新抓取」通常立即刷新。X 的缓存刷新较慢，且 X 已经下线了 Card Validator，只能用「发一条私密测试推文」的方式看效果。

另外提醒一点：微信、微博、QQ 不读 Open Graph，它们用自己的 JS-SDK（微信是 wx.config + updateAppMessageShareData）来设置分享信息，所以国内渠道要单独配一套。

总结：Open Graph 管通用平台、Twitter Card 管 X，核心就是 5+4 个 meta 标签；图片统一用 1200×630 的绝对 HTTPS 地址；改完一定用调试工具重新抓取，国内渠道另走 JS-SDK。