這幾天我在 Threads 上看到有人發表 href=”#” 已經過時。
身為一個出身後端背景的我（對，我就是那個魯蛇😂），
當下心想：「咦？咦？咦？咦？」於是我開始研究。
🌿 背後其實牽動的不只是語法問題
沒想到這一查，才發現原來這背後牽扯的不只是語法新舊問題，
而是跟網站的 可用性（Usability）、SEO 搜尋可見性，甚至 無障礙設計（Accessibility） 都息息相關。
我們常在專案裡看到前端使用 <a href="#"> 或 <a href="javascript:void(0)"> 來綁定點擊事件，
但其實兩者的行為、風險、甚至對搜尋引擎的解讀都完全不同。
接下來我們就一步步來拆解，
這兩個看似簡單卻常被誤用的寫法，究竟差在哪裡。
href="#" 的原始用途與風險
一開始出現 href="#" 的設計，其實並沒有錯。
在早期網頁開發裡，# 的意思是「錨點（anchor）」，它代表頁面內的一個定位點。
例如 <a href="#top">回到最上方</a>，會帶使用者滾動到 ID 為 top 的元素位置。
但如果單獨只寫 href="#"，就會變成一個「沒有錨點目標」的空連結。
換句話說，每次點擊它，瀏覽器會預設將頁面跳回頂端。
這在靜態頁時代或許還無傷大雅，但在現代的互動式網站中，
這種寫法會產生兩個常見問題：
為什麼 href="#" 會害 UX 與追蹤數據失真？
-
使用者體驗不佳
如果開發者忘記在點擊事件中加上event.preventDefault()， 畫面就會「閃一下」回到最上方，讓使用者誤以為頁面重新載入。 這不只讓操作感不流暢，也會打斷訪客的閱讀節奏。 -
SEO 與事件追蹤異常
由於href="#"預設會導致頁面位置改變， 這對 Google Analytics、Meta Pixel 或任何基於 URL 的追蹤工具都可能造成誤判。 部分追蹤程式甚至會以為使用者「換頁」，導致數據變得不準確。
對我這種後端出身、後來才慢慢補前端知識的人來說，
這真是一個典型「看起來沒錯、其實很坑」的寫法。
表面只是想建立一個點擊事件入口，但結果卻可能影響 SEO、數據分析，甚至無障礙體驗。
小提醒
如果只是為了觸發 JavaScript 事件，建議不要再用 href="#"，
而是使用 <button> 或 <a role="button">，並在程式中安全地攔截事件。
ref="javascript:void(0)" 的用意與缺陷
隨著前端框架與互動需求越來越多，很多人為了避免 href="#" 造成頁面跳回頂端，
便改用另一種寫法：href="javascript:void(0)"。
乍看之下，這似乎是個更聰明的解法。因為 javascript:void(0) 會執行一段空的 JavaScript，
什麼也不做，頁面自然不會捲動、不會重新載入，看起來問題解決了。
但這種「表面平靜」的作法，其實埋著另一顆雷。
一、SEO 眼中的「死連結（dead link）」
搜尋引擎在爬取網站時，會透過 href 屬性去建立頁面之間的連結關係。
然而當它遇到 href="javascript:void(0)" 時，
Googlebot 根本無法判斷這個連結要通往哪裡，
於是就會把它視為一個「沒有目標」的死連結，
不會傳遞權重，也不會建立內部連結關係。
換句話說，你在網站導覽列、頁腳或行銷按鈕上使用這種寫法， 其實是在告訴搜尋引擎：「這個按鈕沒在帶你去哪裡」， 長期下來可能讓網站的結構被誤判為不完整。
二、對無障礙設計與可及性的影響
對使用螢幕報讀器（screen reader）的人來說，
href="javascript:void(0)" 會被讀成「連結，沒有目的地」。
這會讓視障使用者完全無法理解這個元素的用途，
也違反了 WAI-ARIA（Web Accessibility Initiative） 對語意化互動元件的建議。
三、維護成本與跨環境相容性
在某些嚴格的 Content Security Policy（CSP） 環境中，
內嵌的 javascript: 語法甚至可能被瀏覽器封鎖，
導致按鈕完全失效。
更別提在大型前端框架（如 React、Vue）裡，
這樣的寫法會被 ESLint 視為錯誤。
⚠️ 結論
href="javascript:void(0)" 雖然解決了頁面跳動問題，
但卻讓搜尋引擎與使用者都「看不懂」這個連結，
最終反而犧牲了網站的可讀性與 SEO 效益。
href 與 src 的本質差異
很多人在學前端時，對 href 和 src 的使用界線模糊不清，
尤其在寫 <link>、<script>、<a> 之類的標籤時，常常只知道「放網址」，
卻不知道兩者其實代表了完全不同的語意與行為邏輯。
一、href 是「超連結關聯（Hypertext Reference）」
href 代表「這個元素與另一個資源之間的關聯」。
換句話說，它的角色是「告訴使用者（或搜尋引擎）這裡有一個可以前往的目標」。
常見於：
<a href="/about">關於我們</a> <link rel="stylesheet" href="/style.css">
在這些例子中，href 都是「指向」另一個資源：
<a>是讓使用者點擊導向頁面<link>是讓瀏覽器知道有外部樣式表可以載入
因此，當 Googlebot 或其他爬蟲讀到 href，
它會把這些連結視為網站結構的一部分，用來建立網頁之間的關聯。
這也是為什麼 href="#" 或 javascript:void(0)
會被視為「死連結」的原因 — 因為它們沒有真實的指向目標。
二、src 是「資源引入（Source）」
而 src 的作用，則是讓瀏覽器「直接載入」指定的外部資源。
它不只是引用，而是「嵌入」：
<img src="/logo.png" alt="網站Logo"> <script src="/main.js"></script>
這些元素在解析時，瀏覽器會暫停解析 HTML、先下載資源再繼續執行。
所以 src 比起 href，更像是「我要用這個檔案」。
也因為這樣，src 不能拿來取代 href。
兩者的核心差異如下：
| 屬性 | 用途 | 是否建立連結關係 | 是否嵌入資源 |
|---|---|---|---|
href |
指向一個資源或頁面 | 是 | 否 |
src |
載入外部資源內容 | 否 | 是 |
三、從 SEO 的角度看
搜尋引擎在分析網站結構時，
只會把 href 當成可被追蹤的連結，
而不會去解析 src 所載入的內容（除非該內容本身再被引用）。
因此，網站導覽、麵包屑、內文連結等，都應該使用 href
來維持正確的語意與 SEO 效益。
✅ 小提醒
如果你只是想讓某個元素看起來「可點擊」，但實際上不需要導向頁面，
應該使用 <button>、<div role="button"> 或其他語意更恰當的標籤，
不要誤用 href 或 src 來完成這件事。
好的現代作法與替代方案
隨著前端開發框架與 SEO 技術的成熟，
我們已經不再需要透過 href="#" 或 javascript:void(0) 這類「假連結」來綁定事件。
現在有更多符合語意、對 SEO 也友善的方式可以達到同樣效果。
一、使用 <button> 元素
如果你的目的是觸發 JavaScript 事件，而不是導向其他頁面，
最語意化、最推薦的方式就是使用 <button>。
<button type="button" onclick="openModal()">開啟彈窗</button>
<button> 本身就被設計為可互動元素，
瀏覽器會自動提供鍵盤焦點與可及性支援，
對於使用螢幕報讀器或行動裝置的使用者來說，體驗會更一致。
二、保留超連結語意：<a role="button">
有時候設計稿或行銷需求希望按鈕外觀仍維持 <a> 的樣式，
這時可以使用 role="button"，
讓輔助工具理解它是一個操作元件，而非超連結。
<a href="#" role="button" onclick="toggleMenu(event)">展開選單</a>
在這個例子中，role="button" 明確地告訴瀏覽器與輔助技術：
這不是導向其他頁面的連結，而是一個觸發互動行為的元件。
建議同時在程式中加入 event.preventDefault()，
以避免頁面跳動或誤判行為。
在現代開發環境中，「假連結」早已沒有存在的必要。
真正專業的網站應該兼顧語意結構、互動邏輯與 SEO 可讀性，
這樣不僅能避免報錯或無障礙警告，也能讓搜尋引擎更正確地理解整個網站架構。
從 SEO 與無障礙設計觀點看超連結的真相
這裡我們不再只談語法，而是從搜尋引擎與使用者的角度，
來理解為什麼「正確使用 href」這件事，會直接影響網站的整體信任度與排名潛力。
一、搜尋引擎如何理解 href
Googlebot 在爬取網站時，會依照 href 屬性建立整個網站的連結地圖（Link Graph）。
這個地圖決定了：
- 哪些頁面能互相傳遞權重（Link Equity）
- 哪些頁面被視為孤立（Orphan Page）
- 哪些按鈕對使用者有實際導航意義
當 Googlebot 遇到 href="#" 或 href="javascript:void(0)" 時，
它會直接忽略這些連結，因為這些連結沒有任何目的地可爬。
在大型網站中，這會導致整體「內部連結密度」下降，讓重要頁面的 PageRank 傳遞被稀釋或中斷。
「請使用具有實際目標的超連結（
<a href=”…”>），避免使用空連結或以 JavaScript 觸發的假導向。」
換句話說，對 Google 而言，超連結不只是「能被點擊」，
而是一種資訊架構的證據，會直接影響網站整體可爬行性與 SEO 成效。
二、無障礙設計（Accessibility）與使用者信任
再來看另一個常被忽略的面向：使用輔助工具。
當螢幕報讀器（Screen Reader）掃描頁面時，會依據 href 判斷哪些元素是「可導向」的連結。
如果遇到 javascript:void(0) 或 #，
它只會念出 「連結，沒有目標」 —— 使用者會完全摸不著頭緒。
這類錯誤不僅會被 Lighthouse 或 WAVE 無障礙工具檢測出來，
也可能影響政府或國際企業在網站評分中的「可及性等級（AA／AAA）」認證。
對品牌形象與 SEO 的信任訊號（Trust Signal）來說，這是實質扣分。
📌 重要案例與研究
SEMrush：Internal Linking Mistakes 案例
在其報告中，他們比較了兩家 startup（A 與 B），兩者 Domain Authority 相近，
但 A 的「內部連結結構良好」而 B 則有「大量內部連結錯誤（包括 nofollow 內部連結、鏈結無資料）」。
結果 A 的第一頁關鍵字比例為 8%，而 B 只有 6.3%，整體流量相差超過四倍。
👉 這說明「內部連結錯誤／無效連結」會削弱 SEO 優勢，即便其它條件相似。
（來源：SEMrush Internal Linking Mistakes）
LinkWhisper：Bad Internal Links 的實務案例
在其部落格文章中，作者提及因「大量與主題不相關的內部連結」與「通用／無意義錨文字」導致流量被砍掉一半以上，
修正後流量回升約 138%。
👉 雖非直接指 href=”#”，但重點在於「連結本身若無語意或無實質指向」對 SEO 的負面影響。
（來源：LinkWhisper Blog）
學術研究：資料顯示大量首頁有「破損連結／無效連結」現象
在 ArXiv 收錄的研究 《Quantification and Modeling of Broken Links Prevalence in Hyper Traffic Websites Homepages》 中指出：
在流量頂尖的 88,000 個首頁中，有約 35.2% 至少含有一個破損或無效連結。
👉 這從另一面支持「連結錯誤／無效連結為常見問題，網站結構有缺陷可能影響整體可見性」。
（來源：arXiv.org）
🧩 常見錯誤總結：內部連結錯誤如何傷害 SEO
多篇業界指南均指出：錯誤地使用「無意義錨文字」「過多鏈結」「孤立頁面（Orphan Page）」「破損連結」等，
都會造成搜尋引擎爬行效率降低、頁面結構模糊、連結權重未有效傳遞。
👉 因為 href="#" 或 javascript:void(0) 可視為「沒有真正目的地」的連結之一，
這些資料可為我們強化「無效連結＝潛在 SEO 風險」的論點。
（來源：seoClarity、Simplified SEO Consulting）
| 類別 | 常見錯誤 | 影響 | 改進建議 |
|---|---|---|---|
| 錨文字錯誤 | 使用「點我」「更多」「這裡」等無語意文字 | 降低關鍵字權重、無法建立主題關聯 | 改用具描述性的錨文字，例如「了解 SEO 架構」 |
| 假連結 | href="#" 或 javascript:void(0) |
Google 無法建立連結圖（Link Graph） | 改用真實 URL 或事件追蹤（Event Tracking） |
| 孤立頁面 | 頁面無內部導向連結 | PageRank 無法傳遞，頁面被視為低權重 | 建立站內導覽結構與自動內連模組 |
| 破損連結 | 導向 404 或不存在的頁面 | 損害使用者體驗與搜尋信任度 | 定期檢查連結健康狀態（Link Audit） |
✅ 專業建議：
- 保留語意：讓每個
href都有實際目標。 - 重視可及性：確保使用輔助工具的使用者也能理解操作。
- 結合分析：用事件追蹤（Event Tracking）取代假連結行為。
網站互動該兼顧美觀與語意正確
回頭想想，其實我們在開發網站的過程中，
很多時候只是為了「趕上進度」，便複製貼上別人的寫法，
像是 href="#" 或 javascript:void(0)。
但當我這次真正靜下來研究，才發現這些「看起來沒差」的語法，
其實會牽動使用者體驗、SEO 效能，甚至品牌信任度。
網站開發不該只是讓畫面能動，而是要讓搜尋引擎、使用者與輔助工具都能看懂它在做什麼。
語意正確的超連結結構，不只是「寫法漂亮」，
更是一種對網站品質的尊重。
若你的網站目前仍有這類假連結，
不妨趁這次檢查一輪，也順勢優化事件追蹤與可及性分數。
這些細節，往往正是 Google 判斷網站是否值得信任的關鍵指標。
href="#" 與 javascript:void(0) 看似只是寫法不同，其實會影響網站 SEO、使用體驗與無障礙分數。本文由網站設計與 SEO 專家深入解析，帶你學會現代正確寫法。
所以雖然沒有官方文件明確寫「href=”#” 會害你排名下降」，但它違反了多項 SEO 最佳實務：可爬取連結、語意化錨文字、結構性導向，而這些都是提升搜尋可見性的關鍵。
💬 我不是什麼大師，只是一路被坑被學出經驗來的工程師 😂
如果你有更好的做法、想補充的觀點，
或在網站開發、設計、行銷上有有趣的發現，
也都歡迎留言告訴我，
讓我們一起讓網站變得更快、更穩，也更好用。
