【HTML】解析 <a> 的 rel 屬性

本篇重點

• 了解 <a> 的 rel 屬性
• <a> 常見的 rel 屬性值和用途
• 不同情境下 <a> rel 屬性的使用方式
• 現代瀏覽器在大部分情況下已經自動為帶有 target="_blank" 的連結加上 rel="noopener"
• 調用 window.opener 的方法

了解 <a> 的 rel 屬性

<a> 元素常用於創建超連結，連結其他頁面或網站。而 rel 全名 “relationship” 用來定義當前文件和連結資源之間的關係，這個屬性不僅能夠影響 SEO，還能提升網站的安全性。

<a> 常見的 rel 屬性值和用途

noopener

當使用 target="_blank" 開啟新頁面時，使用此屬性可以防止新視窗操作原本的網站，避免潛在的安全風險。
noopener 和 Javascript 有關，新視窗可以使用 window.opener 來控制原視窗，藉此執行惡意行為。

例如

1
2
3
4
5
6
7
8

// 原視窗重新導向到首頁
window.opener.location.href = "https://forgetfulengineer.github.io/";

// 開啟原視窗的 alert
window.opener.alert('你點到惡意連結了');

// 操作原視窗的 DOM
window.opener.document.querySelector('body').innerHTML='<b style="color: red; font-size: 100px; margin: auto;">你點到惡意連結了</b>';

noreferrer

阻止瀏覽器在新頁面中傳送 Referer 標頭，從而保護當前頁面 URL 不被暴露給目標網站。這個屬性也會自動包含 noopener 的效果。

nofollow

告訴搜尋引擎忽視兩個網站間的關聯，不要追蹤此連結，對於原視窗沒有影響，但會影響新視窗的流量分析和 SEO。這個屬性通常應用在廣告或不信任的外部連結上，以防止影響網站的 SEO 排名。

external

告訴瀏覽器或一些輔助工具（如 SEO 工具或網頁分析工具），這個連結指向的是一個外部網站。

ugc（User Generated Content）

用於標示用戶生成的內容，常見於評論、留言等。

sponsored

表示該連結為付費推廣或廣告內容，這有助於透明地告知搜尋引擎該連結的性質。

不同情境下 <a> rel 屬性的使用方式

外部連結

針對外部連結可以使用 rel="noopener noreferrer nofollow external"

1

<a href="<https://www.google.com>" target="_blank" rel="noopener noreferrer nofollow external">google</a>

提升 SEO

• 針對付費推廣連結時可以使用rel="sponsored"
• 針對用戶自行提交的連結可以使用 rel="ugc nofollow"

1
2
3

<a href="<https://ads.com>" rel="sponsored">Ads</a>

<a href="<https://user-content.com>" rel="ugc nofollow">User Content</a>

調用 window.opener 的方法

隨著瀏覽器安全性的提升，現代瀏覽器已經自動為所有帶有 target="_blank" 的連結加上 rel="noopener"，這是為了防止新視窗通過 window.opener 對原視窗進行操作，避免可能的安全漏洞（如釣魚攻擊）。

如果在某些情境下需要測試或使用 window.opener，這邊提供兩種方法～

• 設置 rel="opener"
• 使用 window.open() 開啟新連結

需要注意的是，這只能在原視窗與新視窗位於相同域名的情況下使用，如果是跨域情況，則無法操作 window.opener。

1
2
3
4
5

<!-- 設置 rel="opener" -->
<a href="https://example.com" target="_blank" rel="opener">測試 window.opener</a>

<!-- 使用 window.open() 開啟新連結 -->
<button onclick="javascript:window.open('https://example.com');">測試 window.opener</button>

結論

rel 屬性雖然簡單，但在網站的安全性、SEO 扮演著重要角色。

• noopener：阻擋新視窗操作原視窗 (現代瀏覽器已經自動為所有帶有 target="_blank" 的連結加上 rel="noopener")
• noreferrer：阻止瀏覽器在新頁面中傳送 Referer 標頭，影響新視窗的 SEO
• nofollow：告訴搜尋引擎忽視兩個網站間的關聯，影響新視窗的 SEO
• external：告訴瀏覽器此連結是外部連結
• ugc：標示用戶生成的內容
• sponsored：標示此連結為付費推廣或廣告內容

延伸閱讀

【MDN】rel 屬性介紹
【MDN】Window: opener 屬性介紹
【Chrome Platform Status】自動為所有使用 target=”_blank” 的連結添加 rel=”noopener”