文章外部連結另開分頁時，還要處理什麼

讀技術文章時，來源連結經常把讀者帶往另一個網站。本站選擇讓文章正文的外部 HTTP(S) 連結另開視窗或分頁，站內文章則留在原分頁。這是一項閱讀流程的設定，不是所有網站都必須採用的答案。

加上 target="_blank" 只處理了其中一部分。還要決定什麼算外部、是否保留 opener 關係、要不要送出來源資訊，以及讀者在啟動前能不能知道會發生什麼。

以下依 2026 年 10 月 25 日的正文腳本與本機 DOM 觀察說明。規則只套在文章正文，不是全站所有連結的統一實作。

外部連結，看的是解析後的 origin

目前腳本先找出 [data-note-body] 裡有 href 的連結，再把網址解析成 URL。只有協定是 http: 或 https:，而且 origin 與目前頁面不同，才補上另開設定。

這比看字串是不是以斜線開頭更準確。同站網址可以寫成完整的絕對網址；不同的協定、主機或連接埠，也可能讓兩個看起來很像的網址屬於不同 origin。

依目前的判斷規則，各種連結會分成這幾種情況。這張表說明的是程式分支，不表示每一類都已在真實文章裡找到實例並操作。

連結情境	正文腳本的處理
同 origin 的文章網址	不補另開屬性
同頁片段錨點	不補另開屬性
不同 origin 的 HTTP(S) 網址	補上 target、rel 與符合條件的提示名稱
mailto: 等非 HTTP(S) 協定	略過，不改成另開外部網頁

「不補」不代表主動清除原本的設定。若連結自己已經寫了 target，這個略過分支不會替它移除；不能把目前的一般站內連結沒有 target，推成腳本會修正所有例外。

target 和 rel 各自決定不同的事

符合條件的連結會被設成 target="_blank"，並寫入 rel="noopener noreferrer"。

noopener 處理的是新開頁面與原頁面的 opener 關係；HTML 規格說明，對應的新視窗不會取得這份 opener 參照。noreferrer 則要求不隨連結送出 referrer 資訊，且同時包含 noopener 的行為。[2]

所以這兩個字不是兩道彼此獨立、加上去就萬無一失的安全保證。明確寫出兩者可以讓設定意圖容易辨識，但 noreferrer 也代表目的地不會從這次導覽收到相同的來源資訊。若網站需要特定來源追蹤，就必須先確認這個取捨，而不是把它當成純粹的樣式設定。

這些屬性也不會替讀者驗證外部網站是否可信，更不是匿名瀏覽功能。來源本身仍然要查證；連結開啟方式和引用品質是兩回事。

提示要發生在啟動之前

目前腳本會在原本沒有 aria-label、而且有文字內容的外部連結上，組出包含連結文字與另開提示的可存取名稱。繁中補「另開新視窗」，英文與日文則使用各自的提示文案。

保留原連結文字很重要。若把每個名稱都改成只有「另開新視窗」，讀者反而無法知道這個連結要去哪裡。提示應該補充目的地，而不是取代目的地。

如果連結本來就有 aria-label，這段腳本選擇不覆寫。這也表示它不保證每個外部連結的既有名稱都包含另開提醒；原本的名稱是否完整，仍需要在撰寫該連結時確認。只有圖片、沒有文字內容的連結，也不能靠這段文字拼接自行產生適當名稱。

W3C 的 G201 技術說明建議，在使用者一般啟動會另開的連結或按鈕之前，提供警告或提示；文件同時明確把這項技術列為建議性做法，不能把它直接說成某個成功準則的強制條文。[3]

可存取名稱存在，不等於畫面已有提示

這份腳本改的是屬性，沒有替正文插入可見的「另開」文字或圖示。使用一般視覺閱讀時，aria-label 不會自動顯示在連結旁邊。

G201 的範例包括可見文字，或可見圖示搭配供輔助科技使用的描述。[3] 因此，我不會只因為 DOM 裡已經有 aria-label，就宣稱所有讀者都得到了足夠預告，也不會把這段腳本當成全站可及性合規的證明。

這裡值得保留一個明確的差距：目前可以核對三語的提示名稱，卻還不能把它等同於完整的可見提示設計。若要補強，應該另外決定圖示或文字怎麼呈現、會不會干擾閱讀，以及既有名稱如何一起保持一致；不是在寫文章時順便替整站改一套規則。

無腳本時，先讓連結仍然是連結

正文的 href 從 Markdown 渲染時就存在，另開設定則由瀏覽器腳本補上。我停用頁面腳本後重新載入文章，外部來源仍是帶有目的地的普通連結，只是沒有這層另開屬性與補充名稱。

這個退路保住的是基本導覽，不是「有沒有 JavaScript 都完全一樣」。讀者仍可使用瀏覽器提供的連結操作方式；網站不應為了統一另開行為，反而把來源網址藏成只有 click handler 才能啟動的控制。

本機核對選用 HTML 語意篇的三語版本，每個版本都找到兩個外部來源連結與一個站內延伸閱讀。腳本執行後，外部連結的 target、rel 與語言提示符合設定，站內連結沒有另開 target；停用腳本後，外部來源回到一般連結。

這些是屬性與無腳本 DOM 的觀察，沒有實際開啟外站來量測 window.opener、HTTP Referer 或目的地行為，也沒有測過螢幕閱讀器。規格支持屬性的意思，這次操作支持選定頁面的設定；兩種證據不必混成一個更大的「全部安全」。

看起來像按鈕，不代表它真的該是 <button>先處理了連結的基本語意。到了外部連結，我會再追問一次：保留目前文章的閱讀位置，是否同時讓讀者知道下一個操作會去哪裡。

Sources

[2] https://html.spec.whatwg.org/multipage/links.html [3] https://www.w3.org/WAI/WCAG22/Techniques/general/G201