SEO進階:如何移除noreferrer標籤

by Daniel
29 views
如何移除noreferrer標籤

連結的標籤屬性是一個有趣的問題,我在學習什麼是nofollow link、如何設定nofollow link時,也認識到另外兩種連結屬性。這篇文章我要帶你認識wordpress預設的兩種屬性:no referer和noopener,讓你知道為什麼需要它、以及為什麼移除noreferer對SEO更好。

連結屬性標籤從何而來?

去年更新的wordpress版本,將設為新分頁開啟的超連結加入新標籤,之後只要設置超連結,程式碼會顯示多了rel= noopener  noreferrer,這個標籤讓超連結多了幾項隱藏的新意義,更甚而影響網站表現。

什麼是Noopener?

Noopener標籤的存在是為了保護使用者安全。

有一種稱為Tabnabbing的惡意攻擊手法,會在使用者點擊網站的外部連結時出現,特別是用新分頁開啟外部連結時。被連結的網站(B)會因為你的連結,取得原始網站(A)的部分資料,將原始網頁轉至其它頁面,像是會員登入頁,藉此竊取個人資料。

在外部連結程式碼中加上rel=noopener,可以有效避免不讓資料在瀏覽器中被竊取。

什麼是Noreferer?

瞭解什麼是noreferrer可以從認識反向連結開始。

當你點擊連結從A網站到達B網站,對B網站來說這是一種反向連結。

反向連結在對方的數據報表會顯示流量來源為referral,對方可以清楚知道流量來源的網址。

Noreferrer的用意是移除反向連結的資料,也就是說,當連結加入noreferrer標籤,對方的流量來源顯示就不會是referral,而是Direct,這樣一來對方便無從得知訪客從那個網站引薦而來。

有noreferrer標籤的連結在google數據報表會顯示為直接流量

在你不希望對方知道你有連結到他的網站時,noreferral標籤能馬上派上用場;相反的,如果你希望對方知道你有流量分享給他們,那移除noreferral是明智作法,這也是為了提高網站能見度的建議作法,原因我會在下面段落說明。

noreferer的相關觀念

nofollow與noreferer有什麼不同?

Noreferer link只是移除反向連結顯示在google數據的資料,本質仍是反向連結,這與nofollow link設置的用意完全不同,當你設置外部連結為nofollow link時,目的是希望不要讓Google檢索對方網站。

簡單來說:

  • 標示為noreferer的連結會提高被連結網站權重,只是不會顯示出流量來源。
  • 標示為nofollow的連結不會提高被連結網站權重,但會顯示反向連結來源。

對於某些你不支持的網站,nofollow link可以輕鬆幫你達到目的。

Noreferer link與SEO

可能有人因為noreferer link聽起來和noreferer link很像,就直覺認為noreferer link會破壞SEO。

這一點其實在上面已經澄清,noreferer link本質是反向連結,只要來源符合Google的評估因素(不是內容農場等垃圾連結),對於被連結網站就有正面影響。

為什麼建議移除noreferer標籤

如果我有連結到別人的網站,我會希望讓對方知道。

如果對方看到他的流量來源中有反向連結,他可能會好奇這是來自哪個網站,因此連結到我的網站逛逛,甚至願意分享我的內容到他們網站或社群上,這對我來說是一種很好的曝光機會。

而身為網站的管理人,我一樣會想知道我的流量來自哪裡、是不是有反向連結、都是哪些類型的網站願意分享我的內容。

如果流量來源太多被標示為直接流量,我就很難在數據中分析這些資訊。

如何取消wordpress自動加入noreferer標籤

目前所有在新分頁開啟的連結,wordpress都會自動加入rel=”noopener”屬性,基於安全考量noopener的標籤建議維持原樣,至於noreferrer,基於以上分析已經排除任何可能疑慮,也知道它對流量的影響,現在大可放心進行下一步:移除noreferer標籤。

移除noreferer的方法網路上有推薦好幾種方式,一一嘗試之後我發現最快速有效的只有一種:利用程式碼片段外掛移除

如何利用外掛移除noreferer標籤

noreferrer標籤可用外掛移除

移除noreferrer標籤,上傳functions.php也是一種作法,不過對於不常接觸程式碼的人來說,這個作法有點風險,相對之下,利用程式碼片段移除標籤有以下這些優點:

  • 不用更改到原始程式檔案
  • 更換布景時程式碼不會不見
  • 一個按鈕可控制程式碼開啟或關閉

程式碼片段這個外掛不只可以用在這個地方,網站中的標題樣式或重複內容也可以用它來設定。如果你還沒有這個外掛,請先到外掛頁面下載,新增一個程式碼貼上下列文字,啟用之後未來新增的文章或已發佈的文章,連結標籤都不會再有noreferrer。

// Removes on the frontend only, you will likely still see in the code view of the editor
function noref_formatter($content) {
$replace = array(“” => “” ,”” => “”);
$new_content = strtr($content, $replace);
return $new_content;
}
add_filter(‘the_content’, ‘noref_formatter’, 999);

實際步驟如下:

  1. 安裝並啟用Code Snippets外掛。
  2. 點選WordPress 左側面板上的程式碼片段->點選新增程式碼片段
  3. 在程式碼的空格中貼上程式
  4. 選擇「僅執行於網站前端」
  5. 為程式碼命名(方便自己辨識即可)
  6. 儲存設定並啟用

為什麼不直接刪除語法的noreferrer?

不知道你是否曾經想過這個方法,這方法聽起來最簡單,實際上卻不可用。

當我試著在html的編輯頁將連結中的noreferrer標籤刪除時,看起來是成功了,可是當文章發佈以後,在發佈頁面檢視原始碼時,標籤還是原來的rel=”noopener”。

可能這本來就是wordpress預設的語法,所以即使從語法中刪除,wordpress仍會自動把它還原。

可以不要在新分頁開啟連結嗎?

以新分頁開啟連結有它的用意。最主要的顧慮是使用者體驗,一般人瀏覽網站,有時可能還沒讀完全文,就先點擊內文連結瀏覽外部內容,之後再回到網站瀏覽後續內容。

如果連結不是在新視窗開啟,讀者很難再找到最先到達的網站,網站流量也會因此流失。

就使用者或網站管理人的立場而言,這個作法怎麼樣都不會優先採用。

如何確認標籤移除成功

上面提供的程式碼,原先設定因為只有執行於網站前端,瀏覽程式碼的編輯頁面仍會顯示rel=”noopener”,要確認是否變更成功,必須直接從瀏覽器檢視。

noreferrer標籤移除後需檢視原始碼確認是否移除成功
noreferrer標籤移除後檢視原始碼的樣子

上面的程式碼主要針對已發佈的文章,啟用程式碼之後才發佈的文章有另一個程式碼,不過就我測試的結果顯示,第一個程式碼對於先後發佈的文章都有效用,如果你測試後發現只有部分文章連結被移除,可以再新增第二個程式碼,步驟跟上面相同。

移除新增文章noreferrer標籤的程式碼:

//This code removes from your new or updated posts
function im_targeted_link_rel($rel_values) {
return ‘noopener’;
}
add_filter(‘wp_targeted_link_rel’, ‘im_targeted_link_rel’,999);

重點回顧

在這篇文章你認識了三種連結屬性:noopener、noreferrer、nofollow。還記得他們各自代表的意義嗎?

Noopener是基於資安考量使用的標籤,noreferrer會影響流量來源數據顯示,對SEO沒有影響但會間接影響網站能見度;nofollow與SEO最直接相關。

使用的建議上,Noopener的必要性最高,建議使用;其次是noreferrer,雖然是預設標籤,但建議使用;nofollow最彈性,可依照各自評估視情況使用。

最近我移除網站上的noreferrer標籤,已經發現多了反向連結數據,是我之前沒看過的流量來源,之後經過更長時間如果有觀察到更多改變再回來更新內容。如果你願意,也可以在下方留言,跟我分享你使用的連結優化方法以及優化後的結果。

You may also like

Leave a Comment