data-*属性必须全小写、用短横线分隔，如data-price="29.99"✅；应绑定在语义相关可见元素上，避免孤立div或meta标签；不替代JSON-LD，仅用于JS读取或简单爬虫提取；价格等数值需标准化，单位另用data-currency声明。
data-* 属性怎么写才被搜索引擎和工具识别
直接在元素上加 data-price 和 data-sku 就行，但必须遵守 HTML5 规范：属性名全小写、用短横线分隔、不能含大写字母或下划线。浏览器不校验，但结构化数据工具（比如 Google Rich Results Test）会跳过非法命名的 data- 属性。
常见错误：data-Price、data_sku、data-productID —— 这些都不会被解析为有效机器可读值。
-
data-price="29.99"✅ 合法 -
data-sku="ABC-123-XL"✅ 合法（短横线允许，字母数字和连字符都支持） -
data-price-usd="29.99"✅ 合法，但注意语义冗余，除非你同时存多种货币
放在哪个 HTML 元素里效果最好
别塞到 <div> 或 <span> 里“随便挂”。优先绑定到语义最贴近的容器：比如价格就放 <span class="price"> 里，商品编号放 <meta> 或紧邻 <h1> 的 <dl> 项中。搜索引擎更倾向从可见文本附近提取 data- 值，而不是孤立的空标签。
反例：<div data-price="29.99"></div> —— 没有对应可见内容，多数解析器会忽略。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
立即学习“前端免费学习笔记（深入）”；
- 推荐：
<span class="price" data-price="29.99">$29.99</span> - 推荐：
<dd data-sku="ABC-123-XL">SKU: ABC-123-XL</dd> - 避坑：不要用
<meta>标签放data-——<meta>不支持自定义data-属性，写了也无效
和 JSON-LD 或 Microdata 比，data-* 有什么实际限制
data- 属性本质是 DOM 层的辅助标记，不是结构化数据标准。它不自动触发富媒体结果，也不能替代 <script type="application/ld+json">。它的价值在于前端 JS 快速读取、A/B 测试埋点、或配合简单爬虫提取——但 Google Search Console 不把它当 Schema.org 数据源。
- JS 读取方便：
element.dataset.price直接拿到字符串（注意驼峰转换：data-sku→dataset.sku） - 无法表达关系：比如“这个价格属于哪个产品”，
data-没法声明主谓宾，只能单点绑定 - 无类型校验：
data-price="free"会被当作字符串保留，不会报错，但下游逻辑可能崩
价格单位和格式怎么处理才不容易出错
data-price 应该只存标准化数值，不带符号、不带空格、不带逗号。货币单位另用 data-currency 单独标，否则 JS 解析或爬虫清洗时容易误切。
- ✅ 正确：
data-price="29.99" data-currency="USD" - ❌ 危险：
data-price="$29.99"（$ 可能被截断）、data-price="29,99"（欧洲格式易被 parseFloat 当整数） - ⚠️ 注意：
data-price="0"和data-price=""在 dataset 中都转成空字符串，建议显式设"0.00"
商品编号同理，避免用 data-sku="ABC 123" —— 空格在某些解析场景下会被 trim 或 split，一律用短横线或下划线连接。
