什么是 Href 链接？值得掌握的 4 个最佳实践

什么是 Href 链接？

Href 链接（也叫“a href 链接”）是 <a> 标签中的一个 HTML 属性，用来创建可点击的超链接，并指定链接指向的 URL。

Href 链接连接网页、引导用户，也帮助搜索引擎发现在搜索结果中可能出现的网页内容。

下面是一个 href 链接的示例，它生成可点击的文字“Semrush”。

Href 值可以包含：

• 相对 URL（例如 href="/about"）：相对 URL 是部分 URL，通常对内链（指向你网站其他页面的链接）很有用。日后更改域名时也有帮助，因为无需更新内链。
• 绝对 URL（例如 href="https://example.com"）：绝对 URL 是完整的网址，在链接到外部网站时必须使用
• 锚点链接（例如 href="https://example.com/#section"）：锚点链接会跳转到页面上带有 CSS ID（添加到 HTML 元素上的唯一标识符）的特定区块。它们帮助用户跳到相关内容。就像指向目录中所示小标题的链接一样。
• Mailto 链接（例如 href="mailto:[email protected]"）：Mailto 链接会在用户默认的邮件客户端中打开一封新的邮件草稿。这样他们就能直接联系你，而无需复制粘贴你的邮箱地址。
• Tel 链接（例如 href="tel:+1234567890"）：Tel 链接会在支持的设备上拨打一个电话号码，很适合想一键发起通话的移动端用户

内容管理系统（如 WordPress）带有工具，让你无需手动编写 href 链接。

但了解这些细节仍有帮助，以便需要手动调整时使用。

<a> 标签常见的属性-值组合

<a> 标签包含若干属性（控制链接行为的指令）和值（指令的具体设置），二者共同决定链接对用户和搜索引擎如何起作用。

target=“_blank”

使用 target=“_blank” 会让链接在新的浏览器标签页中打开，在链接到外部网站时有助于让用户在你的网站上停留更久。

对外部链接，和链接到较大的文件或文档时，建议使用这个属性。这样读者即使点击跳转，也不会丢失你的页面。

万维网联盟（World Wide Web Consortium，一个制定准则以帮助人们构建无障碍网络的组织）建议在这类会在新标签页中打开的链接旁边添加提示文字。比如加上“（在新标签页中打开）”。

这样一来，难以感知视觉内容的用户点击链接时就不会感到意外。

示例：

rel=“nofollow”

rel=“nofollow” 属性告诉搜索引擎不要追踪该链接，也不要向被链接的页面传递任何 SEO 价值（链接权重）。

业内人士对此表示：

“我们会把它用在用户生成的评论区或赞助内容上，以确保我们符合 Google 的准则。”

此外，在链接到不受信任的内容、且你不想为其背书时，使用“rel=”nofollow”也是不错的选择。比如当你需要引用一个可疑来源时。

示例：

你也可以用 rel=”UGC” 和 rel=”sponsored” 来链接到用户生成的内容，比如评论或赞助内容。这些属性对搜索引擎来说更具体、也更透明。

rel=“noopener”

rel="noopener" 这一属性-值组合是一项安全功能，防止在新标签页中打开的页面与原始页面交互，帮助用户规避潜在安全威胁。

例如，假设你在一个用户已登录的安全页面上，不小心链接到了一个恶意网站。而你没有使用 rel="noopener"。

这会带来一些风险：

“如果没有 rel=”noopener”，恶意网站可以在用户与之交互时更改你页面的 URL，或运行脚本。”

而且用户返回时，原来的标签页可能不再安全。

由于这类攻击只在链接于新标签页中打开时发生，rel="noopener" 应始终与 target="_blank" 搭配使用。

示例：

rel=“noreferrer”

使用 rel="noreferrer" 可以阻止目标网站看到流量来自哪个 URL，以维护用户和网站的隐私。

例如，假设一位用户正在阅读一篇有关某种特定焦虑症的文章，该病症名称就出现在 URL 中，然后他点击了文中指向某位治疗师网站的链接。如果没有加上 rel="noreferrer"，那个外部的治疗师网站就能看到引荐这位访客的完整 URL。

那个 URL 可能不含个人细节。但它仍可能泄露私密的健康问题，给用户留下潜在的隐私隐患。

如果你不想让某些网站（比如竞争对手）知道你链接到了它们，也可以使用 rel=”noreferrer”。

示例：

Href 链接的 4 个最佳实践

遵循以下 href 链接的最佳实践，确保你的超链接正常工作。

1. 使用正确的语法

正确的语法能确保 href 链接按预期工作，让搜索引擎和用户找到所需信息。

以下是正确构建 href 链接的主要步骤：

1. 用“<a”开始 a href 链接
2. 在开始标签内添加格式正确的属性（例如 href="https://example.com"）
3. 在每个锚标签属性之前留一个空格（例如 <a href=”https://example.com” target="_blank">，而不是 <a href="https://example.com"target="_blank">）
4. 用 > 结束开始标签（例如 <a href="https://example.com">）
5. 添加你的锚内容，形成链接中可点击的部分（例如 <a href="https://example.com">访问我们的网站</a>）
6. 用 </a> 结束标签

2. 使用描述性的锚文本

锚文本是可点击的文字，它帮助搜索引擎和用户了解被链接页面讲的是什么。

与其使用“点击这里”这类泛泛的文字，不如使用描述性的文字，帮助用户（和搜索引擎）了解被链接页面的相关背景。

3. 限制页面上链接的数量

包含数量得当的链接能帮人们找到需要的资源，并提供更好的用户体验。

链接过多则会让页面显得像垃圾，还可能损害排名。

下面是 Google 给出的一个不自然链接的示例：

4. 定期审核链接

定期检查 href 链接，能确保网站上的每条路径都通向有用的地方。

及时捕捉小错误，可以避免把访客（和爬虫）引向死胡同的失效链接。

使用 Semrush 的免费 SEO 检查器快速做一次通用的检查，发现任何明显的问题。

若要在你整个网站上全面检测链接问题，请使用 Semrush 的 Site Audit 工具。

设置好之后，找到“Internal Linking（内链）”报告，然后点击“查看详情（View details）”。

随后查看“Internal Link Issues（内链问题）”，了解是否存在：

• 失效链接（指向不存在目标的链接）
• 页面链接过多（单个页面上超过 3,000 条链接）
• 带有 nofollow 属性的内链
• 锚文本缺失或缺乏描述性的链接

还有诸多其他问题。

点击任一问题旁边的“了解更多（Learn more）”或“为什么和如何修复（Why and how to fix it）”，可查看更多背景信息。

或者点击“# 个问题（# issues）”按钮，查看受影响的 URL。

今天就试试 Site Audit。