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

UUUI

HTML标签的rel属性详解

HTML/CSS 0 1,184
相关话题:   

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

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

评论

0

您可以访客身份评论,你的电子邮件地址不会被公开。

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