新的
不喜欢广告？ 去 无广告 今天
Open Graph标签 让您的链接在Slack中看起来不再糟糕
更新于
你花了数周时间开发应用程序。Slack 中的链接预览显示为“未命名”且图标损坏。这是一个 Open Graph 问题。以下是10分钟内如何解决的方法。
广告 移除？
你花了三周时间开发这个应用。Slack中的链接预览显示为“未命名”以及你的页脚logo的缩略图。这是一个Open Graph问题，大约需要10分钟就能解决。
什么是Open Graph标签？
Open Graph (og:) 是Facebook在2010年推出的一种协议，目前所有主流平台都使用它来生成链接预览。当Slack、Twitter、LinkedIn或iMessage展开你的URL时，它们会获取页面内容，查找 <meta> 带有 og: 前缀的标签，并使用这些标签来构建卡片。
没有标签 → 它们会猜测。它们通常猜错了。
真正重要的标签
| 标签 | 是否必需？ | 作用 |
|---|---|---|
og:title | 是的 | 预览卡片中显示的标题 |
og:description | 是的 | 副标题/摘要文本（保持在200个字符以内） |
og:image | 是的 | 预览图片。必须是绝对URL。 |
og:url | 是的 | 页面的规范URL |
og:type | 推荐 | 使用 website 用于大多数页面， article 用于文章 |
twitter:card | 推荐 | 控制Twitter/X卡片的大小。使用 summary_large_image. |
twitter:title | 选修的 | 在大多数客户端上作为后备 og:title 最常让人困惑的是 |
twitter:description | 选修的 | 在大多数客户端上作为后备 og:description |
twitter:image | 选修的 | 在大多数客户端上作为后备 og:image |
它必须是绝对URL（不能使用相对路径），理想尺寸为1200×630px，且小于8MB。Slack尤其会静默跳过不符合其尺寸要求的图片。确保图片宽度至少为600px，否则图片将不会显示。 og:image. 一套完整的OG标签
将这些标签放入你的页面的
中。替换占位符值： <head> 对于博客文章或文章，修改
<!-- Primary Open Graph tags -->
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A clear, specific description under 200 characters. No fluff." />
<meta property="og:image" content="https://yourdomain.com/images/og-image.png" />
<meta property="og:url" content="https://yourdomain.com/your-page" />
<meta property="og:type" content="website" />
<!-- Twitter/X card (falls back to og: tags if omitted) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="A clear, specific description under 200 characters." />
<meta name="twitter:image" content="https://yourdomain.com/images/og-image.png" />并添加作者和发布时间： og:type 到 article 如何在不部署的情况下验证你的标签
<meta property="og:type" content="article" />
<meta property="article:author" content="https://yourdomain.com/about" />
<meta property="article:published_time" content="2026-04-25T00:00:00Z" />最快的方法：将你的URL粘贴到
IO Tools Open Graph Checker 。它会获取页面内容，解析标签，并显示Slack（或其他平台）实际看到的内容——包括预览卡片的渲染效果。无需登录，无需安装扩展。如果你想要检查本地URL或无法公开访问的预发布环境，检查器将无法访问它。在这种情况下，请查看页面源代码，手动确认标签是否存在于
中。部署后，再次运行检查器以确认线上版本与预期一致。 <head>平台特定的验证工具（当你需要强制刷新缓存时）：
Facebook/Meta：
- developers.facebook.com/tools/debug — 也清除了Facebook对OG标签的缓存 LinkedIn：
- linkedin.com/post-inspector — 在更新后预览过时的情况特别有用 Twitter/X：
- cards-dev.twitter.com/validator — 更新较慢，但可用于确认卡片格式 Slack缓存非常严格。如果你修改了标签但旧的预览仍然显示，可以通过在URL前添加查询字符串（例如
）来强制重新获取——这在生产环境链接中不太理想，但在测试环境中是可行的。 ?v=2生成标签
如果你想通过交互式方式生成完整的元标签，而不是手动编写，可以使用
IO Tools HTML Meta Tag Generator 一次性生成OG标签、Twitter卡片和标准元标签。将输出内容复制到你的 常见错误需避免 <head>.
相对图片URL。
- 不起作用。每个平台都会从一个外部服务器获取OG标签，而该服务器没有你的基础URL的上下文。始终使用完整的
/images/og.png路径。https://使用相同的图片用于所有场景。 - 一个300×300的头像作为OG图片，技术上会显示出来——但会以一个很小、丑陋的缩略图形式出现。为每个关键页面制作一个合适的1200×630图片。 未设置
- 如果没有设置，一些平台会使用它们获取的URL，其他平台则会自行生成一个规范URL。请显式设置它。
og:url. 忘记清除缓存。 - 大多数平台会缓存OG标签长达24到72小时。如果你在已上线页面上更新了标签，请使用上述平台验证工具来强制刷新获取。 混合使用
- 属性。
property且nameOG标签使用 。Twitter标签使用property=。混合使用会导致某些解析器完全忽略该标签。name=Open Graph标签是那些花费五分钟就能添加、一旦缺失就会显得尴尬的事情。添加一次，用
验证，然后继续。 Open Graph 检查器Open Graph标签：停止你的链接在Slack中看起来糟糕 2
