警告:您的浏览器不支持或您禁止了脚本。

UUUI

HTML标签的rel属性详解

HTML/CSS 0 603

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浏览器支持此属性。

请注意,与上面的preconnectprefetch不一样,rel=”preload”强制浏览器执行的指令,不只是可选提示。因此,使用preload时一定要保证内容会被使用,如果提取的资源3秒内没有被当前页面使用,Chrome开发者工具的控制台会触发警告!

shortlink

<link rel='shortlink' href='xxx' />

当前页面对应的短链接,由于微博字数限制,微信或QQ中地址呈现等这样的因素,短链接要更方便。

声明: 本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、发布本站内容到各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
分享到:

暂无评论

发表评论

你的电子邮件地址不会被公开。

还没有任何评论,你来说两句吧。
×