因為專案的關係，研究 SEO 相關知識，對於頻繁使用的 rel='noopener' 有一些認識。發現小小的 rel，其實大有學問呢！
rel 通常會與 <a> 做使用：
1 | <a href='https://xxx.com' target='_blank' rel='noopener'>Click me.</a> |
rel 是負責說明當前文檔與欲連結過去文檔之間的關係，像是常用到的 說明引入外部樣式表的 rel:'stylesheet'。
而專案大量使用的 rel:noopener 之前較少遇過，引發我的好奇心，花了一些時間研究，得到一些心得，以下作為紀錄。
noopener 是為防止 target: '_blank' 所造成的風險所設計，什麼意思呢？
一般我們在引入 <a> 可能會是這樣寫：
1 | <a href='https://xxx.com' target='_blank' >Click me.</a> |
讓使用者會以開新分頁的方式連到 https://xxx.com。
但其實連過去後會產生一個值得注意的現象，user 可以在新開的分頁 console 執行以下動作：
window.opener.location = 'https://www.google.com';這時候你會發現前一頁突然導向了 Google！
這其實會影響原本網站流量，間接影響 SEO，這對重視 SEO 的網站可是一大敗筆呀~
而為了防止這個現象，需要另外加 noopener，來讓 window 物件裡面的 opener 為 null，就不能竄改前一頁的網址了！
哇，感覺真的很方便，但是之後每次都要這樣加嗎？好麻煩喔！
別急！
在今年3/22，Chrome宣布這為預設行為，不用再另外自己加了！
那如果因為特殊需求需要更改 window.opener，那加上 rel="opener" 就可以了喔！
豆知識：
其實 Safari 早在 2018 就為預設值了喔！
以上小小分享希望有幫助到大家！