HTML 链接代码：如何在你的网站上创建超链接

HTML 链接的组成部分

您可以使用锚元素创建 HTML 链接： 。

然后，您可以使用属性和值来改变链接的功能。

可点击链接的完整 HTML 代码如下：

<a href="https://example.com" target="_blank" rel="noopener">Visit Example.com for more info.</a>

让我们来分析一下：

• 锚标签 (<a>) 是每个链接的基础。它告诉浏览器“这是一个可点击的链接”。
• href 属性定义链接指向的位置。它可以是网址、文件路径，甚至是当前页面上的特定部分。
• target 属性控制链接的打开方式。默认在原窗口打开，但 _blank 属性会使其在新标签页中打开。
• rel 属性定义了链接页面与被链接页面之间的关系。它对于 SEO 尤为重要（更多信息请参阅最佳实践部分 ）。
• 锚文本是用户看到并点击的内容。在上面的例子中，它是“访问 Example.com 获取更多信息”。
• 结束标签（<a>） 表示链接结束的位置。

我将在本指南的后面部分详细讨论这些元素的作用。现在，我们先来看看一些最常见的添加 HTML 链接的方法。

如何使用 HTML 代码添加链接

使用 HTML 代码添加链接的基本方法是将要链接的 URL 放在链接锚标记内。就像上面的例子一样。

但以下是在 HTML 中添加链接的一些最常见用例：

文本链接

文本链接是最常见的超链接类型。您可以使用它们链接到您网站上的其他页面（ 内部链接 ）或其他网站（外部链接）。

 

标准实现如下：

<a href="https://example.com">Visit our website</a>

这会创建一个基本的文本链接，用户可以单击该链接导航到指定的 URL。

您可以根据具体情况，使用附加属性来增强文本链接。例如，以下是如何将链接设置为在新标签页中打开：

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example.com</a>

如果它是一个附属链接，您可以使用如下内容：

<a href="https://example.com" target="_blank" rel="noopener noreferrer sponsored">Visit Example.com</a>

（稍后会详细介绍这些属性。）

使图像可点击的图像链接

图像可以作为强大、引人注目的链接，通常比纯文本更能吸引注意力。

HTML 图像链接的基本结构包含<img>锚标记内的标记：

<a href="https://example.com">
  <img src="logo.png" alt="Company Logo">
</a>

这会将整个图像转换为可点击的链接，以导航到指定的 URL。

“ img src ”属性指定图像文件的位置。“ alt ”属性指定图像的替代文本。

 

为了确保图片链接易于访问且有利于 SEO，你应该添加描述性的替代文本。像这样：

<a href="/product/camera"> 
  <img src="camera.jpg" alt="Canon EOS R6 Mark II Camera">
</a>

替代文本有两个重要目的：

• 屏幕阅读器将大声朗读，以便视障用户理解图像的内容
• 它可以帮助搜索引擎了解图像的内容（这可能有助于您在图像搜索结果中排名）

只有当图片确实能将用户引导至有用的地方时，才应该将其设置为可点击。例如，前往图片的来源网站。

值得注意的是，对于图像链接和下面的一些其他类型，您可以用不同的方式实现它们。

例如，以下是我们在 Backlinko 上实现一些图像链接的方法（使用 CSS 类）：

 

但这里有一个 The Spruce 上的图片链接：

 

在这种情况下，图像链接仍然包含在<a>标签中。但还有其他元素（如 <div>）和类（如 img-placeholder）。</div></a>

如何实现图片链接很大程度上取决于你的网站设置。如果你使用 WordPress，你的主题和插件可能会决定图片链接的编码方式。

延伸阅读： 图片 SEO：15 个基本优化技巧

电子邮件链接

电子邮件链接使用特殊协议来启动用户的默认电子邮件客户端。它们非常适合帮助用户更轻松地联系到您。

使用 mailto: 协议创建电子邮件链接：

<a href="mailto:contact@example.com">Email Us</a>

当用户单击此链接时，它会打开其默认电子邮件程序，其中收件人字段已填充。

 

您还可以使用附加参数来增强电子邮件链接。像这样：

<a href="mailto:sales@example.com?subject=Product%20Inquiry&body=I%27m%20interested%20in%20learning%20more">Email Sales Team</a>

这会预先填充主题行“产品咨询”，并在电子邮件正文中添加初始文本“我有兴趣了解更多信息”。

（请注意，您需要对空格和特殊字符进行编码，例如 %20 表示空格。）

专业提示： 使用描述性锚文本清晰地说明用户点击链接后会发生什么。这样，用户打开电子邮件客户端时就不会感到困惑。

电话链接

对于电话号码，请使用 tel: 协议：

<a href="tel:+15555555555">Call (555) 555-5555</a>

当用户在移动设备上点击此链接时，它会打开电话拨号器并显示可拨打的号码。

对于国际电话号码，请始终在国家代码后面加上加号：

<a href="tel:+442071234567">Call our London office: +44 20 7123 4567</a>

您还可以使用“sms”值打开短信：

<a href="sms:+442071234567">Send us a text</a>

与电子邮件链接一样，电话和短信链接的锚文本应明确说明用户点击链接时会发生什么。

用于内部页面导航的跳转链接（锚链接）

跳转链接（也称为锚链接）可帮助用户导航至同一页面内的特定部分。它们对于长篇内容尤其有用。

如果您的网站使用目录（就像本网站一样），它就会以这种方式使用跳转链接。

 

基本结构需要两部分：

1. 具有 id 属性的元素作为目标
2. 使用井号 (#) 符号指向该 ID 的链接

例如，在我们的关键字映射文章（一步一步的列表）中，我们使用跳转链接，以便用户更轻松地导航。

首先，我们在标题中添加“id”标签，如下所示：

<h3 id="add-keywords">3. Add the Keywords to Your Map</h3>

您在页面上看不到此 id 属性，但它存在于网站的代码中：

 

然后，在列表的第二步中，有些用户可能不需要遵循，我们包含一个链接，可以跳到第三步（其 id 为“add-keywords”）。

HTML 链接代码如下所示：

<a href="#add-keywords">step 3</a>

页面上的链接如下所示：

 

当用户点击链接时，浏览器会立即滚动到匹配 id 的元素（在本例中为步骤 3）。它还会更新地址栏中的 URL：

 

跳转链接非常适合：

• 文章顶部的目录
• 章节末尾的“返回顶部”链接
• 用户希望跳转到特定问题的常见问题解答页面
• 包含多个信息部分的产品页面

行动号召按钮链接

按钮上的 HTML 链接将<a>标签的功能与按钮的外观结合在一起。</a>

它们非常适合需要脱颖而出并吸引点击的行动号召。

按钮式链接和常规链接之间的主要区别在于，您通常会使用 CSS 编写 HTML 按钮链接：

<a href="yourdomain.com/signup" class="button-link">Get Started</a>

这个 HTML 看起来像一个标准的文本链接，但使用 CSS，你可以对其进行转换：

.button-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: #0066cc;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
}
.button-link:hover {
  background-color: #004080;
}

这些样式创建一个矩形按钮：

• 清晰的边界（背景颜色和填充）
• 圆角（border-radius）
• 悬停时的视觉反馈（背景颜色变化）

对于移动用户，请确保您的按钮式链接足够大，可以轻松点击：

@media (max-width: 768px) {
  .button-link {
    padding: 12px 24px;
    width: 100%; 
    margin-bottom: 10px;
  }
}

值得注意的是，很多情况下，你不需要自己编写按钮链接。例如，如果你使用像 WordPress 这样的 CMS，你可能会使用某种按钮模板。

或者，您的开发人员将使用 CSS 类来创建按钮，而不是使用 HTML 链接代码。

 

下载链接

下载链接可让您的用户轻松地将文件从您的网站保存到他们的设备。

下载链接的基本 HTML 使用下载属性：

<a href="report.pdf" download>Download PDF Report</a>

对于浏览器通常显示而不是下载的文件（如 PDF），下载属性可确保保存而不是打开它们。

许多浏览器会默认下载其他类型的文件，无需单独设置下载属性。Excel 和 Word 文档等文件通常都是如此。

注意： 有时您的服务器配置会决定文件默认打开还是下载。如果您不确定，请咨询您的开发人员。

SEO 其他重要的 HTML 链接代码

为了网站的 SEO，您应该注意一些 HTML 链接属性。这些属性不会创建超链接，但它们会位于<head>页面代码的一部分。

这个元素看起来像<link>而不是 <a>。</a>

规范标签

当多个网址包含相似或重复的内容时， 规范标签 （技术上称为属性）会告诉搜索引擎哪个版本的页面是“主要”版本。它们有助于防止可能损害 SEO 的重复内容问题。

但在所有页面上实施它们是一种很好的做法。

 

您可以使用<link>元素 <head>HTML 部分：

<head>
<link rel="canonical" href="https://example.com/original-page">
</head>

这实际上告诉搜索引擎：“此页面是指定 URL 页面的副本或变体。请将所有排名信号都归因于该 URL。”

当您有用于跟踪、过滤或排序的 URL 参数时，规范化会有所帮助（例如，？source=email 或 ？sort=price）。

 

赫雷夫兰

hreflang HTML 链接属性可帮助搜索引擎了解您网页的语言和区域定位。这有助于他们了解在搜索结果中向用户显示哪个版本的网页。

与规范标签一样，您可以使用 <head>HTML 部分：

<head>
  <link rel="alternate" hreflang="en-us" href="https://example.com/en-us/page">
  <link rel="alternate" hreflang="es" href="https://example.com/es/page">
  <link rel="alternate" hreflang="fr" href="https://example.com/fr/page">
  <link rel="alternate" hreflang="x-default" href="https://example.com/">
</head>

这些链接元素告诉搜索引擎：

• 此页面提供英语（美国）、西班牙语和法语版本
• 默认版本（适用于使用其他语言的用户）位于根 URL

hreflang 属性使用语言代码（如“en”表示英语）和可选地区代码（如“us”表示美国）。

 

Hreflang 标签仅对拥有不同语言版本且具有国际影响力的网站而言才是一个问题。正确使用它们可能比较棘手，因此，如需了解更多详细信息，请参阅我们专门的 hreflang 标签指南。

HTML 链接代码最佳实践

遵循这些最佳实践将确保您的链接有效、安全且所有用户均可访问。它还能帮助您提升 SEO 。

句法

以下是 HTML 链接的正确语法：

<a href="url">Anchor Text</a>

以下是一些需要记住的语法规则：

• 始终包含开始<a>和结束</a>标签
• 添加 href 属性及其值（您的 URL）
• 将属性值括在引号中
• 不要在属性、等号和值之间使用空格

锚文本

锚文本是链接中可点击的文本。它是用户实际看到并点击的文字。它在用户体验和 SEO 方面都起着至关重要的作用。

好的锚文本可以清楚地告诉用户点击链接后会发生什么。它还提供了

以下是不良锚文本的示例：

<a href="https://example.com/pricing">Click here</a>

以下是一个好的描述性锚文本的示例：

<a href="https://example.com/pricing">View our pricing plans</a>

第二个示例为用户（和搜索引擎）提供了有关链接将带他们去往何处的清晰信息。

编写锚文本时，请遵循以下准则：

• 使其具有描述性并与目的地相关
• 保持简洁（通常 2-5 个字）
• 避免使用“点击此处”或“阅读更多”等通用短语
• 自然地使用关键词，但不要塞入关键词

标题属性

您还可以为链接添加“title”属性。但如果您使用描述性锚文本，通常不需要此属性。

事实上，如果只是重复锚文本，反而会降低可读性和可访问性。屏幕阅读器通常不会读出它，用户将鼠标悬停在链接上时会看到一个工具提示，而这个提示可能会遮挡屏幕上的其他内容。而且，它根本不会在移动设备上显示。

所以，除非你能在链接中添加有意义的重要信息，否则不要使用 title 属性。只需让你的锚文本具有描述性即可。

Aria 标签

ARIA（可访问的富互联网应用程序）标签通过为屏幕阅读器和其他辅助技术提供额外的上下文来增强可访问性。

当可见文本描述性不够时，或者对于图标而非文本上的链接，aria-label 属性为链接提供了一个可访问的名称：

<a href="https://yourdomain.com/settings" aria-label="Go to settings">
  <svg><!-- settings icon --></svg>
</a>

在这个例子中，屏幕阅读器会宣布“转到设置”，但网站只会直观地显示设置图标。

目标

目标属性决定了用户点击链接时如何打开链接。

默认链接行为在同一个选项卡中打开链接（即从当前页面转到链接页面）。

默认值是“_self”，但您不需要指定。

如果您想在新选项卡中打开链接，请使用“_blank”目标值：

<a href="https://example.com" target="_blank">Example</a>

出于安全考虑，过去您需要为目标值为空的链接添加 rel=“noopener”。但现在您无需再这样做了。（更多关于 noopener 的内容见下文。）

在以下情况下，在新标签页中打开链接特别有用：

• 链接到外部网站
• 提供用户在停留在您的页面上时可能想要查看的参考资料
• 链接到可能扰乱用户当前活动的下载或资源

关于这是否有利于无障碍访问，人们的看法不一。一些人认为这会破坏用户体验，尤其是在移动设备上以及使用辅助技术（如屏幕阅读器）的用户。

对于属于自然导航流的内部链接，通常最好坚持默认行为（在同一选项卡中打开）。

注意： 曾经有其他目标值（_parent 和 _top），但这些在 HTML5 中已被弃用。

关系 (rel=)

rel 属性定义了当前页面与链接页面之间的关系。它是一个影响安全性和 SEO 的重要属性。

默认行为是不添加任何 rel 值。以下是一些最常见的值：

赞助商链接

当另一个品牌付费在您的网站上建立链接时，您可以使用赞助 rel 值。

例如，假设您有一个指向您所推广产品的附属链接。

这是一种付费或赞助链接，因为您可能会从用户通过该链接进行的购买中获利。Google 建议您在付费链接位置使用“赞助”属性：

<a href="https://example.com" rel="sponsored">Paid link</a>

以下是热门产品比较网站 WireCutter 上的一个示例：

 

您还可以将此属性用于其他公司明确付费让您包含在您网站上的链接。

UGC 链接

在评论和论坛帖子中的链接上使用用户生成内容 rel 值。这些链接并非由您控制，这会告诉 Google 您不认可它们。

<a href="https://example.com" target="_blank" rel="ugc">External site you haven’t verified</a>

 

Nofollow 链接

如果其他 rel 值都不适用，并且您不希望 Google 将您的网站与您链接到的网站关联，或者您不希望 Google 抓取您链接到的页面，请使用 nofollow。

<a href="https://example.com" rel="nofollow">Link to a site you don’t endorse</a>

假设你不是网站上链接的创建者，所以你无法在链接上线前进行验证。也许你有一个写手团队，或者你正在接受客座博文 。

但你知道这些链接不是赞助链接，也不是用户原创内容。在这种情况下，你应该使用 nofollow。

那么“noopener”和“noreferrer”怎么样？

“ noopener ”rel 值告诉您的浏览器转到目标链接，但不让新位置访问带有该链接的页面。

如果您使用 target=“_blank”，那么现代浏览器基本上会将其视为添加了 noopener。但您也可以将其用于其他您不一定信任但未使用 _blank 目标值的链接。就像那些您也添加了 nofollow 的链接一样。

使用“ noreferrer ”值会在您链接到的网站的分析中隐藏通过该链接发送的任何流量的来源。

您可以通过用空格分隔来组合多个 rel 值：

<a href="https://example.com" rel="noopener noreferrer sponsored">Affiliate link</a>

绝对 URL 与相对 URL

创建 HTML 链接时，您需要决定在 href 属性中使用绝对 URL 还是相对 URL。每种 URL 都有特定的用例和优势。

绝对 URL 包括完整的网址，以协议开头：

<a href="https://example.com/products/item1">Product page</a>

相对 URL 较短，并且引用相对于当前页面的位置：

<a href="/products/item1">Product page</a>

一般来说，我建议您在大多数情况下使用绝对 URL。

如果您需要处理大量相对 URL，使用相对 URL 可以加快生产速度。此外，如果您移动页面或域名，但保留相同的 URL 结构，您的内部 URL 应该可以继续正常工作，而无需将它们全部更改为新域名。

但老实说，除非您在设置网站时计划进行重大网站迁移 （不太可能），否则您不太可能预见到并从这个相对较小的优势中受益。

当使用与您正在开发的网站位于不同域的暂存网站时，您可能需要使用相对 URL。

在这种情况下，它可以避免您或您的开发人员在上线您的网站时必须重写所有内部链接。

如何检查网站的 HTML 链接

您可以使用检查工具手动检查浏览器中 HTML 链接的代码。只需右键单击要检查的链接，然后选择“ 检查 ”即可打开开发者控制台：

 

这对于快速验证您的属性和相关值非常方便。

但是如果您想大规模检查您的链接怎么办？

这就是 Semrush 的站点审计之类的工具发挥作用的地方。

只需插入您的域名，运行审核，然后前往“ 问题 ”选项卡。然后输入“链接”即可突出显示您网站 HTML 链接的任何问题。

 

检查并解决任何问题以改善您网站的 SEO 和用户体验。