必须和 target="_blank" 一起用，否则新页面可通过 window.opener 劫持原页面；noopener 切断 opener 引用防篡改，noreferrer 隐藏 Referer，二者缺一不可。
rel="noopener noreferrer" 必须和 target="_blank" 一起用
不加这两个值，target="_blank" 会带来安全风险：新页面能通过 window.opener 控制原页面跳转，甚至执行恶意重定向。Chrome、Firefox 等现代浏览器虽已默认隔离部分能力，但旧版或特定配置下仍可被利用。
正确写法是：@#@#@#@#@#@#@#@#@#@0
-
noopener切断window.opener引用，防止新页篡改原页 -
noreferrer同时抑制Referer请求头发送，隐藏来源 URL - 不要只写
rel="noreferrer"：它在部分旧浏览器（如 Safari 11.1 之前）不触发noopener行为，仍存在 opener 漏洞 - SEO 不受影响 —— 搜索引擎照常抓取，只是不传递权重给该链接（这点由
nofollow控制，不是noreferrer的职责）
rel="nofollow" 不等于屏蔽爬虫，而是不传递权重
很多人误以为加了 rel="nofollow" 就能让链接“不被收录”，其实不是。Google 明确说明：它只表示“不将此链接作为排名信号”，但页面仍可能通过 sitemap、其他内链、外链等方式被发现和索引。
典型使用场景：
- 用户生成内容中的链接（评论、论坛发帖）
- 广告、赞助、付费推广链接
- 登录页、注册页等非内容导向的跳转入口
注意：rel="nofollow" 和 rel="external" 可共存，比如 rel="nofollow external"，前者管 SEO 权重，后者管语义提示（告诉搜索引擎这是站外链接）。
rel="next" 和 rel="prev" 是分页 SEO 的关键信号
对长文章分页、博客归档、商品列表翻页等场景，rel="next" 和 rel="prev" 是 Google 官方推荐的分页关系声明方式，比单纯靠 URL 规则更可靠。
必须成对出现且逻辑闭环：
- 第一页只有
rel="next"，没有rel="prev" - 中间页同时有
rel="prev"和rel="next" - 最后一页只有
rel="prev"，没有rel="next"
错误示例： 写在第 3 页上，会导致 Google 认为分页逻辑混乱，可能合并或丢弃某些页的索引。
rel="stylesheet" 和 rel="icon" 是 link 标签里最不能错的两个值
标签的 rel 值一旦写错，资源就加载失败，且浏览器通常不报错 —— 只是静默忽略。比如把 rel="stylesheet" 写成 rel="style" 或漏掉，CSS 就不会生效；把 rel="icon" 写成 rel="shortcut icon"（旧写法），新版 Chrome 已不识别。
当前规范要求：
- CSS 引入必须用
rel="stylesheet"，且type="text/css"已非必需（HTML5 中可省略） - Favicon 必须用
rel="icon"，配合type和sizes属性更稳妥，例如： - 不要混用
rel="apple-touch-icon"和rel="icon"—— 前者专用于 iOS 添加到主屏幕，后者才是通用 favicon
这些值看似基础，但线上环境里因大小写、拼写、遗漏导致白屏或图标不显示的问题，远比想象中常见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
