应使用标记烹饪步骤并用标注时间，同时添加schema.org微数据；确保时序语义和无障碍支持，提供机器可读时间，itemprop属性使步骤时间被搜索引擎富媒体识别。
用 <ol></ol> 而不是 <ul></ul> 标记步骤顺序
烹饪步骤天然具有严格时序，<ol></ol> 表达“第1步、第2步……”的语义是明确且被屏幕阅读器和搜索引擎识别的。用 <ul></ul> 会丢失这个关键信息，即使视觉上加了数字序号也没用。
常见错误：用 <div> 或 <code><p></p> 套一堆文字，再靠 CSS 伪元素生成序号——这纯属视觉模拟，无障碍和结构化数据都失效。
- 每步用一个
<li>，不要把多步塞进同一个<li> - 避免在
<li>里嵌套<ol></ol>（比如“腌制”里再分小步），除非真有子流程；否则拆成独立步骤更利于解析 - 如果某步含多个动作（如“将洋葱切丁，放入锅中炒至微黄”），保持为一句完整指令，不强行拆成两句——语义上它仍是单步操作
时间信息必须用 <time></time> 元素标注
“煮15分钟”“冷藏2小时”这类时间不能只写成普通文本。<time></time> 的 datetime 属性提供机器可读格式，对食谱聚合、日历导入、语音助手理解至关重要。
常见错误：写成 <span>15分钟</span> 或直接裸文本，导致所有时间语义丢失。
- 持续时间用
PT15M（ISO 8601 格式）：<time datetime="PT15M">15分钟</time> - 具体时间点用
2024-05-20T18:00：<time datetime="2024-05-20T18:00">下午6点</time> - 避免用中文单位混入
datetime值，如datetime="15分钟"是无效值 - 如果只有模糊时间（如“约30分钟”），仍用精确值
PT30M，中文描述保留在标签内文本中
步骤中嵌入时间要放在语义合理位置
时间不是孤立存在，它属于某个动作。把 <time></time> 放错位置会导致结构歧义，比如放在步骤开头或结尾，容易被误认为是整个步骤的起止时间，而非该动作本身的耗时。
正确做法是让 <time></time> 紧贴动词或动作描述词：
而不是：
- 时间修饰的是“烘烤”，不是“将面团放入烤箱”——后者是瞬时动作，不应绑定持续时间
- 若一步含多个时间（如“静置10分钟，再揉2分钟”），用两个
<time></time>分别包裹对应短语 - 避免用
<time></time>标注非时间信息，比如温度（180°C）或份量（200g），它们不属于时间范畴
别忽略 itemprop 和 itemtype 的实际价值
光有语义 HTML 不够，要让 Google 食谱富媒体结果、Siri 快捷指令真正识别你的步骤，得补上 schema.org/Recipe 微数据。没有它，<ol></ol> 和 <time></time> 只是“看起来规范”，实际不出现在搜索结果卡片里。
最容易被跳过的细节：步骤时间必须同时满足两个条件才被富媒体抓取——既在 <time></time> 里，又带 itemprop="cookTime" 或 itemprop="prepTime"。
-
cookTime指加热/烹饪耗时，prepTime指备料耗时，别混用 - 整个步骤列表需包裹在
<div itemscope itemtype="https://schema.org/Recipe"> 内 <li>检查工具：用 Google 的 <a href="https://www.php.cn/link/b1fa0b6b06066d871b835fc80f71b3d0" target="_blank">Rich Results Test</a> 验证是否解析出 <code>recipeInstructions和对应时间字段
复杂点在于，同一段 HTML 要同时满足人类可读、辅助技术可访问、搜索引擎可提取三层需求，少一层都算没做完。
