Nofollow - Noopener - Noreferrer使用場景

使用場景示例：

?

Nofollow 屬性會阻止您的網(wǎng)站將 SEO 鏈接權(quán)重傳遞到鏈接的網(wǎng)站，指示搜索引擎不要將任何 PageRank 從一個頁面?zhèn)鬟f到另一頁面。

搜索引擎在跟蹤您網(wǎng)站上的鏈接時(shí)會查找并考慮 nofollow 屬性。

使用方式：<a href="***.com" rel="nofollow">***.com</a>

rel=“noopener”屬性，避免鏈接網(wǎng)站控制瀏覽器中的鏈接頁面選項(xiàng)卡，阻止將其重定向到網(wǎng)絡(luò)釣魚頁面或惡意網(wǎng)站。杜絕個人數(shù)據(jù)被泄露，阻止被安裝惡意軟件。

Noopener阻止打開的頁面獲得對原始頁面的任何類型的訪問，即是增強(qiáng)網(wǎng)站的安全性并防止其他網(wǎng)站（通過瀏覽器會話）訪問您的頁面。

使用方式：

<a href="***.com" rel="noopener"?target=”_blank”>***.com</a>

Noreferrer (rel=“noreferrer”) 是“rel”HTML 鏈接屬性中的一個關(guān)鍵字，從 HTTP 標(biāo)頭中刪除引薦信息來防止將引薦來源信息傳遞到目標(biāo)網(wǎng)站，不將Referrer信息傳遞到被鏈接的網(wǎng)站。

即是當(dāng)您不希望其他網(wǎng)站知道您正在鏈接到它們時(shí)，不希望在跟隨鏈接時(shí)泄露引用者信息，請?jiān)趥鞒鲦溄由鲜褂?/span> rel=”noreferrer” 屬性。

使用方式：

<a href="***.com" rel="noreferrer"?target=”_blank”>***.com</a>

當(dāng)您使用target="_blank"屬性鏈接到另一個網(wǎng)站上的頁面時(shí)，您的網(wǎng)站可能會面臨性能和安全問題：

A.?其他頁面可能與您的頁面在同一進(jìn)程上運(yùn)行。如果其他頁面運(yùn)行大量 JavaScript，您的頁面的性能可能會受到影響。

B.?另一個頁面可以使用該屬性訪問您的window對象window.opener。這可能允許其他頁面將您的頁面重定向到惡意 URL。

添加rel="noopener"或rel="noreferrer"到您的target="_blank"鏈接可以避免這些問題。

使用方法：

<a href="***.com" rel="noreferrer" target="_blank">

與<a href="***.com" rel="noreferrer noopener" target="_blank"> 具有相同的作用。

(從?Chromium 版本 88 開始，默認(rèn)情況下錨點(diǎn)會使用target="_blank"自動獲取noopener行為。但還是建議加全，理由見擴(kuò)展知識2.)

1.?在GA中，來自具有 rel=”noreferrer” 屬性的鏈接的流量將顯示為直接流量而不是推薦流量。

2.?從 Chromium 版本 88 開始，默認(rèn)情況下錨點(diǎn)會使用target="_blank"自動獲取noopener行為。

顯式規(guī)范rel="noopener"有助于保護(hù)傳統(tǒng)瀏覽器（包括 Edge Legacy 和 Internet Explorer）的用戶。但在谷歌燈塔lighthouse監(jiān)測時(shí)，還是會提示target=“_blank”缺少noopener或noreferrer屬性。

總結(jié)

一般來說，當(dāng)您在<a href=””>中給站外鏈接使用target="_blank"時(shí), 請始終添加rel="noopener"或rel="noreferrer"，如果不希望頁面權(quán)重被稀釋，請多添加一個nofollow.