time标签需用iso 8601格式的datetime属性绑定机器可读时间，否则seo和辅助技术失效；正确格式如2026-05-18、2026-05-18t13:57:00+08:00；显示文本可自由定制以适配人类阅读。
time 标签本身不“展示”机器可读时间，它只是提供一个容器，把人类可读文本和机器可读的 datetime 属性绑在一起。真正起作用的是 datetime 属性的值——必须是 ISO 8601 格式，否则搜索引擎、屏幕阅读器、结构化数据提取器全当没看见。
datetime 属性格式错误会导致 SEO 元数据失效
常见错误现象：
- Google Rich Results Test 报告 “Missing field ‘datePublished’”
- 页面里明明写了
<time>昨天</time>，但结构化数据面板里发布时间为空 - 屏幕阅读器只读出“time”，不读具体时间
原因很直接：没有 datetime 属性，或值不符合 ISO 8601。
必须满足的格式条件：
- 仅日期：
2026-05-18（不能写2026/05/18或2026年5月18日） - 带时间：
2026-05-18T13:57:00（T是分隔符，不能省略或替换成空格） - 带时区：
2026-05-18T13:57:00+08:00（不能写CST、北京时间或GMT+8） - UTC 时间：
2026-05-18T05:57:00Z（Z表示零时区，不是字母z）
动态生成时别用 toLocaleString()，它输出本地格式字符串，机器无法解析。应该用：
-
new Date().toISOString().slice(0, 19)（得手动补时区偏移才能代表本地时间） - 或更稳妥地用
Intl.DateTimeFormat+formatToParts()拼出带偏移的 ISO 字符串
time 标签内容与 schema.org 微数据配合使用
很多 CMS 或主题会同时用 time 和 itemprop="datePublished"，但二者不是自动联动的。
关键点：
- 如果你写了
<time datetime="2026-05-18" itemprop="datePublished">今天</time>，Google 会优先取datetime值作为发布时间 - 但如果
datetime格式非法，itemprop就失去来源，整个字段在结构化数据中被忽略 - 同一页面多个
time[datetime]时，搜索引擎只认语义最明确的那个（比如带itemprop或出现在<article></article>内部的）
建议做法：
- 博客正文顶部放一个
<time datetime="2026-05-18T13:57:00+08:00" itemprop="datePublished">5月18日 13:57</time> - 修改时间另起一行：
<time datetime="2026-05-18T14:20:00+08:00" itemprop="dateModified">更新于5月18日 14:20</time> - 不要给同一个
time元素加多个itemprop（如同时标datePublished和dateModified），语义冲突
为什么显示文本可以和 datetime 完全不一致？
因为这是 time 标签的设计本意：分离语义与表现。
典型场景：
- 文章列表页显示
<time datetime="2026-05-10">5天前</time>—— 人类友好，机器靠datetime精确排序 - 日历事件页显示
<time datetime="2026-05-20T19:00:00+08:00">今晚7点</time>—— 上下文已暗示日期，datetime提供完整锚点 - 多语言站点：
<time datetime="2026-05-18">May 18, 2026</time>（英文用户） vs<time datetime="2026-05-18">2026年5月18日</time>（中文用户）
容易踩的坑：
- JS 动态更新
textContent时，顺手也改了datetime，导致原始时间戳丢失 - 服务端模板渲染时，把变量拼错成
datetime="{{ post.date | date:'Y-m-d' }}"，漏了前导零（如2026-5-18→ 非法） - 用 CSS 的
::before覆盖显示内容，却没意识到屏幕阅读器仍会读原始文本，造成双重播报
真正的难点不在写对格式，而在于保持 datetime 的稳定性和上下文一致性。一旦混用本地时间、UTC、无时区日期，后续做时区转换、聚合分析、富摘要生成，全都会出偏差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
