从基础到进阶:HTML链接代码全解析

HTML 链接(也称为超链接)是 Internet 的一些最重要的功能。谷歌实际上依靠它们来查找、抓取、索引和排名页面。

链接在用户体验和您网站的 SEO 方面都有很大的力量。

因此,如果您想创建有助于(而不是阻碍)网站性能的链接,了解如何正确编码 HTML 链接是关键。

HTML 链接的组件

您使用 anchor 元素创建 HTML 链接:

然后,使用属性和值来更改链接的运行方式。

以下是可点击链接的完整 HTML 代码:

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

让我们来分析一下:

  • 锚标签 (<a>) 是每个链接的基础。它告诉浏览器 “这是一个可点击的链接”。
  • href 属性定义链接的目的地。这可以是 Web 地址、文件路径,甚至是当前页面上的特定部分。
  • target 属性控制链接的打开方式。默认设置是在同一窗口中打开,但 _blank 会使其在新选项卡中打开。
  • rel 属性定义链接页面和链接页面之间的关系。这对 SEO 尤其重要(更多内容见 最佳实践 部分)。
  • 锚文本是用户看到和单击的内容。在上面的示例中,它是 “Visit Example.com for more info”。
  • 结束标记 (<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 友好,您应该包含描述性 alt 文本。喜欢这个:

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

替代文本有两个关键目的:

  1. 屏幕阅读器将大声朗读该图像,以便视障用户理解图像的内容
  2. 它可以帮助搜索引擎理解您的图像内容(这可能有助于您在图像搜索结果中排名)

只有当图像确实将用户带到有用的地方时,您才应该使您的图像可点击。喜欢图像的源网站。

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

例如,在 Backlinko 上实现一些图像链接的方法(使用 CSS 类):

但这是 The Spruce 上的图片链接:

在这种情况下,图像链接仍包含在 <a> 标记中。但还有其他元素(如 <div>)和类(如 img-placeholder)。

你如何实现图片链接在很大程度上取决于你的网站设置。如果您使用 WordPress,您的主题和插件可能会决定您如何对图像链接进行编码。

电子邮件链接

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

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

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

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

您也可以使用其他参数来增强电子邮件链接。喜欢这个:

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

这会在主题行中预先填充“Product Inquiry”,并在电子邮件正文中添加初始文本,显示“我有兴趣了解更多信息”。

电话链接

对于电话号码,请使用 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>

与电子邮件链接一样,在电话和 SMS 链接的锚文本中要清楚地说明用户点击链接时会发生什么。

用于内部页面导航的跳转链接(锚链接)

跳转链接(也称为锚点链接)可帮助用户导航到同一页面中的特定部分。它们对于长格式内容特别有用。

如果你的网站使用目录(就像这个网站一样),它以这种方式使用跳转链接工作。

基本结构需要两部分:

  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 链接将 标签的功能与按钮的外观相结合。

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

按钮式链接和常规链接之间的主要区别在于,您通常会使用 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 使用 download 属性:

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

对于浏览器通常显示而不是下载的文件(如 PDF),download 属性确保它们被保存而不是打开。

默认情况下,许多浏览器将下载其他文件类型,而无需单独的 download 属性。对于 Excel 和 Word 文档等内容,通常也是如此。

SEO 的其他重要 HTML 链接代码

对于您网站的 SEO,您应该注意一些 HTML 链接属性。这些不会创建超链接,但它们确实位于页面代码的 <head> 部分的 HTML 链接元素中。

此元素类似于 <link>而不是 <a>

规范标签

规范标签(技术上是属性)告诉你的网页版本是 “主要 ”版本,当你在多个URL中有相似或重复的内容时。它们有助于防止可能损害您的 SEO 的重复内容问题。

但是最好在所有页面上实施它们。

您可以在 HTML 的<head>部分中使用<link>元素来实现规范标签:

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

这有效地告诉搜索引擎:“此页面是指定 URL 处页面的副本或变体。请将所有排名信号归因于该 URL。

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

Hreflang

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

与规范标签一样,你可以使用 HTML 的 <head> 部分中的链接元素来实现它:

<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>

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

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

hreflang 属性使用语言代码(如英语的“en”)和可选的区域代码(如美国的“us”)。

Hreflang 标签仅适用于具有不同语言版本和国际影响力的网站。它们可能很难正确处理,因此有关更多详细信息,请查看我们的 hreflang 标签专用指南。

HTML 链接代码最佳实践

遵循这些最佳实践将确保您的链接有效、安全且可供所有用户访问。它也将有助于改善您的 SEO。

语法

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

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

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

  • 始终包含开始 <a> 和结束 </a> 标签
  • 添加 href 属性以及值(您的 URL)
  • 将属性值括在引号中
  • 不要在 attribute、equals sign 和 value 之间使用空格

锚文本

Anchor text 是链接的可点击文本。它是用户实际看到和点击的词。它在用户体验和 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 (Accessible Rich Internet Applications) 标签通过为屏幕阅读器和其他辅助技术提供额外的上下文来增强辅助功能。

当可见文本的描述性不够时,aria-label 属性为链接提供可访问的名称,或者为图标而不是文本上的链接提供可访问的名称:

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

在此示例中,屏幕阅读器会读出“Go to settings”(转到设置),但网站只会直观地显示设置图标。

Target

target 属性决定了用户点击链接时的打开方式。

默认链接行为会在同一选项卡中打开链接(即,您从当前页面转到链接的页面)。

默认值为 “_self”,但您无需指定。

如果要在新选项卡中打开链接,请使用 “_blank” 目标值:

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

出于安全原因,您过去需要将 rel=“noopener” 添加到目标值为空的链接中。但您不再需要这样做。(下面有更多关于 noopener 的信息。

在以下情况下,在新选项卡中打开链接特别有用:

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

对于这是否最适合可访问性,意见不一。一些人认为这会带来颠覆性的用户体验,尤其是在移动设备上以及使用辅助技术(如屏幕阅读器)的用户。

对于作为自然导航流一部分的内部链接,通常最好坚持默认行为(在同一选项卡中打开)。

rel=

rel 属性定义了当前页面和你链接到的页面之间的关系。这是影响安全性和 SEO 的重要属性。

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

赞助商链接

当另一个品牌付费在您的网站上提供链接时,您将使用 sponsored rel 值。

例如,假设您有一个指向您推广的产品的联盟链接。

这是一种付费或赞助链接的形式,因为您可能会从用户通过该链接进行的购买中赚钱。Google 建议您对付费链接展示位置使用 “sponsored” 属性:

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

以下是流行的产品比较网站 WireCutter 上的一个示例:

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

UGC 链接

在评论和论坛帖子中的链接上使用 user-generated content rel 值。这些链接不一定由您控制,这告诉 Google 您不认可它们。

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

Nofollow 链接

当其他 rel 值都不适用并且您不希望 Google 将您的网站与您要链接到的网站相关联时,请使用 nofollow。或者当你不希望 Google 抓取你链接到的页面时。

<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 包括完整的 Web 地址,从协议开始:

<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 链接的代码。只需右键单击要检查的链接,然后选择“检查”即可打开开发人员控制台:

这对于快速验证 attributes 和 rel 值非常方便。

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

这就是像 Semrush 的 Site Audit(网站诊断)这样的工具的用武之地。

只需插入您的域名,让审计运行,然后前往 “问题” 选项卡。然后键入 “link” 以突出显示您网站的 HTML 链接的任何问题。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值