HTML中有一个名为“rel”的属性，是“relationship”这个单词的缩写，用于指明两个文档之间的关系，设置对象和链接目的间的关系。rel属性常用于<a>、<area>、<form>或<link>元素上。
这些rel属性并不影响页面的显示，但是对于搜索引擎来说尤为重要，搜索引擎可以利用该属性获得更多有关链接的信息。但是rel属性拥有非常多不常见的语义化值，因此开发者在书写代码时经常忽略rel标签。
但是这些rel属性对于网站的SEO很重要，所以利用本文作为记录，以供日后查询使用。
“HTML5”一栏中：“支持”指支持HTML5；“不支持”指HTML5中已废除，仅支持HTML4。
| 值 | 描述 | HTML5 | |
| alternate | <a><link> | 文档的可选版本（例如打印页、翻译页或镜像） | 支持 |
| stylesheet | <a><link> | 文档的外部样式表 | 支持 |
| shortcut icon | <link> | 指定标题栏,地址栏,收藏栏小图标 | 支持 |
| archives | <a><area><link> | 链接到文档集或历史数据 | 支持 |
| author | <a><area><link> | 链接到文档的作者 | 支持 |
| canonical | <link> | 权威,典范 | 支持 |
| home | 连接到站点的主页 | 支持 | |
| first | <a><area><link> | 链接到集合中的首个文档 | 支持 |
| next | <a><area><link><form> | 链接到集合中的下一个文档 | 支持 |
| prev | <a><area><link><form> | 链接到集合中的前一个文档 | 支持 |
| last | <a><area><link> | 链接到集合中最后的文档 | 支持 |
| up | <a><area><link> | 提供指向一个文档的链接。该文档提供当前文档的上下文关系 | 支持 |
| search | <a><area><link><form> | 链接到文档的搜索工具 | 支持 |
| sidebar | 支持(已删除) | ||
| index | <a><area><link> | 文档索引 | 支持(已删除) |
| head | 链接到集合中的顶级文档 | 支持 | |
| help | <a><area><link><form> | 帮助文档 | 支持 |
| bookmark | <a><area> | 用作书签的永久 URL | 支持 |
| external | <a><area><link> | 链接到外部文档 | 支持 |
| nofollow | <a><area><form> | Google 使用 “nofollow”，用于指定 Google 搜索引擎不要跟踪链接 | 支持 |
| noreferrer | <a><area><form> | 规定当用户跟随该超链接时，浏览器不应发送 HTTP referer 头 | 支持 |
| licence | <a><area><link><form> | 链接到文档的版权信息 | 支持 |
| tag | <a><area> | 当前文档标签（关键词） | 支持 |
| friend | 友情链接 | 支持 | |
| manifest | <link> | 指定清单文件 | 支持 |
| dns-prefetch | <link> | DNS预读取 | 支持 |
| import | <link> | HTML Imports | 支持 |
| modulepreload | <link> | 预加载原生模块脚本 | 支持 |
| opener | <a><area><form> | 支持 | |
| pingback | <link> | 支持 | |
| preconnect | <link> | 支持 | |
| prefetch | <link> | 支持 | |
| preload | <link> | 支持 | |
| shortlink | <link> | 当前页面对应的短链接 | 支持 |
| appendix | 链接到文档的附录页 | 不支持 | |
| start | 链接到当前文档的第一页 | 不支持 | |
| contents | 链接到当前文档的内容目录 | 不支持 | |
| glossary | 链接到当前文档术语表 | 不支持 | |
| copyright | 链接到当前文档的版权或隐私页面 | 不支持 | |
| chapter | 从当前文档链接到一个章节 | 不支持 | |
| section | 链接到文档列表中的一个小节 | 不支持 | |
| subsection | 链接到当前文档列表中的子小节。（一个小节可拥有多个子小节。） | 不支持 | |
| toc | 链接到集合的目录 | 不支持 | |
| parent | 链接到源上面的文档 | 不支持 | |
| child | 链接到源下面的文档 | 不支持 |
alternate
文档的可选版本（例如打印页、翻译页或镜像）
<a rel="alternate" href="xxx"> xxx </a>
<link rel="alternate" href="http://m.abc.com/">此属性告诉搜索引擎此链接是当前页面的另一版本，比如指示与PC网站相对应的移动网站。
stylesheet
<link rel="stylesheet" href="css/style.css">只有指定rel="stylesheet"时，浏览器才能知道我们引入的文件是一个样式文件。这时浏览器才会读取文件中的代码进行绘制。
shortcut icon
<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="animated_favicon.gif" type="image/gif" />这个属性大家应该是很熟悉了，浏览器会将href指向的图标文件作为标签页、收藏夹等图标。
在以前，IE会将“shortcut icon”作为一个单独的名称，而大多数遵守标准的浏览器仅识别“icon”，而将“shortcut”忽略，因此“shortcut icon”属性让所有浏览器都可以理解此代码。只有当希望为新浏览器提供另一种备用图像（例如动画GIF）时，才有必要添加第二行。
但是现在各大浏览器都已经支持icon属性，“shortcut”基本没有书写的必要了。
建议在文档的根目录放置“favicon.ico”，以便一些不处理link元件的浏览器找到。另外当您的站点上没有指向icon的链接，浏览器也会自动查找根目录下的“favicon.ico”。
图像通常可以使用任何被浏览器支持的图像格式。
使用适当的分辨率和色深：
- ICO：包括多种分辨率（最常使用的是16×16和32×32，Mac OS X有时使用64×64和128×128）以及位深（比特每像素）（多数使用4、8、24 bpp，即16、256和1600万色）。
- GIF: 使用16×16，256色。
- PNG: 使用16×16，256色或24位。
archives
<a rel="archives" href="xxx">2019年五月</a>archives语义是归档。此rel属性值可以用来定义指向归档语义的超链接。例如，博客的每月文章索引页的<a>链接就可以使用这个值。
author
<a rel="author" href="xxx">张xx</a>链接指向作者介绍页。
href属性支持直接以mailto:开头，可以用于发送邮件，然后通过rel=”author”增强这个链接的语义。但是在网页中不推荐这么做，因为容易被爬虫把邮箱爬过去。
canonical
<link rel="canonical" href="html-a-rel/" />canonical是规范的意思，只能作用在<link>元素上，此值的作用与搜索引擎有关，可以为类似网页或重复网页指定规范网页。
拿Google搜索举例，如果您的某一个网页可通过多个网址访问，或者您的不同网页包含类似内容（例如，某个网页既有移动版，又有桌面版），那么 Google 会将这些网页视为同一个网页的重复版本。Google 会选择一个网址作为规范版本并抓取该网址，而将所有其他网址视为重复网址并降低对这些网址的抓取频率。
如果您未明确告知 Google 哪个网址是规范网址，Google 就会替您做出选择，或会将这两个版本视为同等重要，这可能会导致出现一些不当的行为。
那如何让Google知道哪个网址是最规范最优先的呢？其中一个方法就是rel=canonical标记。
home
<link rel="home" href="xxx" />
<a rel="home" href="xxx">主页</a>Rel-Home是几种MicroFormat之一。通过添加rel="home"到超链接，页面指示该超链接的目的地是当前页面所在站点的主页。
链接的页面应该存在。建议使用绝对URI。
first、prev、next、last
这四个属性一起讲是因为它们是类似的。
first：表示指向一个序列页面资源的第一个资源。
prev：表示指向序列页面的上一个页面。
next：表示指向序列页面的下一个页面。
last：表示指向序列页面的最后一个页面。
up
表示当前页面是层次结构的一部分，并且超链接指向该结构的更高级别资源。
up链接类型的数量表示当前页面和链接资源之间的深度差。
help
<a rel="help" href="xxx"><i>xxx</i></a>如果该图标是一个从语义上就不难看出，rel-help属性表明当前超链接的页面是用来对上下文进行帮助说明，常见的帮助图标是问号图标。
- 如果元素是
<a>或<area>，则表示超链接指向一个资源，该资源对元素的父元素及其子元素提供了进一步的帮助。 - 如果元素是
<link>，则表示超链接指向一个资源，该资源将对整个页面提供进一步的帮助。
bookmark
<a href="archive/entry.html" rel="bookmark">A Document Entry</a>bookmark的语义是书签。通常书签标记为“链接到扩展文档中一个关键切入点”。该属性还包含了“永久链接”的概念，通常用在指向文章内容的永久链接上，例如文章列表页每一个文章的链接就可以设置rel=bookmark。
external
<a rel="external" href="xxx">xxx</a>
<a rel="external nofollow" href="xxx">xxx</a>external是外部的意思。当链接指向的是外部资源或外部链接的时候，可以使用该属性，表示该链接不是网站的一部分。可以和nofollow值一起使用。
rel-external可告知搜索引擎蜘蛛该链接是外部的。但是，使用此方法不会在新窗口中打开链接，target="_ blank"或target="_new"可以这样做。
nofollow
<a rel="nofollow" href="xxx">xxx</a>
<a rel="external nofollow" href="xxx">xxx</a>rel=nofollow不允许搜索引擎蜘蛛跟随链接，相当于告诉搜索引擎“不要跟踪此链接”或“不要跟踪此特定链接”。
但是，不同搜索引擎抓取策略不一样，至少Google是不抓取的。
noreferrer
当导航到其他页面的时候，可以阻止浏览器向跳转页面发送页面地址以及其他值。
有一些JavaScript功能允许新选项卡控制原窗口。如果您链接到受恶意代码影响的外部网站，则该网站可以使用window.opener（JavaScript属性）更改原始页面（您的网站）以窃取信息并传播恶意代码。
添加rel=”noopener”会阻止新标签使用此JavaScript功能。
人话：当我们点击一个跳转链接时，新页面可以用js代码修改原来窗口的页面。那我们原先的网页就可能被注入恶意代码。
注意和下面这个代码的区分，rel=”noreferrer”属性可防止将引荐来源信息传递给新选项卡。
<meta name="referrer" content="no-referrer">licence
<a rel="license" href="xxx">BSD license</a>license语义是许可，用于指示内容许可证，你也可以理解为版权说明。
通过添加rel="license"到超链接，页面指示该超链接的目的地是当前页面的许可证。
copyright这个值虽然和licence意思相同，也能识别，但是在HTML5中copyright已经废除，建议不要使用。
tag
<a rel="tag" href="xxx">HTML</a>指示该超链接的目的地是当前页面的作者指定的“标签”（或关键字/主题）。例如wordpress文章中的标签链接都应该设置该属性值。
链接页面应该存在，并且定义标签的应是链接页面而不是链接文本。URL的最后一个路径部分是标记的文本，因此<a rel="tag" href="https://sameen.art/tag/tech">fish</a>会显示标签“tech”而不是“fish”。
manifest
<link rel="manifest" href="xxx">指定清单文件，用做Web应用程序清单部署。.webmanifest是约定俗成的扩展名，返回文件内容类型需要是：Content-Type: application/manifest+json，也支持.json扩展名的清单文件。
随着WPA(Web渐进式应用)越来越被广泛采用，rel="manifest"也变得越发重要。
dns-prefetch
<link rel="dns-prefetch" href="xxx">只能作用在<link>元素上，作用是DNS预读取。允许浏览器在用户单击链接之前进行DNS查找和协议握手，可以提高页面资源加载速度。
如果此时页面中有链接地址的域名也是“xxx”，那么当用户点击这个链接的时候，因为之前浏览器已经DNS预读取了，新打开的页面就少了DNS向上查找这一步，页面呈现速度就会快一些，虽然快的并不是很多，但能快一点是快一点。
import
<link rel="import" href="">Web Components开发重要组成部分之一
modulepreload
<link rel="modulepreload" href="xxx">
...
<script type="module" src="xxx">预加载原生模块脚本
opener
pingback
<link rel="pingback" href="xxx/xmlrpc.php" />Pingbacks（也称为引用）是页面或帖子的自动评论的一种形式，是在另一个WordPress博客链接到该页面或帖子时创建的。
当您发布新的博客文章时，WordPress会尝试”ping”文章中链接到的所有网站。即您的WordPress网站正在通知您已链接到其他网站。
当您收到pingpack时，则意味着其他人已链接到您的帖子或页面之一。
pingback可以让Web作者追踪什么人链接至他的文章。
pingback有专门的调用与协议规范，有兴趣可以参见pingback 规范。
preconnect
<link rel="preconnect" href="xxx">实验阶段属性值。作用是告知浏览器提前连接链接地址的对应站点，不过只是连接，并不会公开任何私人信息或者下载任何内容。好处是打开链接内容的时候可以更快的获取（节约了 DNS 查询、重定向以及指向处理用户请求的最终服务器的若干往返）。
但是preconnect千万不能滥用。<link rel="preconnect">会占用宝贵的 CPU 时间，如果用户没有在 10 秒内使用该连接，资源浪费的情况就会变得更严重，因为当浏览器关闭连接时，所有已完成的连接都将遭到浪费。
prefetch
<link rel="prefetch" href="xxx">prefetch表示预获取，通常是一些静态资源。主流浏览器中仅Safari不支持。
prefetch 最适合抢占用户下一步可能进行的操作并为其做好准备，例如搜索结果列表中首个产品的详情页面或搜索分页内容的下一页。
preload
preload也表示预加载。告诉浏览器提前加载这些资源。Safari浏览器支持此属性。
请注意，与上面的preconnect和prefetch不一样，rel=”preload”是强制浏览器执行的指令，不只是可选提示。因此，使用preload时一定要保证内容会被使用，如果提取的资源3秒内没有被当前页面使用，Chrome开发者工具的控制台会触发警告！
shortlink
<link rel='shortlink' href='xxx' />当前页面对应的短链接，由于微博字数限制，微信或QQ中地址呈现等这样的因素，短链接要更方便。
鲁公网安备37021102000826号
评论
0