rel=noopener、noreferrer 和 nofollow 實際上做了什麼

簡短版

連結上的 rel 屬性描述目前頁面與被連結頁面之間的關係。這聽起來很抽象，但在日常網頁工作中，有三個值會不斷出現：

<a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">
  External resource
</a>

這三個 token 常常被一起貼上，彷彿它們在做同一件事。其實不是。

• noopener 是瀏覽器安全性控制。
• noreferrer 是隱私與分析控制。
• nofollow 是搜尋引擎訊號。

它們可以組合使用，但你應該知道每一個為什麼存在。把三者加到每一個對外連結上不一定錯，但通常只是偷懶。

rel=noopener 可防止反向 tabnabbing

rel="noopener" 會告訴瀏覽器，不要讓新開啟的頁面透過 window.opener 存取原本的頁面。

這主要在你使用 target="_blank" 以新分頁或新視窗開啟連結時很重要：

<a href="https://external.example" target="_blank" rel="noopener">
  Open external site
</a>

如果沒有 noopener，目的地頁面可能可以執行像這樣的 JavaScript：

window.opener.location = 'https://phishing.example';

這種攻擊通常稱為反向 tabnabbing。使用者點擊合法連結、到達另一個網站，而原本的分頁則被悄悄導向假的登入頁或其他惡意目的地。

現代瀏覽器在這方面已有改善。在目前的瀏覽器行為中，target="_blank" 通常會被視為已存在 rel="noopener"。這很好，但不代表明確寫出該屬性沒有意義。明確的 noopener 仍然有用，因為：

• 它記錄了你的意圖；
• 它保護較舊或不常見的瀏覽環境；
• 它避免依賴每一個嵌入式 web view 都像現代桌面瀏覽器一樣運作；
• 它讓程式碼審查更容易。

對於會在新分頁開啟的外部連結，rel="noopener" 是合理的預設值。

noopener 會影響 SEO 嗎？

不會，至少不會以任何有意義的方式影響。noopener 是用於瀏覽器行為。它不會告訴搜尋引擎你是否背書某個頁面、連結權重是否應該傳遞，或該連結是否為付費連結。

如果你的 SEO 政策把 noopener 當成排名指令，那份政策需要修訂。

rel=noreferrer 會隱藏來源頁面

rel="noreferrer" 會告訴瀏覽器，當使用者跟隨連結時，不要送出 Referer HTTP header。

是的，這個 header 在歷史上拼錯成 Referer。屬性則拼作 noreferrer。

通常，當使用者從你的頁面點擊連結到另一個網站時，目的地可能會收到 referrer 值，顯示這次造訪來自何處。依你的網站 Referrer-Policy 而定，可能是完整 URL、只有 origin，或什麼都沒有。

例如，目的地可能會看到：

Referer: https://www.example.com/pricing?plan=enterprise

或只有：

Referer: https://www.example.com/

有了 rel="noreferrer"，瀏覽器就不應該為該次導覽送出這個 header。

<a href="https://external.example" rel="noreferrer">
  External site
</a>

實務上，noreferrer 在現代瀏覽器中也會像 noopener 一樣運作。如果你使用 noreferrer，通常不需要在同一個連結上再為安全性加入 noopener。許多團隊仍然兩者都寫，以提升清楚度：

<a href="https://external.example" target="_blank" rel="noopener noreferrer">
  External site
</a>

這樣可以。它是重複的，但可讀性很好。

何時適合使用 noreferrer

當目前頁面的 URL 不應暴露給目的地時，使用 noreferrer。

常見例子包括：

• 來自私人儀表板的連結；
• 來自未發布預覽環境的連結；
• 來自含有敏感查詢參數的 URL 的連結；
• 管理工具、審核佇列、CRM 畫面或客戶支援系統中的連結；
• 目的地不應知道確切來源頁面的連結。

最後一點不一定是關於保密。有時是關於資料最小化。如果目的地不需要知道來源 URL，就不要送出它。

這符合更廣泛的隱私意識網頁設計方向。瀏覽器、使用者與監管者都已朝向預設傳送較少環境資料的方向前進。如果你正在重新檢視這個領域，我們關於 2026 年 cookies 有哪些改變，以及該如何因應 的文章涵蓋了同一個整體轉變：更少隱形追蹤、更有意識的資料流。

分析上的取捨

noreferrer 可能會破壞你所連結網站的歸因。他們的分析工具可能會把該次造訪歸類為直接流量，而不是推薦流量。

這不是你的主要問題，但在合作夥伴關係、聯盟行銷關係、客戶旅程與內部跨網域生態系中，這可能很重要。如果你的行銷團隊期待合作夥伴網站看到來自你網域的推薦流量，全面使用 noreferrer 可能會造成混淆。

對許多一般的編輯型連結而言，較好的做法是設定全站的 Referrer-Policy header，而不是到處加上 noreferrer。例如：

Referrer-Policy: strict-origin-when-cross-origin

這個政策會在同源導覽時送出完整 URL，對安全的跨來源目的地只送出 origin，並在從 HTTPS 移動到 HTTP 時不送出 referrer。對許多網站來說，這是實用的預設值。

如果你需要檢查 production 中 header 的行為，原始 HTTP 檢查通常比從分析儀表板猜測更清楚。用於在 production 中除錯重新導向與 HTTP headers 的小工具組 中的工作流程，可以直接套用到 referrer-policy 除錯。

rel=nofollow 是給搜尋引擎用的，不是給瀏覽器

rel="nofollow" 會告訴搜尋引擎，你不想暗示自己背書被連結頁面。

<a href="https://external.example" rel="nofollow">
  User-submitted link
</a>

最初，nofollow 是為了對抗留言垃圾訊息而推出。想法很簡單：如果留言中的連結不傳遞排名信用，垃圾訊息發布者就較沒有動機淹沒部落格與論壇。

如今，Google 將 nofollow 視為提示，而不是絕對指令。這個差異很重要。它表示搜尋引擎在某些情境下仍可能將該連結用於發現或排名系統，但你已清楚表示該連結不應被視為一般的編輯背書。

何時使用 nofollow

當你要連結，但不想為目的地背書時，使用 nofollow。

合理的例子包括：

• 不受信任的使用者產生連結；
• 公開留言或個人檔案中的連結；
• 連到被作為不良行為範例提及的網站；
• 為參考而包含、但不代表背書的連結；
• 審核有限區域中的連結。

對於付費或贊助連結，請優先使用 rel="sponsored"。對於使用者產生內容，請優先使用 rel="ugc"。如有需要，你可以組合多個值：

<a href="https://example.com" rel="ugc nofollow">
  User profile link
</a>

如果你經營公開表單、留言、目錄或個人檔案頁，連結屬性只是濫用問題的一部分。垃圾訊息通常在提交流程更早的地方就開始了。我們另外拆解了為什麼你的聯絡表單是最大的垃圾訊息責任，同樣的教訓也適用於此：不要期待 nofollow 能彌補薄弱的審核。

nofollow 不會做什麼

nofollow 不會阻止使用者點擊連結。它不會阻止瀏覽器送出 referrer。它不會把目的地隱藏起來。它也不會保護 target="_blank"。

它也不保證某個 URL 永遠不會被爬取。如果搜尋引擎在其他地方找到該 URL，仍然可以爬取它。如果你需要防止索引，請在目的地頁面使用適當的 robots 控制，例如 noindex，而不是在別人的連結上使用 nofollow 屬性。

常見組合

在新分頁開啟的外部連結

<a href="https://external.example" target="_blank" rel="noopener">
  External resource
</a>

這是基準做法。它處理了開啟新瀏覽情境所產生的安全性問題。

如果你也不想送出 referrer 資料：

<a href="https://external.example" target="_blank" rel="noopener noreferrer">
  External resource
</a>

付費版位

<a href="https://sponsor.example" rel="sponsored">
  Sponsor site
</a>

如果它會在新分頁開啟，可以加上 noopener：

<a href="https://sponsor.example" target="_blank" rel="sponsored noopener">
  Sponsor site
</a>

不要用 nofollow 作為披露付費連結的模糊替代品。搜尋引擎現在有更具體的值可用：sponsored。

使用者產生的連結

<a href="https://user-submitted.example" rel="ugc nofollow">
  User-submitted site
</a>

這會告訴搜尋引擎，該連結是由使用者提供，不應被視為一般的編輯投票。

內部連結

大多數內部連結不需要這些值中的任何一個。

不要把 nofollow 當成例行的 sculpting 手法加到內部連結上。這通常造成的混淆多於好處。如果某個頁面不應被索引，請直接處理。如果某個頁面不應被爬取，請仔細考慮 robots 規則、驗證、canonicalization 與網站架構。

對於會在新分頁開啟的內部連結，noopener 仍然無害，也可能適用。但更好的問題是：這個內部連結為什麼需要新分頁？

給團隊的實用政策

簡單的內部風格規範可以避免大多數錯誤：

1. 對含有 target="_blank" 的連結加上 rel="noopener"，尤其是外部連結。
2. 只有在有意隱藏來源 URL 時，才加上 noreferrer。
3. 只有在你不背書目的地時，才加上 nofollow。
4. 付費連結使用 sponsored，使用者提交的連結使用 ugc。
5. 不要把連結屬性當成存取控制、審核或索引規則的替代品。

重點在於意圖。rel 中的每個 token 都應回答一個具體問題：

• 安全性：新頁面是否應與 opener 隔離？
• 隱私：目的地是否應接收 referrer 資訊？
• SEO：我們是否將這個連結作為編輯性參考來背書？

如果團隊中沒有人能回答這些問題，該屬性很可能只是貨物崇拜式 HTML。

如何測試正在發生的事

對於 noopener，開啟連結並檢查目的地是否能存取 window.opener。在受控測試頁面中，當 noopener 生效時，window.opener 應該是 null。

對於 noreferrer，請在目的地端檢查網路請求，或在測試環境中使用 request logger。Browser DevTools 可以顯示傳出的 request headers，但伺服器端 logs 通常更可靠。

對於 nofollow，測試不會那麼即時，因為它是搜尋引擎的解讀，而不是瀏覽器行為。你最好的檢查方式是檢視原始碼：確認渲染後的 HTML 包含預期的 rel 值。如果你的 frontend framework 會重寫連結，請檢查最終 DOM，而不只是 template。

總結

這些屬性很小，但它們位在安全性、隱私與 SEO 的交會處。把它們視為可互換會養成壞習慣。

對新分頁連結大方使用 noopener。在 referrer 隱私很重要時，有意識地使用 noreferrer。當你要對背書做出面向搜尋的聲明時，使用 nofollow。而當連結是付費或使用者產生時，使用更具體的現代值：sponsored 與 ugc。

這對大多數網站來說已經足夠。目標不是裝飾每一個連結。目標是讓每一個連結精確告訴瀏覽器與搜尋引擎它們需要知道的事。