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 與前端來說是必須了解的知識點之一。

延伸閱讀