HTML中JSON-LD的HowTo类型标记方法-html教程-PHP中文网

howto结构化数据必须用type="application/ld+json"静态嵌入html源码，ssr输出，含@context、@type、name、step（howtostep数组，每项含name和text）、totaltime或estimatedcost，且text须与页面可见文本逐字一致。

html中json-ld的howto类型标记方法

HowTo 类型必须用 `type="application/ld+json"` 嵌入，且不能动态生成

Google 只识别放在 HTML 源码中、type 严格为 "application/ld+json" 的 script 标签。用 useEffect、mounted 或 document.createElement('script') 在客户端注入，Googlebot 看不到，直接失效。

SSR 框架（如 Next.js、Nuxt）必须在服务端吐出完整 JSON-LD
不要套在 <div>、<code><section></section> 或其他标签内，必须是独立的 <script></script>
type 写成 "text/json"、"application/json" 或漏写，全都不认

`HowTo` 必须包含哪些字段才被识别

Google 对 HowTo 的最低要求比 Article 更细，缺任一关键字段就退化为普通文本：

@context 必须是 "@#@#@#@#@#@#@#@#@#@0"（不是 http，也不能拼错）
@type 必须是 "HowTo"（大小写敏感）
name 是步骤总标题，比如 "如何更换自行车内胎"
step 是数组，每项必须是 HowToStep 类型，且至少含 name（单步标题）和 text（操作描述）
totalTime 或 estimatedCost 至少填一个（否则富摘要不触发）

`HowToStep` 的 `text` 必须和页面可见内容逐字一致

这不是“意思对就行”，而是字符级匹配：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

页面上写的是 "用扳手拧松螺母"，JSON-LD 里就不能写成 "使用扳手松开螺母"
全角空格、换行符、中文标点（，。！？）都算差异
如果步骤含图片或视频，HowToStep 可加 image 或 video 字段，但 URL 必须可公开访问、返回 200
多个步骤别合并成一段 text，必须拆成独立 HowToStep 对象

常见报错：“无法解析结构化数据”怎么快速定位

Google Search Console 或 URL Inspection Tool 报这个错，90% 是以下几类：

JSON 语法错误：末尾多逗号、用了单引号或中文引号、写了 JS 注释（// 或 /<em> </em>/）
step 写成对象而非数组，比如 "step": { "name": "第一步" }（正确应为 "step": [ { "name": "第一步", "text": "..." } ]）
HowToStep 缺 text 字段，或误写成 description、body
image 字段值是相对路径（如 "./img.jpg"）或本地路径（如 "file:///C:/img.jpg"）