a标签 rel=“external nofollow“ 用法

链接权重外部链接nofollow属性网页源码a标签]

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

NoFollow 是 Google 曾经提出的一个a新标签,目的是减少垃圾留言(例如米扑博客的留言:https://blog.mimvp.com/about#comments),解释当前页面与此留言链接指向页面之间的关系。使用了此标签表明链接与网站作者无关,也就是说搜索引擎不会用这个链接计算网站的 PR 值。很多博客程序都会自动在评论链接中加上 nofollow 标签。现在主流的 Blog 程序,如 WordPress 和 MovableType 均默认为其留言与 trackback 中的链接自动添加 nofollow 属性。这样可以使 Spammer 意图通过这种方式提高网站流行度的目标落空。

米扑博客原文:a标签 rel=“external nofollow“ 用法

rel 有很多的属性值,比如 next、previous、chapter、section 等,本文不做解说,自行百度科普。

比较常见的就是【rel="nofollow"】和【rel="external nofollow"】这两种属性值的应用了。

 

网页源码里,a标签如下:

<a ref="external nofollow" target="_blank" href="https://blog.mimvp.com" title="i love mimvp.com">米扑博客</a>

解释说明:

nofollow 、external nofollow:告诉搜索引擎,不要将链接计入权重中,他是告诉一些非本站的链接、不想传递权重,例如网页里的统计代码、备案号链接、供用户查询链接等

external :告诉搜素引擎,这是非本站的链接,这个作用相当于target=“_blank”

external 和 nofollow 这两个属性的大致可以解释为 “这个链接非本站链接,不要爬取也不要传递权重”

 

 

ref="external nofollow"

ref="nofollow" 的作用,它是告诉搜索引擎,不要将该链接计入权重。

多数情况下,可以将一些不想传递权重的链接进行nofllow处理;

例如一些非本站的链接,不想传递权重,但是又需要加在页面中的像统计代码、备案号链接、供用户查询的链接等等。

 

除了 ref="nofollow" 还有两种链接属性形式,一种是 ref="external",另一种是 ref="external nofollow"。这两种分别代表什么意思呢?又有何区别呢?

rel="external"

此属性的意思是告诉搜索引擎,这个链接不是本站链接,其实作用相当于target=‘_blank’。

为什么要这样写呢?因为有些网站因为是采用严格的DOCTYPE声明的,如果你在网页源码中的第一行看到:在这种情况下target="_blank"会失效,因此采用rel="external"这个参数来替代。

 

rel="external nofollow"

上面已经说过rel=’nofollow’ 和 rel=’external’ 两种属性的所代表的意思了。这个属性基本上是相当于将两种属性结合起来,大致可以解释为 “这个链接非本站链接,不要爬取也不要传递权重”。因此在SEO的角度来说,是一种绝对隔绝处理的方法,可以有效减少蜘蛛爬行的流失。

 

rel="nofollow noopener noreferrer"

超链接 target="_blank" 要增加 rel="nofollow noopener noreferrer" 来堵住钓鱼安全漏洞。如果你在链接上使用 target="_blank"属性,并且不加上rel="noopener"属性,那么你就让用户暴露在一个非常简单的钓鱼攻击之下。

为了告知来自于不受保护的站点的用户,我们运行一个利用了这个缺陷的脚本。

1

2

3

if (window.opener) {

    window.opener.location = "https://mimvp.com/fishing?referrer="+document.referrer;

}

我相信绝大多数站点都没有恰当地处理这个问题,为了限制 window.opener的访问行为,原始页面需要在每个使用了target="_blank"的链接中加上一个rel="noopener"属性。

然而,火狐不支持这个属性值,所以实际上你要用 rel="noopener noreferrer"来完整覆盖。

 

target="_blank"属性特别提示

当你浏览一个页面点击一个a标签连接 <a href="mimvp.com" target="_blank"> 跳转到另一个页面时,

在新打开的页面(mimvp)中可以通过 window.opener获取到源页面的部分控制权, 即使新打开的页面是跨域的也照样可以(例如 location 就不存在跨域问题)。  

rel=noopener 新特性

<a href="mimvp.com" target="_blank" rel="noopener noreferrer"></a>

在chrome 49+,Opera 36+,打开添加了rel=noopener的链接, window.opener 会为null。

在老的浏览器中,可以使用 rel=noreferrer 禁用HTTP头部的Referer属性,使用下面JavaScript代替target='_blank' 的解决此问题:

1

2

3

var otherWindow = window.open('https://mimvp.com');

otherWindow.opener = null;

otherWindow.location = url;

使用 window.open 打开页面,手动剑opener设置为null。

更多资料,请参考:超链接 target="_blank" 要增加 rel="nofollow me noopener noreferrer" 来堵住钓鱼安全漏洞

<think>好的,用户想了解前端中a标签用法和属性,特别是HTML的<a>标签的使用方法、属性和示例。首先,我需要整理<a>标签的基本作用,然后列出常用的属性,比如href、target、download等,并给出每个属性的具体说明和示例。还要注意用户提供的引用内容,比如引用[2]和[3]提到了href属性和超链接的基本用法,引用[4]提到了display:block的应用,这些需要整合到回答中。 接下来,要确保回答结构清晰,分点说明,可能包括基本用法、常用属性、示例代码以及注意事项。同时,用户要求生成相关问题,需要根据内容提出相关的问题,比如属性区别、新窗口打开方法、样式调整等。 需要检查LaTeX格式是否正确,但用户的问题主要涉及HTML,可能数学公式较少,但如果有涉及变量或代码中的数学符号,要使用$...$格式。另外,引用标识要自然地添加在引用的段落末尾,例如在提到href时引用[2][^2],在提到display:block时引用[4][^4]。 还要注意用户可能需要的实际应用示例,比如创建下载链接或邮件链接,这些都需要具体代码示例。同时,要确保回答真实可靠,参考提供的引用资料,并补充其他必要的信息,如rel属性、title属性等,以全面覆盖a标签用法。 最后,生成的相关问题要围绕a标签的深入使用,比如SEO优化、样式调整、属性区别等,帮助用户进一步学习。检查是否有遗漏的重要属性或常见问题,确保回答全面且易于理解。</think>### HTML `<a>`标签的使用方法与属性详解 #### 一、基本作用 `<a>`标签是HTML中创建超链接的核心元素,用于实现页面跳转、锚点定位或资源下载[^3]。其基础语法为: ```html <a href="URL">链接文本/图片</a> ``` #### 二、核心属性说明 1. **href** - 定义链接目标地址,支持多种协议: ```html <a href="https://example.com">网页链接</a> <a href="mailto:contact@example.com">邮件链接</a> <a href="tel:+123456789">电话链接</a> ``` - 空链接可用`href="#"`或`href="javascript:void(0);"` 2. **target** - 控制链接打开方式: ```html <a href="doc.pdf" target="_blank">新窗口打开</a> <!-- 最常用 --> <a href="#section2" target="_self">当前页锚点跳转</a> ``` 3. **download** - 强制触发文件下载(需同源): ```html <a href="image.jpg" download>下载图片</a> <a href="report.pdf" download="年度报告.pdf">重命名下载</a> ``` 4. **rel** - 声明与目标资源关系,增强SEO与安全性: ```html <a href="external-site.com" rel="nofollow noopener">外部链接</a> ``` 5. **title** - 鼠标悬停时显示提示信息: ```html <a href="about.html" title="查看公司简介">关于我们</a> ``` #### 三、进阶使用示例 ```html <!-- 图片链接 --> <a href="gallery.html"> <img src="thumbnail.jpg" alt="产品图册"> </a> <!-- 锚点跳转 --> <a href="#chapter3">跳转到第三章</a> <div id="chapter3">...</div> <!-- 结合CSS样式 --> <style> .btn-link { display: block; /* 转为块级元素以设置宽高[^4] */ width: 200px; padding: 12px; background: #2196F3; color: white; text-align: center; } </style> <a href="#" class="btn-link">按钮式链接</a> ``` #### 四、注意事项 1. 始终为链接添加描述性文本,避免使用"点击这里" 2. 外部链接建议添加`rel="noopener"`防止安全漏洞 3. 移动端适配可使用`tel:`和`sms:`协议创建直接交互链接
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值