HTML代码中HowTo步骤指南结构化数据的嵌入指南-html教程-PHP中文网

howto结构化数据必须用json-ld格式，且需包含@context、@type、name、step四个必填字段；name须为流程简述（40–60字符），step须为含@type:"howtostep"和text的数组；图片url须可访问、尺寸达标，tool/supply须为字符串数组；仅google rich results test结果有效。

html代码中howto步骤指南结构化数据的嵌入指南

HowTo 结构化数据必须用 JSON-LD，不能用 Microdata 或 RDFa

Google 只支持 HowTo 类型通过 script type="application/ld+json" 嵌入，Microdata 和 RDFa 方式会被完全忽略——哪怕语法正确、校验通过，也不会触发富媒体搜索结果。

常见错误是把 HowTo 写进 <div itemscope itemtype="https://schema.org/HowTo">，这种写法在 Google Rich Results Test 中会显示“no structured data detected”。<ul> <li>只在 <code> 或页面末尾的中添加一个 <script type="application/ld+json"></script> 块

确保 JSON 有效：字符串加引号、逗号不结尾、无 trailing comma

避免在 JSON 中混用单引号或未转义的换行符（

要写成 \n 或直接换行并用双引号包裹）

required 字段一个都不能少，特别是 `step` 和 `name`

HowTo 是强约束类型，Google 明确要求以下字段必须存在且非空：@context、@type、name、step。漏掉任意一个，富结果就会失效。

最容易被忽略的是 name —— 它不是页面标题，而是对整个操作流程的简短概括（如“如何更换自行车内胎”），长度建议 40–60 字符；step 必须是数组，即使只有一步也要写成 [{ "@type": "HowToStep", "name": "...", "text": "..." }]。

step 数组里每个对象必须含 @type: "HowToStep" 和 text（纯文本描述，不支持 HTML 标签）
totalTime 和 estimatedCost 是可选，但加上能提升展示率；若不填，别留空字段，直接省略
不要用 itemListElement 包裹 step —— 这是旧版 ItemList 的写法，HowTo 要求直接用 step 数组

图片和工具字段要符合 Google 的实际抓取规则

HowTo 支持 tool、supply、image，但它们不是装饰项：Google 会真实校验图片能否加载、URL 是否可访问、尺寸是否达标（主图推荐 ≥ 1200px 宽，比例 16:9 或 4:3）。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

常见失效原因：图片 URL 是相对路径（如 "./img/wrench.jpg"）、用了本地开发地址（"http://localhost:3000/..."）、或图片返回 404/403；tool 和 supply 必须是字符串数组，不能是对象或带链接的富文本。

image 接受字符串（单图）或字符串数组（多图），但首张图决定搜索结果缩略图
tool 示例应为 ["螺丝刀", "扳手"]，而非 [{"@type":"Thing","name":"螺丝刀"}]
如果某步需特定工具，优先写在对应 HowToStep.text 里，而不是堆在顶层 tool 字段中

调试时优先用 Google Rich Results Test，别信结构化数据测试工具的“通过”提示

很多第三方结构化数据校验器（包括某些浏览器插件）只检查 JSON 语法和 schema.org 字段名，不模拟 Google 的实际解析逻辑。真正决定是否出富结果的，是 Google Rich Results Test（现整合进 Search Console）。

典型误判场景：工具显示“valid”，但 Google 报错 "HowTo.step: Missing field" —— 往往因为 step 数组里某个对象缺 text，或用了 null / 空字符串；又或者整个 script 标签被 JavaScript 动态插入（Google 不执行 JS 渲染后的结构化数据）。

测试前务必用“Live URL”模式，而非“Code snippet”，否则看不到 CDN 缓存或服务端渲染问题
如果页面有多个 script[type="application/ld+json"]，确保 HowTo 块不被其他 JSON-LD（如 Article）意外覆盖或合并
上线后至少等 3–5 天再查 Search Console 的“Rich results status”报告，索引延迟很常见

最麻烦的不是写错字段，而是字段全对但图片 404、或 step 里混了 Markdown 符号（比如 "* 拧紧螺丝" 中的星号被当成列表标记，其实 JSON-LD 里它只是普通字符——但人眼容易误读，导致调试绕弯。