用户体验 (UX) 已成为重要的 Google 排名信号，因此确保您的网站达到标准比以往任何时候都更加重要。良好的导航有助于提升用户体验，因此最好始终关注您网站上的超链接。
超链接允许用户在页面之间“旅行”。当鼠标光标悬停在链接上时从箭头变为手，您就会知道这些链接处于活动状态。您可以将 HTML 链接附加到各种页面元素，包括文本、图像等。
在本指南中，我们将探讨超链接（称为“HTML 链接”或“a href 链接”）的工作原理、为什么掌握超链接很重要，以及如何使用站点审核工具查找和修复错误的超链接.
为什么 HTML 链接很重要？
用户有目的地搜索互联网；他们正在寻找答案、产品、指导等。由于您的 SEO 努力，Google 已将您放在他们的视线中。
捕获访问者后，您需要轻松引导他们浏览您的网站，以便他们的用户体验愉快。您的 HTML 链接对于将您的用户从您网站上的一个页面引导到另一个页面非常重要。
良好的 HTML 链接会增加用户的会话时间，并可能导致每次会话访问更多页面——这两个指标对网络分析很重要。
HTML 标签是什么样的？
锚标签（或“a href”或“link”标签）包括开始标签、任何标签属性、锚文本或对象以及结束标签。例如：
<a href="url">Link text or object</a>.
什么是 HREF 属性链接？
href属性链接（简称“ ^ Hypertext REFerence”）表示页面的搜索引擎之间的关系。
href 是锚标签的一个属性，包含两个组件：
- URL（实际链接）和
- 用户将在页面上看到的可点击文本或对象（称为“锚文本”）
例如：
<a href="https://www.semrush.com/">Visit hrefgo!</a>
点击后 HTML 链接在哪里打开？
当用户单击您的 HTML 链接时，链接页面可能会在同一浏览器窗口或选项卡中打开。除非您使用代码指定链接的显示方式，否则这是默认设置。
但是，如果您有下载内容或希望页面在不同的窗口或选项卡中打开，则可以使用“_blank”等目标属性。
最常见的目标属性值是：
-
**_self：**页面/文档在同一窗口中打开
<a href="https://www.semrush.com/"target=_self">Visit Semrush!</a> -
_blank = 在新窗口中打开文档/页面
<a href="https://www.semrush.com/"target=_blank">Visit Semrush!</a>
相对与绝对 URL
您的网址结构有助于 Google 如何有效地抓取您的网站。您可能会使用两种常见的 URL 结构类型之一：相对和绝对。
相对链接使用 URL 的一部分，主要用于内部链接，其中链接位于同一站点上，因此属于同一根域的一部分。它们看起来像这样：
<a href="blog/hrefland-attribute-101/">hreflang attribute 101</a>.
但是，绝对链接使用完整的网站链接，包括网站的域名：
<a href=" https://www.semrush.com/">Visit Semrush!</a>.
何时使用相对 URL
当您想要链接到您网站上的某个页面时，您可以使用相对 URL。您将在链接中使用 URL 的“slug”。
使用相对 URL 的一些优点包括：
- 快速转移到新域（您无需更新每个 URL）
- 更快的页面加载时间（谷歌排名因素）
何时使用绝对 URL
如果您将用户发送到外部页面（即远离您的网站），您将使用绝对 URL。
使用绝对 URL 的一些好处包括：
- 该链接始终指向正确的 URL（Google 将始终知道该去哪里）
- Google 网站抓取工具可以更轻松地扫描这些 URL（对于编制索引很重要）
HTML 链接如何实时显示？
当您将鼠标悬停在锚文本、图像、按钮等上时，您会在网页上找到 HTML 链接，并且指针会变成一只手。
默认情况下，链接显示为：
- 下划线和蓝色（如果您还没有访问过链接）
- 下划线和紫色（您已访问该链接）
- 下划线和红色（活动链接）
这是带有超链接的网站副本示例。蓝色突出显示的单词包含超链接：
请注意，如果您网站链接的颜色与网站的背景颜色太相似，您可以更改链接的颜色以使其脱颖而出。
具有品牌颜色的企业可能会知道颜色的十六进制代码。使用十六进制代码修改您的 HTML 标记（锚标记），如下所示：
<a href="https://www.semrush.com/" style="color:#SS000;">Here's the modified link!</a>
如果您没有十六进制颜色代码，您可以选择大约 140 种命名颜色。您可以添加颜色本身而不是十六进制代码，例如“蓝色”或“红色”：
<a href="https://www.semrush.com/" style="color:red;">Red Link</a>
超链接的类型
有几种方法可以使用超链接在您的网站上创建简单的导航体验。将链接视为一种资源与另一种资源之间的连接，无论是网页、文档、表单等。
让我们来看看您会在网站上找到的最常见的超链接类型：
- **图像链接：**您可以将图像超链接到另一个资源。例如，您可以将产品图像超链接到其产品页面。您可能会使用与此类似的链接结构。
<a href="/default.html"> <img src="https://cdn.hrefgo.com/blog/images/semrush.jpg" alt="semrush logo" style="width:100px;height:100px;"> </a>
- **电子邮件和电话链接：**当您希望用户直接与您联系时，您可以使用这些链接。在移动设备上，这些类型的链接将用户引导至直接操作：拨打您的电话号码或起草电子邮件给您。 对于电子邮件地址，您在 href 属性中添加 mailto: ，如下所示：
<a href="mailto:[email protected]">Semrush email</a>
对于电话号码，您在 href 属性中添加 tel: ：
<a href="tel:+61 1800 934 242">+61 1800 934 242</a>
- 按钮链接： 超链接按钮是一种流行的网页设计功能，可用于向您的网站添加号召性用语 (CTA)。CTA 告诉您的用户该做什么：联系我们、下载小册子、阅读更多内容等。 向按钮添加链接的一种方法是将按钮元素包装在链接中：
<a href='https://www.semrush.com/'><button>Linking to semrush.com</button></a>
Hreflang 属性
Hreflang 属性 表示您网站上不同语言的页面与搜索引擎之间的关系。如果您的网站面向多国受众，则需要添加 hreflang 属性。
这里有一些例子：
<link rel="alternate" hreflang="en-us" href="http://www.example.com/usa/" /> <link rel="alternate" hreflang="en-ca" href="http://www.example.com/ca/" />
总结
良好的超链接可以更轻松地浏览和抓取您的网站。无论您的链接结构如何，重要的是尽快发现和更新损坏的链接。
