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 个字符，它在每个平台上都能完整显示。

相关工具

UTM 链接构建器

使用 UTM 的 source、medium、campaign、term 和 content 参数构建活动跟踪 URL。生成干净、经过 URL 编码的链接，可直接用于广告和电子邮件通讯。

元标签分析器

审计任意URL的元标签，检测缺失标签、长度异常、Open Graph/Twitter值冲突以及机器人指令配置错误等问题。

结构化数据标记验证器

粘贴一段 JSON-LD，即刻检查它能否正确解析，并包含 Schema.org 的核心键：@context、@type 以及 name 或 headline，在发布之前完成检查。

站点地图生成器

粘贴你的网址列表，生成带 changefreq、priority 和可选 lastmod 的有效 XML 站点地图，随时保存并提交到 Search Console。

安全响应头分析器

粘贴你的 HTTP 响应头，即可获得关于关键安全响应头的优先级建议：Content-Security-Policy、Strict-Transport-Security、X-Frame-Options、Referrer-Policy 等。

SERP 预览

在发布前预览谷歌搜索结果。实时字符计数器会提示过长的标题和元描述，谷歌风格的摘要则展示你的结果实际呈现的样子。

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