SEO Knowledge Related to HTML Anchor Tag <a>

关于 HTML 锚点标签 <a> 相关的 SEO 知识

@ SEO

前言

搜索引擎依赖 HTML 文件中的 <a> 标签了解页面之间的关联并进而评分，理解 <a> 能够更好地处理与标识页面与页面之间的关系。作为前端工程师近期在翻新博客时特别研究较少注意到的 SEO 观点。

什么是 <a> 标签？

a 是锚点（anchor）的意思，一个链接指向另一网页资源，像是：网页、图片、视频、邮箱、地址。

<a href="https://www.webdong.dev/">WebDong</a>
<a href="https://example.com/image.jpg">查看图片</a>
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">观看视频</a>
<a href="mailto:hello@example.com">写信给我们</a>
<a href="https://www.google.com/maps?q=Taipei+101">查看台北101位置</a>
<a href="tel:+886912345678">拨打电话</a>
<a href="/file.pdf" download>下载文件</a>

链接称呼

  • 内部链接（Internal link）： 链接指向同个网域的资源
  • 外部链接（External link）： 链接指向外部网域的资源
  • 反向链接（Backlink） ：外部网域链接指向内部网域的资源
  • 锚点链接（Anchor link,Jump link）：链接指向同页的资源

为什么区分内与外部链接的概念是因为搜索引擎算法依靠网页之间的关联进行评分，越是多高品质的反向链接说明网页评分越高越值得推荐。

<a> 标签属性

  • href：代表 Hypertext Reference，指向资源的位置。
  • rel：代表 Relationship，标示与该项资源的关系，可以使用空格分隔多个值。
    • nofollow：提示搜索引擎不要追踪目标网址，避免网站排名权重受该链接影响。
    • noopener：阻挡新窗口操作原本的网站，一项安全措施提升网站安全性。
    • noreferrer：禁止链接资源将当前页面标识为其访客来源，同时包含 noopener 的效果。
  • target：如何显示链接。
    • _self：当前浏览上下文。（默认）
    • _blank：新浏览上下文，通常是浏览器新页面或窗口。
    • _parent：当前浏览上下文的父级。如果没有父级，则与 _self 行为相同。 _top：最上层的浏览上下文。具体来说，这意味着当前上下文的祖先中的「最高」上下文。如果没有祖先，则与 _self 行为相同。

总结

了解 <a> 是网页资源相互连接、搜索引擎排序判断的关键，甚至与资安也有一定的关联，对于 SEO 与前端来说是必须了解的知识点之一。

延伸阅读