必须和 target="_blank" 一起用,否则新页面可通过 window.opener 劫持原页面;noopener 切断 opener 引用防篡改,noreferrer 隐藏 Referer,二者缺一不可。

rel="noopener noreferrer" 必须和 target="_blank" 一起用
不加这两个值,target="_blank" 会带来安全风险:新页面能通过 window.opener 控制原页面跳转,甚至执行恶意重定向。Chrome、Firefox 等现代浏览器虽已默认隔离部分能力,但旧版或特定配置下仍可被利用。
正确写法是:<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部链接</a>
-
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 权重,后者管语义提示(告诉搜索引擎这是站外链接)。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
rel="next" 和 rel="prev" 是分页 SEO 的关键信号
对长文章分页、博客归档、商品列表翻页等场景,rel="next" 和 rel="prev" 是 Google 官方推荐的分页关系声明方式,比单纯靠 URL 规则更可靠。
必须成对出现且逻辑闭环:
- 第一页只有
rel="next",没有rel="prev" - 中间页同时有
rel="prev"和rel="next" - 最后一页只有
rel="prev",没有rel="next"
错误示例:<link rel="next" href="/page/2"> 写在第 3 页上,会导致 Google 认为分页逻辑混乱,可能合并或丢弃某些页的索引。
rel="stylesheet" 和 rel="icon" 是 link 标签里最不能错的两个值
<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属性更稳妥,例如:<link rel="icon" href="/favicon.ico" type="image/x-icon"> - 不要混用
rel="apple-touch-icon"和rel="icon"—— 前者专用于 iOS 添加到主屏幕,后者才是通用 favicon
这些值看似基础,但线上环境里因大小写、拼写、遗漏导致白屏或图标不显示的问题,远比想象中常见。


















