【HTML并不简单】笔记1-常用rel总结：nofollow、noopener、opener、noreferrer，relList

《HTML并不简单：Web前端开发精进秘籍》张鑫旭，一些摘要：

HTML，这门语言的知识体系非常庞杂，涉及Web交互开发、SEO（搜索引擎优化）​、安全、无障碍访问等各个领域，并不仅仅是单纯的标签结构。
大家之所以对HTML有错误认知，一是因为不关心，二是因为认为它可替代，三是因为它缺少好的科普著作。

过去，这是前端开发中的常识，而如今却是冷知识，知者甚少。
一方面是因为前端知识图谱更广了，从业者学习的精力有限，无暇顾及这部分内容；另一方面是产品形态更加多样化，例如移动端产品、工具类产品是不需要SEO知识的；当然，还有一部分原因是，这些知识的匮乏对业务收益的影响是不可见的，或者可以通过其他策略规避因开发人员不懂rel="nofollow"给产品带来的损失。

---

a元素，想要跳转到某个页面，使用href属性即可。若想新窗口打开目标页面，则：

<a href="/" target="_blank">首页</a>

即可。

---

a元素支持rel属性。
HTML 属性：rel - HTML（超文本标记语言） | MDN (mozilla.org)

我们这里关注几个值：

• nofollow
• noopener和opener
• noreferrer

rel=“nofollow”

给a元素设置rel="nofollow"是SEO中的常用策略，用来告诉搜索引擎不要追踪这个链接。一般情况下，有两种情况需要设置此属性：

• 目标页面是无效信息，或含有敏感信息
• 目标是外站，不希望共享权重

不希望共享权重的详细描述：

SEO中有个策略，如果一个权重很高的网站，直接外链一个权重不高的中小网站，同时没有设置rel=“nofollow”，那么这个中小网站的权重有一定的概率会被提高。

如果不想权重外泄，可以设置此属性。

相关链接：

何为Nofollow及如何正确地使用？ - 知乎 (zhihu.com)

如何用其他方法规避不懂rel="nofollow"带来的损失？

方法：将所有的外链都换成本站地址进行中转

专门申请一个域名，A网站想要外联B网站，点击B网站先跳到中转站，再跳去B网站。这样可以避免权重外泄，也可以统计外链的点击量。

优快云就是这样做的：

https://link.csdn.net/?from_id=xxxxxxxx&target=https%3A%2F%2Fzhuanlan.zhihu.com%2Fp%