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> 或 <code><span></span> 里“随便挂”。优先绑定到语义最贴近的容器:比如价格就放 <span class="price"></span> 里,商品编号放 <meta> 或紧邻 <h1></h1> 的 <dl></dl> 项中。搜索引擎更倾向从可见文本附近提取 data- 值,而不是孤立的空标签。
反例:<div data-price="29.99"></div> —— 没有对应可见内容,多数解析器会忽略。
- 推荐:
<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"></script>。它的价值在于前端 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,一律用短横线或下划线连接。











