基础解析无需 AI本地预览可导出调试友好

Open Graph 预览调试器

粘贴 Open Graph 或 Twitter Card 标签，预览标题、描述、图片和 URL 在社交分享卡片中的效果。

示例

Meta 标签或键值行

社交卡片预览就绪

预览结果会显示在这里。

下一步可以继续

把当前预览结果带到相关工具里继续转换、排查或导出。

HTML 沙箱预览

在禁用脚本的沙箱中预览 HTML 组件、邮件片段和落地页区块。

打开

CSS 渐变预览

预览 CSS linear、radial、conic 和 repeating 渐变，并提取色标。

打开

Base64 图片预览

预览 Base64 图片字符串和 data URL，并分析 MIME 类型和体积。

打开

使用方法

1粘贴 HTML head 或聚焦的 metadata 片段。
2检查 og:title、og:description、og:image、twitter:card 和缺失标签提示。
3确认图片 URL 是绝对地址、公开可访问，并且尺寸适合社交卡片。
4更新页面源码后再次验证，再提交到社交或搜索平台。

常见场景

社交卡片预览发布前 QA技术 SEO reviewSVG 封面发布AI HTML metadata 校验

常见问题

为什么 meta 标签存在但社交卡片失败？

图片可能是相对路径、被阻止、尺寸不合适、发生重定向，或外部爬虫无法访问。有些平台还会缓存旧 metadata。

每个页面至少需要哪些标签？

如果需要分享，至少应有 title、description、og:title、og:description、og:image、og:url 和 twitter:card。

它会抓取线上 URL 吗？

当前更适合检查粘贴的 markup，尤其适合发布前复制页面源码或 AI 生成 HTML 来预览。

Open Graph Preview Debugger 用来检查 title、description、og:image、Twitter card 和社交分享摘要，适合页面发布或推广前 QA。

它适合营销文章、文档发布、changelog 页面和 AI 生成 HTML，因为源码看起来正确，不代表链接预览一定正常。

建议和 robots、sitemap 检查一起使用，确保页面可抓取、卡片有效、图片能被外部平台访问。

Demo：分享前验证发布页卡片

发布文章常见问题是卡片图只存在本地，线上不可访问。发帖前预览 HTML head，并确认图片使用绝对 URL。

og:image 使用完整 https URL，不要写 /og.png。
标题要足够短，避免社交预览截断核心信息。
description 即使被截断也要能说明页面价值。

<meta property="og:title" content="DiagramPreview Mermaid Tools" />
<meta property="og:description" content="Preview, fix, and export Mermaid diagrams before publishing docs." />
<meta property="og:image" content="https://diagrampreview.com/og-image.png" />
<meta name="twitter:card" content="summary_large_image" />

绝对图片地址更容易被搜索和社交平台稳定抓取。

社交预览清单：发链接前先调试卡片

Open Graph 预览常见问题包括图片不是绝对地址、图片被拦截、爬虫缓存未刷新、标题在卡片里被截断。

og:image 使用 https 绝对地址，不要用相对路径。
标题和描述要考虑截断后的可读性。
发布前检查图片尺寸、content-type 和爬虫可访问性。

<meta property="og:title" content="Mermaid Preview Online" />
<meta property="og:image" content="https://diagrampreview.com/og/mermaid-preview.png" />