Softonic

Open Graph 预览

步 1 / 2
下一步

输入标题、描述、站点名称、页面 URL 和图片 URL，这个工具就会实时渲染出 Facebook 和 X（Twitter）分享卡片，并在你每次按键时更新。它是你 Open Graph 标签的设计沙盒：不抓取、不发布任何内容，因此你可以反复调试标题长度和图片裁剪，直到卡片看起来合适，然后把文案复制到真正的 og: 标签中。

预览是如何拼装出来的

  1. 1

    输入卡片字段

    标题、站点名称、描述、页面 URL 和图片 URL。每个字段都对应一个 og: 标签。

  2. 2

    观察卡片更新

    Facebook 和 X 模拟卡片会在你输入时重新渲染，使用各平台真实的布局和截断方式。

  3. 3

    添加图片 URL

    粘贴一个绝对 https 图片地址即可看到裁剪效果；留空则 Facebook 卡片会显示一个占位图。

  4. 4

    复制到你的 og: 标签

    当卡片读起来顺畅时，把同样的标题、描述和图片转移到页面的元标签中。

每个字段会变成什么

字段 Open Graph 标签 在卡片中的显示
标题 og:title 加粗标题，截断为一行
描述 og:description 灰色副标题，限制为两行
站点名称 og:site_name Facebook 标题上方的小标签
URL og:url 显示域名；由主机名决定
图片 URL og:image 在两张模拟卡片上均按 1.91:1 裁剪

工具会从你输入的 URL 中读取主机名，因此 https://blog.example.com/post 在卡片上会显示为 blog.example.com。

两张卡片，以及它们的区别

  • Facebook 会将图片按 1.91:1 裁剪，然后依次显示小号大写字母的域名、单行加粗标题，以及最多两行的描述。若没有图片 URL，它会渲染一个灰色占位图，而这正是现实中出现平淡、无图分享的最常见原因。
  • X（Twitter） 显示一张圆角的 summary_large_image 卡片：图片按 2:1 裁剪，下方依次是域名、标题和描述。

让文案恰到好处

  • 标题： 争取控制在 60 到 70 个字符。Facebook 大约在 88 个字符处截断，X 大约在 70 个字符处截断，因此 70 个字符以内的标题在任何地方都能完整显示。
  • 描述： 保持在约 160 个字符以内；卡片会限制为两行，其余部分会被舍弃。
  • 图片： 按 1200 x 630 px 设计，使 1.91:1 的裁剪更干净，并用绝对的 https:// URL 托管。标签正式上线后，相对路径将无法加载。
  • 站点名称： 简短，只放品牌名，不要加标语。它会作为标签显示在标题上方。

发布日检查清单

  • [ ] 标题少于 70 个字符
  • [ ] 描述少于 160 个字符
  • [ ] 图片 URL 为绝对路径（https，而非 // 或相对路径）
  • [ ] 图片按 1200 x 630 px 设计，格式为 JPG 或 PNG
  • [ ] URL 与你将要发布的规范 URL 一致
  • [ ] 文案已复制到真正的 og: 标签，并用检查器验证

常见问题

不会。你手动输入卡片字段，工具会模拟它们的显示效果。它是一个设计沙盒，而非抓取器，因此在页面上线之前也能使用。若要读取某个页面上已有的标签，请改为把该页面的 HTML 粘贴到 Open Graph 检查器中。

一张 Facebook 卡片和一张 X（Twitter）大图卡片。它们使用相同的 Open Graph 值，因此在这里读起来顺畅的卡片，也能很好地代表 LinkedIn、Slack、Discord 及其他从同一批 og: 标签展开的应用，只是各自的限制略有不同。

因为图片字段为空，或者你粘贴的 URL 不是一个有效的绝对 https 地址。添加完整的 https 图片 URL，裁剪效果便会立即出现。正式上线时，请把文件保持在 5 MB 以内，并以公开的 image/* 内容类型提供。

每个平台的截断位置各不相同（Facebook 大约在 88 个字符，X 大约在 70 个字符），模拟卡片也会照实反映这一点。把标题精简到 60 到 70 个字符，它在每个平台上都能完整显示。

相关工具

坏链检查器

粘贴页面 URL，检查其出站链接中的 404 和其他 HTTP 错误，并显示每个链接的状态码。

HTTP安全头检查器

粘贴 HTTP 响应标头，在浏览器本地检查 HSTS、CSP、点击劫持、MIME、referrer 和跨源策略。

XML 站点地图检查器

在浏览器中检查站点地图 XML，发现解析错误、缺少地址、重复 URL 以及常用站点地图字段值问题。

元描述长度检查器

测量元描述的字符数和估算像素宽度，对照编辑参考，并查看桌面端与移动端版式示意。

规范URL验证器

粘贴页面的 HTML 并检查其 rel=canonical 标签：是否存在、是否为有效的绝对 URL、是否与页面 URL 一致。

外部链接提取器

粘贴原始HTML，可选设置基础URL，即可获得代码中所有外部 http/https 链接的干净、去重列表，用于链接审计和SEO审查。

此工具还提供其他语言版本