你的链接预览为什么显示不对，以及如何用 Open Graph 修复

你分享了新落地页的链接，预览却没有图片，显示的是首页的标题，或者是两个活动前的横幅。页面本身没有问题，预览是由别的东西生成的：页面’的 head 里有几行代码，大多数人从来看不到。

本文列出大多数预览出错背后的六个原因，按值得排查的顺序排列。如果你想让别人替你写好这些标签，可以使用免费的 Open Graph 生成器，它会生成标签、正确转义，并按下文的限制进行检查。

链接预览是如何生成的

当链接被粘贴到帖子或消息中时，应用会派出一个爬虫去访问该页面。爬虫读取 <head> 中的 <meta> 标签，并据此绘制卡片。这些标签来自 Open Graph 协议，该协议规定了四个必需的标签：

• og:title：页面在卡片中应显示的标题。
• og:type：页面的类型，通常是 website 或 article。
• og:image：图片。
• og:url：页面的规范 URL，协议称之为它的永久 ID。

再加上 og:description，卡片就完整了。一套完整的最小标签如下：

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

原因 1：缺少标签

如果没有 og: 标签，每个应用都只能退而求其次，去页面上寻找别的内容，比如 <title> 或第一张图片，而具体选哪个由各应用自行决定。这就是为什么同一个链接在一个地方看起来正常，到了另一个地方却出错。修复办法是：对每个希望被分享的页面（而不只是首页）都写明四个必需标签，外加一段描述。如果产品页使用的是首页的标签，分享出去显示的就是首页的卡片。

原因 2：图片 URL 是相对路径

这一点很容易忽略，因为页面在你自己的浏览器里看起来没有问题。content="/images/og.jpg" 对于已经在你网站上的浏览器有效，但爬虫并不在你的站点之内。请写出完整地址，以 https:// 和你的域名开头。og:url 也是同样的道理。

原因 3：图片尺寸或比例不对

每个平台都会说明它想要的尺寸，而它们恰好在宽幅图片上达成了一致：

• LinkedIn 在其网站可分享性指南中说明，图片应至少为 1200 × 627 像素，推荐比例为 1.91:1，且不超过 5 MB。
• Meta 的分享最佳实践建议：高分辨率屏幕的图片宽度至少为 1080 像素；展示图片链接广告时，宽度至少为 600 像素。
• X’大图卡片根据其开发者文档，支持 2:1 的比例，尺寸从 300 × 157 到 4096 × 4096 像素，文件小于 5MB，格式为 JPG、PNG、WEBP 或 GIF，不支持 SVG（原页面现已重定向，因此该链接经由 Internet Archive 访问）。

三个平台都适用的一个尺寸：1200 × 630。它超过 LinkedIn 的 1200 × 627 最低要求，宽于 Meta 的 1080，比例为 1200 ÷ 630 = 1.905，与 X 的 2:1 相差不到 5%。正方形或竖版图片会被裁剪成宽幅卡片，所以要把重要内容放在中间。宽高比计算器可以显示居中裁剪会保留哪些部分。

也要在标签中写明尺寸。Meta 要求提供 og:image:width 和 og:image:height，以便其爬虫无需先下载和处理图片就能立即渲染。其站长指南说得很直接：写明高度和宽度，图片在首次分享时才能正确加载。

原因 4：标签由 JavaScript 添加

一些网站搭建工具和单页应用会在页面加载之后，在浏览器里添加 meta 标签。爬虫读取服务器返回的 HTML 时，可能根本不会运行那段代码，因此也就看不到这些标签。请检查页面源代码（用“查看源代码”，而不是开发者工具里的检查器，后者显示的是脚本运行之后的页面）。如果源代码里没有这些标签，爬虫很可能也看不到。修复应当在网站设置或服务器端模板中进行。

原因 5：特殊字符破坏了标签

标题中含有双引号，例如 The "only" linen you need，会提前结束 content="..." 属性，标题的其余部分随之丢失。属性内有特殊含义的字符必须转义：" 要改写为 "，& 要改写为 &，< 要改写为 <。浏览器和爬虫读取标签时会把它们还原成原始字符。生成器会替你完成这些，这也是使用它的理由之一。

原因 6：应用记住了旧版本

你修好了标签，重新分享，旧卡片却还在。这就是缓存。应用会保存它抓取到的内容并反复使用，两大平台都提供了请求刷新的工具：

• Facebook：把 URL 粘贴到 Meta 的 Sharing Debugger 中。Meta 的站长指南称，它会显示爬虫抓取到的标签以及任何错误或警告，并触发一次新的抓取。Meta 的最佳实践还补充说，已抓取的内容否则会按标准的 24 小时周期更新。
• LinkedIn：把 URL 放入 Post Inspector 中运行。LinkedIn 的帮助页面对其限制说得很清楚：刷新只会改变新帖子的预览。已经包含该 URL 的帖子会保留旧的预览。

发布前一定要记住这条 LinkedIn 说明。请在第一条帖子发出之前检查预览，因为修复页面无法修好旧帖子。

twitter:card 标签：只需一行，不必四行

X 也会读取 Open Graph。其卡片标记参考为每个标签列出了回退规则：twitter:title 回退到 og:title，twitter:description 回退到 og:description，twitter:image 回退到 og:image，twitter:image:alt 回退到 og:image:alt。因此无需把所有内容重复一遍。唯一需要添加的一行是 twitter:card：全宽图片用 summary_large_image，小方形图片用 summary。如果省略它，同一份参考文档称 X 可能会显示小型摘要卡片，这就是为什么大图有时会以缩略图的形式出现。同一份参考文档还规定，标题上限为 70 个字符，描述为 200 个，替代文本为 420 个。

发布前五分钟检查

1. 查看页面源代码，找到 og: 标签。四个必需标签全部存在，外加一段描述。
2. 确认 og:image 和 og:url 都以 https:// 开头。
3. 在浏览器中单独打开图片 URL，它应当能加载，尺寸为 1200 × 630 或接近该尺寸。
4. 把 URL 粘贴到 Sharing Debugger 和 Post Inspector 中，查看卡片效果。
5. 确认无误后再分享。

Hermoso 的定位

Hermoso 是一款 AI 营销代理：它研究你所在市场中已经奏效的广告，制作符合品牌调性的图片和视频广告，把帖子排期发布到你自己的账号，并在你自己的广告账户中投放付费广告活动。好的链接预览能让这些帖子更值得点击。Hermoso 可以在网页应用中使用，也可以通过其 MCP 服务器在 Claude、ChatGPT 和 Cursor 内使用。

常见问题

为什么我的链接在 Facebook 或 LinkedIn 上没有图片？

通常是因为缺少 og:image 标签、使用了相对路径而不是完整的 https:// 地址，或者指向的图片太小。LinkedIn 要求至少 1200 × 627 像素。修复之后，请把 URL 放入 Meta 的 Sharing Debugger 或 LinkedIn 的 Post Inspector 中运行，让它们重新抓取。

Open Graph 图片应该多大？

1200 × 630 像素适用于各大网络。它满足 LinkedIn 的 1200 × 627 最低要求，比例约为 1.91:1，宽于 Meta 推荐的 1080 像素，并且接近 X 大图卡片支持的 2:1。

如何更新 LinkedIn 链接预览？

先修复页面上的标签，然后在 LinkedIn 的 Post Inspector 中输入 URL。刷新后的预览只适用于新帖子。已包含该 URL 的帖子会保留旧的预览。

有了 og: 标签，还需要 twitter: 标签吗？

只需要 twitter:card。当缺少 twitter: 版本的标签时，X 会回退到 og:title、og:description、og:image 和 og:image:alt。