您的網站破洞了嗎？用 rel=”noopener” 補強外部連結安全性與 SEO 排名！

在打造現代網站時，外部連結幾乎是不可或缺的一環。然而，許多人在設定連結開新視窗（target=”_blank”）時，往往忽略了 rel=”noopener” 的重要性。這不只是 SEO 的細節，更與網站安全性高度相關。

本文將帶您全面了解為何必須使用 rel=”noopener”，它與其他屬性的差別在哪，以及該如何正確實作，讓您的網站不只漂亮，更安全、有效率。

什麼是 rel=”noopener”？target=”_blank” 連結為何必須加上它？

rel=”noopener” 是一個連結屬性，當搭配 target=”_blank” 使用時，可防止新開頁面透過 window.opener 回傳 JavaScript 操作原本網站頁面，進而避免釣魚攻擊、隱性跳轉等資安風險。

若未加入 rel=”noopener”，外部頁面可能控制原始視窗，進行內容置換或潛藏惡意腳本，這在資安領域中稱為“Tabnabbing”。

當您開啟新視窗連結時，務必加上 rel=”noopener”，以確保網站與用戶瀏覽過程的安全性。

雖然 rel=”noopener” 並非直接的 SEO 排名因子，但若缺乏設定，可能導致瀏覽器資安問題，甚至導致 Google 判斷您的網站安全性不足。

此外，在多語系與國際站點中，若不使用適當的 rel 屬性組合，可能造成權重傳遞錯誤或重複內容被索引。

從效能角度來看，rel=”noopener” 也能微幅提升頁面載入速度，因為新開頁面不再保有對原頁的 JavaScript 操作控制權，瀏覽器可更有效率地釋放資源，提升使用者體驗。

Google 雖未將 rel=”noopener” 視為排名依據，但其背後的安全效益與效能提升，會間接影響網站在搜尋引擎的信任與體驗評分。

rel=”noreferrer” 除了具有 noopener 的效果外，還會阻斷 referrer（來源網址）的傳遞，適用於特別需要保護隱私或避免轉址參照的場景。

但若您希望維持 GA 分析、來源追蹤等功能，就應優先使用 rel=”noopener”，而非完全阻斷來源資訊的 noreferrer。

兩者差異在於是否傳遞 referrer 資訊，rel=”noopener” 更適合一般外部連結設定，功能安全又兼顧數據追蹤。

在 WordPress 5.0 以上版本，只要使用 Gutenberg 區塊編輯器插入外部連結，系統就會自動加上 rel=”noopener noreferrer”。若您使用經典編輯器或 HTML 原始碼，請手動加入：

若使用其他 CMS 或自行架設網站，也建議統一於模板或元件中加入 rel 屬性，避免遺漏或被主題覆蓋。

正確設定 rel=”noopener”，不僅強化使用者安全體驗，也能減少網站被列為不安全頁面的風險。

如果您無法確定網站連結是否正確設定 rel=”noopener”，或擔心外部連結導致 SEO 權重錯置與資安漏洞，現在就是補強的最佳時機！

【點子數位科技】，專精於企業網站的響應式網頁設計（RWD）與搜尋引擎技術優化，自 2012 年起服務超過百家品牌網站，擁有專業前端設計師、程式工程師與專案企劃人員，能根據您網站的實際架構與需求，客製化提供解決方案。

從網站設計、結構規劃到 SEO 技術防護，我們都能一步到位。讓我們從細節出發，協助您重建搜尋排名與品牌信任力！

最專業的網頁設計公司－點子數位，根據現在使用者的使用習慣，和行動裝置的普及，點子數位更精進於技術的提升，專研新型態的網頁技術，結合品牌特點來增強瀏覽者的黏著度。點子擁有完整的網頁製作團隊、程式設計師、前端工程師等，一定可以提供最獨一無二的網頁設計！趕快加入官方LINE@聯絡點子數位吧！