什么是 rel="noopener"？
术语“noopener”是指出于安全原因，添加到设置为在新浏览器选项卡或浏览器新窗口中打开的链接的 rel="noopener" HTML 属性，通常与target="_blank"搭配使用。
此属性的目的是为网站访问者提供额外的安全级别，具体来说，是通过阻止您链接到的第三方网站通过窗口对象（window.opener 属性）控制浏览器选项卡。
以下是它在 HTML 代码中的样子：
<a href="https://ahrefs.com" rel="noopener" target="_blank">最佳 SEO 工具</a>
为什么 rel="noopener"很重要？
如果没有 rel="noopener"属性，链接的网站可能会控制浏览器中的链接页面选项卡并将其重定向到网络钓鱼页面或恶意网站。这可用于窃取个人数据或安装恶意软件。
举个例子：
假设在淘宝网上有一个 B网站链接没有带 noopener，当你打开了 B 网站的时候，B 检测到你没有添加 window.opener 的时候，我就把你网站重定向到一个高仿的淘宝网站。
当你从 B 网站回到前面的淘宝网站时，你可能并不会注意这个时候已经是一个假淘宝网了。然后让你输入用户名密码进行登录等等操作。这个时候你的淘宝账号就泄露了。
其实这个就是网络钓鱼的过程。
所以，当你的网站里面有外链的时候，都应该在连接上加上 noopener 这个属性。当我们在开发网站的时候，务必要给每个新也页面打开的链接都加上 noopener 属性。
好消息是，自 2020 年以来，大多数浏览器都会自动处理带有 target="_blank"（在新选项卡/窗口中打开）的链接，就好像在它们上设置了 rel="noopener" 一样。
rel="noopener"会影响 Google SEO 吗？
一些网站所有者表示不愿意使用“noopener”属性，因为他们担心这会影响他们网站的 SEO。
实际上，rel="noopener"对 SEO 没有任何影响。 rel="noopener"属性是在浏览器级别起作用，可防止安全漏洞。
如何使用rel="noopener"？
如果使用的是 WordPress，WordPress会自动添加rel="noopener"。
如果不适用 WordPress，最好在新选项卡/窗口中打开的链接上手动添加rel="noopener"。
rel="noopener"是否一定要添加？
当你的网站没有外链或者链接出去的网站是你信任的网站时，可以不添加。其他 target="_blank" 的情况建议都添加。
