链接类型帮助描述两个或多个网页之间的关系。它们还可以表达为什么特定的超链接出现在网页中。定义链接类型对SEO有好处，因为搜索引擎可以使用这些数据更好地理解你的内容。

只要在HTML标记中指定适当的链接类型，其他web服务(如社交媒体平台、辅助技术和语言翻译工具)就会受益。

如何设置链路类型

使用rel属性设置链接类型。下面是设置nofollowHTML元素的链接类型:

<一个rel =“nofollow”href = " http://amzn。给我买一台Macbook Pro

配置多种链路类型

可以设置多个链路类型。只需使用空格分隔链接类型。如果链接到的网页的链接类型为nofollow而且noreferrer，你会这样做:

<一个rel = " nofollow noreferrer "href = " http://amzn。给我买一台Macbook Pro

超链接的链接类型

在本指南中，我们将只讨论超链接的链接类型．有12种链路类型可以在超链接上设置。下面是一个可能的链接类型的表，以及每个链接类型应该指向什么。

链接类型	链接……
备用	查看网页的另一种方式。
作者	关于网页作者(或网页部分)的更多信息。
书签	永久链接。
帮助	帮助用户处理网页特定部分的内容。
许可证	网页内主要内容的版权许可。
nofollow	一个你不认可的网页。或者你链接的网页主要是为了盈利。
noreferrer	一个网页，不应该被告知点击来自你的网页。
预取	用户可能需要的资源。浏览器应该在用户请求资源之前获取并缓存资源。
搜索	网页的搜索界面。
标签	网页的关键字或类别。
下一个	下一页一系列网页中的下一页
上一页	一系列网页中的前一页。

让我们更详细地介绍每种链接类型。我还将向您展示每种链接类型的用例。

备用链路类型

的备用链接类型指向浏览网页的其他方式。

链接到其他文件格式

你可能有另一种格式的网页。就像PDF一样。或者你有一个适合打印的页面版本。

使用备用链接类型告诉浏览器:嘿，这是同样的内容，只是格式不同。使用类型属性在这个实例中也很有帮助。在下面的代码块中，我们声明两个超链接都指向网页的另一种表示形式。第一个链接指向PDF版本的网页。

第二个链接指向包含PDF的可下载ZIP文件。

<！——内容为PDF格式——><一个rel = "替代"type = "应用程序/ pdf "href = " this-page.pdf " > < / > PDF版本<！——下载网页——><一个rel = "替代"type = "应用程序/ zip "href="this-page.zip" download>下载此网页 .zip

链接到语言翻译

您可以使用备用当引用当前页面的语言翻译时，请使用链接类型。对于更详细的含义，可以使用hreflang属性定义在引用的网页中使用的语言。

<！——阅读西班牙语内容——><一个rel = "替代"hreflang =“西文”href=" Spanish -version.html">阅读本页西班牙语<！——阅读他加禄语的内容——><一个rel = "替代"hreflang = " tl "href=" Tagalog -version.html">用他加禄语阅读本页

作者链接类型

的作者链接类型通知浏览器链接指向作者的信息。

链接到整个网页的作者

  
我的网页
 
这个网页是我创建的。< / p > <rel = "作者"href="my-author-bio.html">关于我   . href="my-author-bio.html">关于我  

链接到文章的作者

很多时候，一个网页只有一部分是由作者完成的。在这种情况下，作者链接类型应指编写父类内容的作者文章元素。在新闻网站中，网页的主要内容是由记者撰写的。但是网页上的其他内容可能是别人写的。

例如，网页上的评论是由文章的读者发表的。这种情况可以这样标记:

  
<！—此部分由其他人撰写—>
一个很棒的嘉宾帖子
 
这篇文章是由其他人写的。< / p > <rel = "作者"href=" Someone - Else .html">关于Someone Else 
 .html<！——评论区——> 
Comments
 
 rel = "作者"href="comment .html">A Commenter 
此评论由A Commenter所写。
 
  

书签链接类型

的书签链接类型告诉浏览器超链接进入永久链接。这种链接类型在博客和新闻网站的主页上很有用。下面我们摘录了两篇链接到永久链接的博客文章。

<！——博客文章#1——>
 
A博文
 
这篇博文的简短描述。< / p > <rel =“书签”href="blog-post.html">读这个 
<！——博客文章#2——>
 
另一篇博文
 
这是对另一篇博文的描述。< / p > <rel =“书签”href="another-blog-post.html">读这个 

help链接类型

的帮助链接类型指向提供有用信息的内容。当使用帮助链接类型，引用的内容应该是上下文特定的。换句话说，链接应该指向关于包含超链接的父HTML元素的特定帮助信息。下面是一个使用帮助注释网页表单上的链接类型。

在这种情况下，帮助链接类型指的是提供有关父节点的有用信息的网页形式元素(即<形式id = "评论形式" >HTML元素)。

 Your Comment:   See ourrel = "帮助"href="comments.html">注释帮助页面，如果你在使用这个web表单时有问题。
> < /形式

license链路类型

的许可证链接类型可用于链接到网页主要内容的许可条款。此链接类型应在<大>标记，以便您可以定义web页面的哪些部分由许可证覆盖。许可证将只应用于父目录的内容主要元素。

下面的标记表示三幅图像。然而，其中只有一个是根据创作共用公共领域奉献(CC0)授权的。

免费使用这张照片!< / h1 ><大><！——这张照片属于公共领域——> 
rel = "许可证"href = " https://creativecommons.org/publicdomain/zero/1.0/ " > CC0 < / > < / p >< /主要>看看这些其他照片:
<！——这两张照片没有授权——>< img src = "我的照片- 1. jpg”/ > < img src = "我的照片- 2. jpg " / > < /一边>

链接类型

nofollow就是指定你页面上的链接是你不认可的东西，或者它在页面上是因为你把它放在那里得到了奖励。

用户生成的链接

一个地方使用nofollow链接类型为用户生成的链接。wiki条目中的链接，博客文章的评论，或者像StackOverflow这样的问答网站中的答案都是这种链接类型的候选。这些链接是别人放在网页上的。

作为网站所有者，你不能总是支持或认可你的用户在你的网站上分享的链接。在这种情况下，nofollow链接类型告诉搜索引擎网站所有者可能没有审查该链接和/或网站所有者没有认可该链接。

Comments
 
 
 Jane Spammer的评论
 
我很喜欢你关于"Angular Boosttrap预处理器"的博文。请看rel =“nofollow”href="http://loseweight.now.ru">减肥药丸。< / p > < / >的文章

支付链接

的另一个用法nofollow链接类型为付费链接。这些通常是广告。如果网站所有者在网页上放置了一个链接，主要是因为与该链接页面的商业/盈利关系，那么将该链接定义为nofollow才是正确的做法。

<一个rel =“nofollow”href = " http://paid.example。 . co">付费链接

noreferrer链路类型

根据设计，noreferrer链接类型用于超链接，当点击时，不会告诉目标网页用户来自你的网页。我不确定现在有多少浏览器真正实现了这种链接类型的规范。

<一个rel = " noreferrer "href="http://faceup.com">不跟踪此链接 . href="http://faceup.com">

当你点击带有noreferrer链接类型，浏览器不应该包含推荐人HTTP报头，站点所有者可以使用它来跟踪用户的来源。

预取链路类型

的预取当指向用户可能需要的外部资源时，应该使用链接类型。它告诉浏览器在用户点击链接之前就获取并缓存它。例如，您可能有一个图片库。

当用户单击图像时，您将显示该图像的放大版本。为了获得更快的体验，您可以指示浏览器缓存图像的大版本，以便在用户需要它时它就可以准备好了。

<一个rel = "预取”href="large.jpg" title="放大图片"> < / >

搜索链接类型

的搜索链接类型指向网页的搜索界面。这个搜索界面可以是一个页面内搜索表单，也可以是另一个可以搜索当前页面(以及相关页面)的网页。这里有一个链接到网页搜索表单的例子。

<！——链接到页面内搜索表单——><一个rel = "搜索"href="#search">搜索本页…<！——搜索表单——> 输入你的搜索条件  

tag链路类型

的标签链接类型可以用来指向与网页内容匹配的类别或关键字。例如，您正在阅读的这份指南被归类为HTML类别。为了让浏览器知道，我可以这样做:

本指南在rel = "标签"HTML href = " //www.psicolabor.com/category/html " > < / >类别。< / p >

现在，当搜索引擎抓取这个页面并寻找类似的文章时，它会知道要点击HTML分类页面。

next和prev链路类型

的下一个链接类型指向一系列网页中的下一个网页。的上一页链接类型转到本系列的前一页。假设我们有一个四部分的系列文章。

现在是本系列的第二篇文章。在文章的末尾，我们有一个指向本系列其他成员的所有链接的列表。我们可以将其标记为:

这是一个四部分的系列文章
 
 
rel = "上一页"第1部分st.html href = " 1 " > < / > < /李><！——我们到了——>
Part 2(本页)
 
rel =“下一个”第3部分3 rd.html href = " " > < / > < /李> <李> < a href = " 4 th.html " >第4部分< / > < /李> < / ol >

其他需要知道的事情

要记住的一件小事是链接类型关键字不区分大小写。这一点并不重要，只是因为HTML标记的通用约定是全小写。但是，嘿，这是您的标记，所以您应该做任何对您有用的事情。

所以，在下面的例子中，所有的超链接都是有效的:

<！——全小写——><一个rel = "nofollow" href = " http://amzn。给我买一台Macbook Pro<！——全大写——><一个rel = "NOFOLLOW" href = " http://amzn。给我买一台Macbook Pro<！——camelCase——><一个rel = "noFollow" href = " http://amzn。给我买一台Macbook Pro

此外，还有其他两种链接类型这里没有提到的:图标而且样式表．他们不能用于超链接。你也可以使用<一个href="http://microformats.org/wiki/existing-rel-values">微格式链接类型．

这些链接类型并不是W3C标准的正式组成部分，但是搜索引擎和浏览器支持它们。本指南是基于HTML5 W3C推荐标准<一个href="http://www.w3.org/TR/html5/links.html">链接类型．

相关内容

• 设计完美的超链接
• CSS链接伪类
• 如何在你的网站中发现和删除坏链接
• 微格式终极指南:参考和示例

雅各Gube是Six Revisions的创始人。他是前端开发人员。与他联系<一个href="https://twitter.com/webfx">推特而且<一个href="https://www.facebook.com/webfxinc/" target="_blank" rel="noopener noreferrer">脸谱网．