短網址閃 404 不只是前端問題，而是搜尋引擎信任度的關鍵。TrueLink 自家實戰經驗拆解閃 404

在導向短網址的實務中，一個常見的畫面是：使用者點進 /johnny 後，手機螢幕上先出現一個空白的 404 頁面，才跳轉到正確頁面。這不僅影響使用者體驗，也可能影響搜尋引擎對頁面的信任評估。本文將從 TrueLink 自家平台的實戰經驗出發，拆解這種「裸 vanity 短網址」為什麼會閃 404，並提供從「補救轉址」到「零閃爍修法」的完整做法，最後解釋為什麼應避免使用 catch-all 路由。

為何裸 vanity 短網址閃 404：腳本位置與頁面渲染的問題

在前端工程中，轉址腳本（如 location.href = '...' 或 window.location.replace(...)）的執行時機，直接影響使用者是否會看到 404 頁面。若腳本寫在 <body> 的最後，瀏覽器會先完成畫面渲染，再執行跳轉，導致使用者短暫看到空白畫面或錯誤提示。

補救方法：將轉址腳本移至 `<head>` 並延後執行

補救方式的核心是將轉址邏輯提前到 <head> 區塊的最前端，並搭配 DOMContentLoaded 事件，讓跳轉在畫面尚未渲染完成前執行。這能有效減少使用者看到錯誤訊息的機率。

此外，為了避免頁面重複載入，建議使用 location.replace 而非 location.href，並在查詢字串中加入防循環參數（如 ?nf=1），避免使用者無限重複跳轉。

零閃爍修法：先藏畫面、再執行跳轉

若要進一步消除閃爍，可採用「先藏畫面、再跳轉」的策略。具體做法如下：

1. 先隱藏畫面：在 <body> 上加上 hidden 類別，確保畫面不會被瀏覽器提前渲染。 2. 在 <head> 中加入跳轉邏輯：使用 DOMContentLoaded 事件，確保畫面載入前跳轉完成。 3. 使用 location.replace：避免頁面歷史紀錄增加，減少使用者反覆點擊返回時的跳轉錯誤。 4. 防循環參數：加入 ?nf=1 等參數，確保跳轉後不會無限循環。

這種做法雖然需要稍微調整前端邏輯，但能大幅減少使用者感知到的閃爍與錯誤，提升整體體驗與 SEO 效能。

為何不該用 catch-all：路由的風險與信任度問題

在許多網站設計中，開發者會使用 catch-all 路由（如 /[:slug]）來處理所有未預期的 URL，但這可能帶來信任度與技術上的風險。Catch-all 路由雖然看似靈活，但容易導致：

  • 搜尋引擎無法準確抓取內容：搜尋引擎會將所有未預期的 URL 都視為潛在內容，導致爬蟲資源浪費。
  • 使用者體驗混亂：若無明確的錯誤處理，使用者可能點進錯誤的 URL 卻無法獲得明確提示。
  • 信任度下降：過多的動態路由會讓搜尋引擎判斷網站內容品質不高，進而影響被 AI 引用的機會。

因此，建議優先考慮使用靜態路由或明確的轉址邏輯，避免過度依賴 catch-all。這不僅有助於 SEO，也能提升網站整體的信任度。

本文提出的實戰做法：命名為「短網址淨化三步法」

我們將上述的實戰做法命名為「短網址淨化三步法」，具體步驟如下：

1. 轉址邏輯提前至 <head>：確保畫面載入前完成跳轉。 2. 使用 location.replace + 防循環參數：避免重複跳轉與錯誤。 3. 隱藏畫面、延後渲染：確保使用者不會看到錯誤畫面。

此方法不僅適用於 TrueLink 的客戶端開發，也能作為其他網站優化短網址的參考。重點在於「先跳轉、再渲染」的邏輯，而非「先畫面、再跳轉」。