HTML中不能直接标注热度数据，必须使用data-前缀的自定义属性（如data-views="248"）存储数值，供JS读取或工具解析；搜索引擎不索引data-*内容，SEO需依赖JSON-LD等结构化数据。
HTML里不能直接“标注”热度数据，只能存结构化标记
浏览器不识别“热度”这种业务概念，HTML 本身没有 data-hotness 或 data-views 这类原生属性。你真正能做的，是用 data- 自定义属性把数值存进去，供 JS 读取或搜索引擎/爬虫解析。
常见错误是直接写 <div hot=123> —— 这既无效也不合法，HTML5 只认 data- 开头的自定义属性。
- 必须用
data-前缀，比如data-views="248"、data-comments="17"、data-likes="93" - 值推荐用字符串数字（
"248"），避免空格、逗号、单位（别写"248次"或"248,000"） - 如果后端渲染，确保这些值已转义，防止 XSS：比如用户昵称混进
data-author时要 HTML-encode
SEO 和爬虫怎么看待 data-* 属性
Google 等主流搜索引擎**不索引** data- 属性内容，它们只看可见文本、meta 标签、结构化数据（如 JSON-LD）。所以光靠 data-likes="93" 不会让帖子在搜索结果里显得“更热”。
但 RSS 抓取器、社区运营后台脚本、或是你自己写的监控工具，很可能就靠它批量提取热度指标。
立即学习“前端免费学习笔记（深入）”；
- 想让搜索引擎理解热度？得补 JSON-LD：
AggregateRating或InteractionCounter类型 -
data-属性适合内部系统消费，不是 SEO 替代方案 - 别把敏感统计（如 UV、DAU）全塞进
data-里——前端可直接查看，有泄露风险
用 JS 读取和更新热度值要注意什么
DOM 操作看似简单，但并发更新、缓存、竞态容易出错。比如用户双击点赞，JS 可能发两次请求，但 DOM 只更新一次，导致界面和实际状态不一致。
- 读取用
element.dataset.views（自动转驼峰），但注意旧版 IE 不支持，需 fallback 到getAttribute("data-views") - 更新值后，记得同步触发事件（如
dispatchEvent(new CustomEvent("hotness-change"))），否则监听方收不到 - 避免频繁重设
dataset.likes导致 layout thrashing——尤其在列表页滚动时，建议节流或用requestIdleCallback
服务端渲染时 data-* 和 SSR hydration 的坑
React/Vue 服务端渲染（SSR）后，客户端 JS 再次挂载时会比对 DOM。如果你服务端输出了 data-likes="93"，但客户端初始 state 是 likes: 0，React 就会警告 “Prop `data-likes` did not match”，甚至强制重绘。
- 服务端和客户端的初始值必须严格一致；建议把热度数据作为 props 注入，而不是硬编码进
data- - 若热度实时变动（如 WebSocket 推送），优先走 JS 更新 DOM，而非重新 hydrate 整个组件
- Next.js / Nuxt 等框架中，
data-属性不会参与服务端到客户端的状态同步，它只是静态快照
实际项目里，最常被忽略的是：热度数据一旦进了 data-，就等于公开给了所有人——包括竞争对手的爬虫。要不要暴露、暴露哪些、是否做混淆（比如 base64 或偏移），得根据业务敏感度定，不是加个 data- 就算完事。
