目錄

• 目錄
  • rel="noreferrer"
  • rel="noopener"
  • rel="nofollow"
  • 參考資料

rel="noreferrer"

noopener 和 noreferrer 都是 HTML 屬性，用於前往外站的連結

rel="noreferrer"避免傳遞 referrer(HTTP referrer)給使用者將前往的網站`，這樣就可以避免一些需要權限的網頁被以鑽漏洞的方式進入

referrer指的是 HTTP header的一個欄位，用於表示從哪連(url)到目前的網頁，常被用來對付偽造的跨網站請求

<a href="https://your.link.here" rel="noreferrer">Link</a>

window.open('https://your.link.here', '_blank', 'noopener=yes, noreferrer=yes');

使用 noreferrer 並不會直接對 SEO 造成負面影響，但它確實會在另一個層面上對 SEO 造成衝擊

因為如果使用者從 A 網站連到 B 網站，當 B 網站的管理員查看 GA 時，只會看到"Direct"，而無法連到網站 A

[2023/5/26 更新]

另外有些網站為了避免被偷頻寬，會在header沒有帶referer的情況下做阻擋，這就是為什麼會出現點擊連結一切正常，但複製貼到網址列就不正常

rel="noopener"

rel="noopener"的效果和 rel="noreferrer"一樣，但是兩者並不相同

一般情況下，使用window.open()打開一個新頁面時，新頁面會保留對原始頁面（即父頁面）的reference

並且可以使用 window.opener 屬性來訪問父頁面的屬性和方法

使用 noopener 即是將父頁面和子頁面的 opener 連結切斷

在一些網站(ex: 巴哈姆特)也會在連到外站的頁面切斷 opener 連結

rel="nofollow"

rel="nofollow"是 HTML 屬性，用於前往外站的連結

加上這個屬性會告訴搜尋引擎「這個網站的擁有者並不認可這連結的網站、聲明這個網站和我的網站沒有關聯」，這樣爬蟲就不會去爬那個連結

在 Google 發表的「nofollow」再進化：辨識連結性質的新方法中提到，這可以用於阻擋垃圾留言(在文章底下留一些跟文章無關的廣告、連結)

不過 Google 也表示比起 rel="nofollow"，他們更建議使用 rel="sponsored"來標注贊助商廣告

參考資料

HTML attribute: rel
What rel=noreferrer noopener Mean and How it Affects SEO
Window.opener
Clicking on a link works perfectly but copy-pasting URL won't work [closed]