Open Graph 预览

使用方法

1. 1 粘贴任意一个公开可访问的 URL。
2. 2 点击 Test（或按回车）。我们会抓取该页面并解析 og:* 和 twitter:* meta 标签。
3. 3 查看该链接在 Facebook、Twitter / X、LinkedIn 和 Slack 上的预览效果，并附带校验提示。

为什么使用此工具

• 四个平台的预览效果并排展示，细节经过精细还原，尽量贴近真实的分享卡片。
• 校验提示能帮你发现缺失的标签、过长的标题，以及使用 HTTP 的图片链接等问题。
• 可查看原始的 og:* 和 twitter:* 标签，与各平台实际读取的内容完全一致。
• 结果会缓存 10 分钟，并设有频率限制以防止滥用。

常见问题

什么是 Open Graph 预览？

Open Graph 预览（Open Graph Preview）是一款工具，用于展示某个 URL 在各社交媒体平台上被分享时的显示效果。它会读取页面的 Open Graph 和 Twitter Card meta 标签，然后模拟还原出 Facebook、Twitter、LinkedIn 和 Slack 上的分享卡片，方便你在发布前检查标题、描述和图片是否正确。整个过程完全在浏览器中完成，无需注册账号。

功能特性

示例

https://github.com — page HTML with <meta property="og:title" content="GitHub · Build and ship software...">, og:image, og:type="object", and twitter:card="summary_large_image"

JSON: { resolved_url, status: 200, tags: { title, description, canonical, favicon, og: {title, image, url, type, ...}, twitter: {card, title, image, ...} }, warnings: [] } — rendered as four share-card previews (Facebook, Twitter/X, LinkedIn, Slack) plus a raw tag list; result cached 600s per URL

常见使用场景

1. 1

   发布前质量检查

   在发布博客文章或落地页之前检查其分享卡片,发现缺失的 og:image 或过长的 og:title。

2. 2

   调试损坏的分享卡片

   查看平台实际会读取到的、经过解析的 og:* 和 twitter:* 精确值,包括 og:image 是否被解析为绝对 HTTPS URL。

3. 3

   跨平台对比

   对比同一 URL 的标题、描述和图片在 Facebook、Twitter/X、LinkedIn 和 Slack 的展开预览中如何呈现出不同的回退效果。

参考资料

• The Open Graph Protocol — Open Graph Protocol (ogp.me)
• Sharing for Webmasters (Open Graph tags on Facebook) — Meta for Developers
• Cards Markup Tags (twitter:card meta tags) — X (Twitter) Developer Platform
• <link>: The External Resource Link element (rel="canonical"/"icon") — MDN Web Docs

相关工具