如何巧妙运用HTML data属性实现长尾关键词优化？

说实话， HTML data属性是个好东西，你懂的，就是可以在元素上随便加个自定义属性，后面让JS去读，YYDS，说句实话…！

换句话说... 比如你有个按钮， 可以这样写：赞然后JS就可以去读取这个data-liked属性。

一、 那些你可能不知道的事儿

害，咱就是说这个data属性其实很简单，但还是有些坑的，拉倒吧...。

常见坑

先说说 属性名里别带大写字母，写成 data-MyInfo 会直接失效， 也许.… 不对不对，应该是浏览器会忽略它。

还有， 别把对象直接塞进去，只能是字符串，要想存对象得 JSON.stringify 一下。

说明….. 有时候你会忘记驼峰转化， data-user-id 用 js 拿到的是 dataset.userId，不是 user-id，你懂的。

在JS里怎么读写

下面给你们演示几段超简陋代码：

// 获取元素
var btn = document.querySelector;
// 读取
var liked = btn.dataset.liked; // "false"
// 设置
btn.dataset.liked = 'true';
btn.textContent = '已赞';

这玩意儿不影响页面渲染， 只是让你以后能用 element.dataset.xxx 去取值，总的来说挺方便的，摸个底。。

*小技巧*: 把 data- 属性配合 CSS 伪类做视觉提示，比如：

button::after{
  content:"✅";
}
button::after{
  content:"❌";
}

何不试试？不过 IE9 以下根本不支持 dataset， 只能走 getAttribute/setAttribute，这事儿就有点麻烦了。

实战案例——商品卡片

T-Shirt 小T恤

  
¥29.99

总之啊， 这玩意儿就是给前端偷懒的一根棍子，用得好还能省好多代码；用得烂就跟粪坑一样臭。

YYDS！ 搜索引擎爬虫一般不会去理会 data-* 的值， 所以如果你想靠它提升排名，白忙活一场，不过它可以帮你做一些结构化信息。

主要原因是有时候你不想把数据写进class或者id里 那样会把样式和逻辑搞混， 精辟。 归根结底还是为了方便。

- 用 CSS 动画配合 data-state 实现切换， 精辟。 比如：.box{animation:open 0.5s}

- 想让 CSS 根据数据值改变颜色？直接属性选择器{color:red}

吃瓜。 假设每次点按钮都要切换状态， 可以这么写：

function toggleLikeState {
  var cur = btn.dataset.liked === 'true';
  btn.dataset.liked = .toString;
  btn.textContent = cur ? '赞' : '已赞';
}

那就这样吧，希望大家别跟着抄，我这篇已经够烂够乱了你们自己再去折腾吧。别忘了给我点个赞👍，或者不给也行，我懒得管，这事儿我得说道说道。。