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中地址呈现等这样的因素,短链接要更方便。
评论
0