不知道大家有沒有這個印象？
寫網頁加連結的時候，似乎有這樣的一個說法：「Google 比較喜歡連結裡面有加上 rel="nofollow noopener noreferrer" 語法的網頁」，又好像模模糊糊的有聽過另一個說法：「有開新視窗就要加上 rel="noopener" 比較安全？」
似懂非懂的，所以有時候會記得加，有時候完全拋到腦後 :)。不過這些 rel 的屬性到底是什麼意思？加了跟沒加真的有差嗎？不會只是面子工程，追求一種語法潔癖的榮譽感吧？
今天我們就來聊聊這個用在超連結裡面的 rel 屬性，讓大家一次搞懂 rel="nofollow"、rel="noopener"，喔！還有一個沒提到的 rel="noreferrer" 這些是屬性都是做什麼的？對 SEO、網頁安全性有什麼影響，什麼情況該加、什麼情況不用加。
rel="nofollow noopener noreferrer" 是什麼？
先來說說 nofollow。
從語意來看，rel="nofollow noopener noreferrer" 字面上的意思就是「不要跟隨」（No Follow）
那麼不要跟隨是什麼意思呢？這就要從搜尋引擎說起了。
想像你是一個搜尋引擎的爬蟲機器人，每天沒事做，就是不斷地逛網站(嗯～的確有一陣子我都是這樣過日子的，啊～好令人懷念 :D)，如果在網頁上看到任何的超連結，就會跟著這些連結再到其他的網站上閒逛。
透過連結前往另一個目的地時，搜尋爬蟲就會在心裡默默記下：喔！這個地方是某某某推薦的，如果這個連結前往的地方是個好地方也就沒事，但如果是個『壞』地方(好比是詐騙網站、空洞無內容的頁面等等)，那麼搜尋爬蟲就會記恨，連帶把這個某某某的網站標記起來：這個網站推薦了壞地方，他八成也不是個好東西。
也就是說，當你在網頁中放一個連結時，搜尋引擎會認為：「你放了一個連結，就表示你是在幫那個連結指向的網頁背書」。
這個背書，就像是一次投票。
Google 的排序邏輯之一，就是根據多少網站投票給某個頁面，來判斷它的權威性與可信度。
所以，如果你不希望幫對方的頁面投票加分(傳遞權重)，就可以加上 rel="nofollow noopener noreferrer"：
<a href="https://example.com" rel="nofollow noopener noreferrer">外部連結</a>這樣 Google 就會知道：這個連結我有貼，但不代表我認同或推薦，請不要把這個連結當成我的 SEO 投票。
什麼情況要加 nofollow？
- 是廣告、贊助內容的連結
- 是使用者留言、留言簽名檔中的連結
- 是交換連結、不熟悉、不信任的網站
Google 本來就要求：贊助或廣告連結必須加 rel="nofollow noopener noreferrer"(或新的rel="sponsored")，否則可能被懲罰。
rel="nofollow noopener noreferrer" 這個屬性最早最早，是用來防堵在(古早年代)留言板上的垃圾留言，這些垃圾留言故意在各個留言區，留下很多自家網站的連結企圖增加流量，後來慢慢變成：『不想以任何方式擔保連結網站的內容品質或者不想讓 Google 透過您的網站檢索連結的網頁，請使用 nofollow 』。
rel="noopener" 是什麼？
當你在連結中加上 target="_blank"(也就是點了會開新視窗)，通常是為了讓使用者不離開你的網站。不過這樣也會帶來一個風險：新開的那個網頁，其實可以透過 JavaScript window.opener 回頭「控制」你的網頁。
例如，它可以做這件事：
// 在新開的頁面中
window.opener.location = 'https://fake-login.com';這樣當使用者在瀏覽器上切換回原本的分頁時，可能以為還在你的網站，但其實已經被上面的JS code默默地跳到另一個網站了！
這種攻擊叫做 tabnabbing，就資安而言是個非常真實的問題。
這個時候，我們就在連結裡，加上 rel="noopener"
<a href="https://example.com" target="_blank" rel="noopener">開新頁</a>這樣就能讓新頁面無法透過 window.opener 回頭干涉你的頁面。
也因此，許多前端框架與靜態網站生成器，會預設幫你加上 rel="noopener"。
rel="noopener noreferrer"：更完整的保護，避免資訊外洩與被操控
剛剛提到，當你使用 target="_blank" 時，會開啟新視窗，卻也讓新開的網頁有機會「反過來操控」你的頁面。
這種行為不只會造成 tabnabbing 攻擊，還可能在背景偷偷執行一些惡意的或是損害隱私的行為。
為了防止這些風險，除了 noopener，一般還會在外部連結中再加上：
rel="noopener noreferrer"noreferrer 的作用是什麼？
它的主要功能是：不讓新開的網頁知道「你是從哪個網站點過來的」。
舉例來說，如果你從你的網站連出去一個網址：
<a href="https://example.com" target="_blank" rel="noreferrer">外部連結</a>這也意味著，對方無法透過這個資訊來追蹤你的流量來源或使用者行為。換句話說，對方無法知道你是「從哪一頁點過來的」，這能有效保護使用者的隱私。
這對於隱私保護來說非常重要，尤其當你連出去的是合作、廣告或追蹤連結時，不一定希望洩露來源資訊。
noopener 與 noreferrer 差在哪裡？
| 屬性 | 功能 | 備註 |
|---|---|---|
noopener | 阻止新開頁控制原頁 | 保護使用者不被 tabnabbing |
noreferrer | 不傳送 Referer 資訊給目標網站 | 預設也會包含 noopener 的效果 |
所以：單用 noreferrer 就已經同時具備 noopener 的效果了。
不過，為了語意明確與瀏覽器相容性，還是會建議一起寫：
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部連結</a>如果你又想告訴 Google「這個連結我不背書」，可以加上：
<a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">外部連結</a>最後總結一下
- 對 Google 來說，沒加
nofollow就是你在幫別人背書（投票）。 - 對使用者來說，沒加
noopener會讓你網站暴露在 tabnabbing 的風險中。 - 對隱私來說，沒加
noreferrer就可能讓對方知道你是從哪裡連過來的。
所以，建議外部連結使用：
<a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">外部連結</a>這不只對 SEO 友善，也能避免安全風險、保護使用者體驗，小小的標籤，背後其實藏著 SEO、資安與使用者體驗的三重考量，值得每個網站經營者注意。