HTML 链接标签详解（附全部属性与取值）

HTML <link> 标签有助于界定网站上各资源之间的关系。

本文将探讨什么是 HTML 链接标签、如何使用它们，以及把它们添加到网站或网页时应避免的常见错误。

什么是 HTML 链接标签？

HTML <link> 标签是一种 HTML 标签（一段代码），用于在当前文档与其外部资源（文件或其他资产）之间建立连接。

HTML 链接标签应放在 HTML 文档的 <head> 部分，如下所示：

目前支持 HTML 链接标签的浏览器包括：

• Chrome
• Edge
• Safari
• Opera
• Firefox

不支持 HTML 链接标签的浏览器可能无法正确渲染它们，甚至完全忽略该标签，什么也不显示。

HTML 链接标签的 7 种用途

下面看几个 HTML 中链接标签的常见示例。

1. 链接外部样式表

外部样式表是包含层叠样式表（CSS）代码的文件，这些代码定义网页的样式和布局，比如背景颜色。

要让样式表生效，必须把它链接到想添加样式的页面。否则浏览器不会知道它的存在，也无法按预期方式显示。

下面展示如何使用 HTML 链接标签链接到样式表：

2. 显示网站图标（Favicon）

网站图标（favicon）是显示在浏览器标签页或书签中的一个小图标。

如下所示：

按下面示例使用 HTML 链接标签，就能在各种浏览器中显示网站图标：

3. 设置规范 URL

站点中存在重复内容时，规范 URL用于指明网页的主要版本，并告诉搜索引擎在自然（非付费）搜索结果中应优先收录和排名哪个页面。

要指定规范页面，可以这样使用 HTML 链接标签：

4. 设置页面语言

hreflang 属性用于指定文档的语言以及（可选的）目标地区。有不同语言的内容时，这会很有用。

原因何在？

因为借助 hreflang 属性，搜索引擎可为不同国家的用户展示最相关的搜索结果。

例如，在美国用 Google 搜索“semrush blog”，会看到这样的结果：

而身在西班牙时，会看到这样的结果：

可以像下面这样使用 HTML 链接标签为不同国家和语言定义页面（该示例包含西班牙语和法语的备用版本）：

5. 预加载特定资源

预加载会指示浏览器在页面开始加载的那一刻（或之后不久）请求资源并存入缓存，从而改善网站的性能、速度和用户体验。

常见的预加载请求针对字体。可以像下面这样用 HTML 链接标签设置字体的预加载：

可以逐个页面地设置需要预加载的资源。

6. 连接你的 RSS 订阅源

简易信息聚合（RSS）订阅源是网站分享内容和更新的一种方式。

用户可以通过如下 RSS 阅读器订阅不同的网站：

这样他们就能看到各网站何时发布了新内容。

使用 HTML 链接标签链接到 RSS 订阅源，用户就可以订阅内容。

7. 链接外部字体

HTML 链接标签可以链接到外部字体（比如 Google Fonts 中的字体）并在站点上使用。

使用的代码如下：

其他 HTML 链接标签属性与取值

链接标签属性提供额外信息，位于开始标签和结束标签之间。

取值则指明赋给某个属性的具体内容。

属性和取值共同引导 HTML 链接标签完成指定任务，也就是告诉标签该如何表现。

以下是当前的 HTML 链接标签属性及其常见取值：

实现链接标签时要避免的常见错误

以下是添加 <link> 标签时经常出现的错误。避开这些错误，可以确保链接标签正常工作，并且浏览器能够读取它们。

把标签添加到页面的 body 部分

HTML 链接标签应当放在 HTML 文档的 <head> 部分。

原因何在？

因为根据语义化 HTML，HTML 文档的 <head> 部分才是元数据应该放置的地方（元数据是描述数据的信息，而 HTML 链接标签被视为元数据元素）。

如果把 HTML 链接标签添加到 <body> 中，它可能无法按预期工作。

例如，把样式表的 HTML 链接标签放在 <body> 部分，可能导致该网页样式加载延迟。

可以通过查看页面源代码检查链接标签的位置。在浏览器中右键点击页面，然后选择“查看网页源代码”。

然后按 Ctrl+F（Mac 上为 Command+F）并搜索 <head>。

（也可以搜索 </head> 来找到 <head> 部分的结束位置。）

通读代码，确保 HTML 中的链接标签位于 <head> 和 </head> 之间。若不在其中，要么把它们移过去，要么请网站开发人员帮忙。

使用了错误的属性或取值

每个属性只能使用与其关联的特定取值，而且有些属性只能与其他属性配合使用。

例如，若在链接标签中使用了 “rel=preload”，就必须同时使用 as 属性。

参考上文列出的 HTML 链接标签属性及取值，确保使用的是正确的那些。

使用了已废弃的属性

已废弃（即过时）的属性可能无法生效，因为现代浏览器通常会逐步停止对它们的支持。

万维网联盟（W3C）等组织可能出于各种原因决定废弃某些属性，比如技术变革。

例如，rev 属性过去用于表示当前文档与所链接文档之间的反向关系：

这个 HTML 链接标签表示所链接的文档（related-document.html）由当前文档创建。

但由于 rev 属性只能表示反向关系，W3C 已将其废弃，现在建议改用更灵活的 rel 属性。

下面展示如何使用当前的 rel 属性改写上面的例子：

HTML 链接标签的其他已废弃属性包括：

• charset：定义所链接资源的编码
• methods：提供关于可对所链接对象执行的功能或操作的信息
• target：指明所链接文档应加载到哪个窗口或框架中

检查代码中是否有这些属性，如有需要，把它们替换为更合适的方式。

检查你网站上的 HTML 链接标签问题

使用 Semrush 的 Site Audit 这样的诊断工具跟踪网站上的技术问题，包括由 HTML 链接标签错误引发的问题。

操作如下。

打开 Site Audit，输入域名 URL，然后点击“开始审核”。

这会打开一个菜单，可在其中配置所有设置。

接着点击“开始站点审核”。

审核完成后，会收到一份详细报告，说明需要改进的地方。

点击“问题”标签页。

这会显示网站上的技术问题列表。

例如，存在重复内容的页面——这些页面若能使用带有 canonical 属性的 HTML 链接标签，将受益匪浅。

Site Audit 还能发现 hreflang 错误、规范标签错误以及加载缓慢的页面（加载缓慢的页面可能受益于在 HTML 链接标签中使用 fetchpriority 属性）。

可以点击每个问题旁边的“原因及修复方法”，更好地理解和解决该问题。

清理这些问题有助于在网站上打造出色的用户体验，并优化页面，让搜索引擎能够轻松抓取、索引并在搜索结果中排名。

免费试用 Site Audit。