技术文章发布前预览：Markdown、SVG、Open Graph、截图和代码示例
发布技术博客、README、产品文档或工具页前，用 Markdown 预览、SVG 检查、Open Graph 调试和截图 review 降低展示错误。
发布质量会直接影响搜索点击和工具转化
技术文章经常输在最后一步：标题能被搜索到，但 Open Graph 图片模糊；代码示例无法复制；SVG 封面断字；截图没有展示真实结果；链接只指向首页而不是具体工具。
这篇文章的搜索意图是“发布前怎么检查”。所以正文应该围绕可执行 checklist 展开，而不是泛泛介绍 Markdown 或 Open Graph 是什么。
Markdown 预览要包含真实可复制的代码
教程里至少要有一个可以直接放进工具运行的输入。只有概念描述会降低停留时间，也很难把用户引导到具体工具页。
如果代码块很长，建议在正文先给最小 demo，再把完整例子放到后续章节或仓库。
## Debug a JSON response with jq
```text
.error.code
---
{"error":{"code":"DUPLICATE_PAYMENT_INTENT"}}
```
Expected result: DUPLICATE_PAYMENT_INTENT appears in the preview output.SVG 封面和导出图要检查可读性、尺寸和安全边界
SVG 适合作为技术封面和图表导出格式，但它也可能出现 viewBox 过大、文字溢出、对比度不足、外链图片失效或脚本标签。
SVG Code Preview Editor 的价值在于让作者先看到真实渲染结果，再决定是否导出、压缩或替换为 PNG。
<svg viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
<rect width="1200" height="630" fill="#0f172a"/>
<text x="80" y="160" fill="white" font-size="64">API Debugging Workflow</text>
<text x="80" y="250" fill="#93c5fd" font-size="34">OpenAPI + HAR + jq + JSONPath</text>
</svg>Open Graph 不是补充信息，而是搜索和社交入口
Open Graph 标题、描述和图片决定页面在聊天工具、社交平台、知识库和内部 IM 里的第一印象。图片 URL 必须是绝对地址，并且平台能访问。
Open Graph Preview Debugger 应该检查标题是否被截断、描述是否重复 H1、图片尺寸是否合适、是否仍然指向本地路径。
<meta property="og:title" content="API Debugging Workflow" />
<meta property="og:description" content="Preview OpenAPI, Postman, HAR, jq and JSONPath before publishing a debugging note." />
<meta property="og:image" content="https://diagrampreview.com/blog/api-debugging-preview.png" />截图要证明工具真的解决了一个问题
发布页里至少放一张能说明价值的截图：左侧输入，右侧预览或输出，下面写清楚它发现了什么问题。单纯的装饰封面不能替代产品证据。
如果文章目标是导流工具页，截图附近应该出现具体工具名，例如 Markdown Preview、SVG Code Preview Editor、Open Graph Preview Debugger，而不是泛泛写“在线工具”。
最终发布 checklist
发布前依次检查：Markdown 预览、代码能否运行、SVG 或封面图是否清晰、Open Graph 是否可抓取、截图是否展示真实结果、链接是否指向具体工具页。
这类支柱文章适合承接所有发布前预览相关长尾文章，把 Open Graph、SVG、Markdown、截图和 sitemap/robots 文章聚合起来，减少内容稀释。