我是吳承學,做 SEO 二十多年。內部連結是我認為投報率最被低估的一塊:它不用花預算買外部連結,單靠網站自己的結構就能把權重與主題訊號送到該去的地方。可惜多數網站把它浪費了,不是錨文字寫成「點我」,就是把該做成連結的頁籤做成按鈕,讓整批內容從搜尋引擎眼前消失。這篇我把錨文字怎麼寫、連結狀態怎麼顧、頁籤該用 <a> 還是 <button>,連同正確的 ARIA 做法一次講清楚,並附上可以直接對照的程式碼。
1. 錨文字是搜尋引擎理解連結去向的線索
搜尋引擎判斷一個連結指向什麼主題,很大程度依賴錨文字,也就是那段可以點擊的文字。你選什麼字當錨文字,等於在替目標頁面下註解。
1.1 「點我」和「更多」浪費了最重要的訊號
「點我」「更多」「這裡」這類錨文字,對搜尋引擎完全沒有描述力,它讀不出這個連結要帶去哪裡、內容是什麼主題。這等於把一個免費的機會丟掉。我稽核內容網站時常看到整篇文章的內部連結全是「更多」,那背後是幾十個原本可以傳遞主題訊號的連結,全被寫成了空話。
1.2 描述性錨文字該怎麼寫
好的錨文字要能讓人單看這段文字,就知道點下去會到哪裡。與其寫「想知道更多請點我」,不如寫「網站速度優化的做法」。它同時服務兩種讀者:使用者能預期連結去向,搜尋引擎能理解目標頁的主題。原則是描述目標頁面的內容,而不是描述「點擊」這個動作。
| 情境 | 不建議的寫法 | 建議的寫法 |
|---|---|---|
| 文章內連到教學頁 | 詳情請點我 | 參考網站速度優化的做法 |
| 列表連到檢查清單 | 更多 | 查看完整的內部連結檢查清單 |
| 圖示或按鈕連結 | title=”點這裡” | title=”查看內部連結檢查清單” |
1.3 內部連結自然帶入主題關鍵字
內部連結的錨文字,適合自然地包含目標頁的主題字,這會強化搜尋引擎對兩頁之間關聯的理解。重點在「自然」:是順著句子把主題字寫進去,而不是硬塞一堆關鍵字。我的做法是先把句子寫順,再看能不能把目標頁的主題字剛好落在可點擊的那一段上,讀起來不彆扭,訊號也就傳到了。
2. 連結指向有效頁面這件基本功
錨文字寫得再好,如果連結指向的是一個壞掉的網址,一切都白費。連結的健康狀態,是內部連結能不能傳遞價值的前提。
2.1 先確認每個連結都回應 200
所有內部連結都應該指向有效頁面,也就是回應 HTTP 200 的網址。指向 404 的連結不但浪費使用者的點擊,也讓搜尋引擎沿著死路白跑一趟。網站改版、網址變動之後,舊連結沒跟著更新是最常見的破口,我每次改版驗收都會把全站連結重新掃一遍。
2.2 重導鏈與失效連結的隱形代價
比 404 更難察覺的是重導鏈:A 連到 B、B 又跳 C、C 再跳 D。每一次跳轉都拖慢載入、也稀釋權重的傳遞,而且它不會報錯,肉眼看網站完全正常。我處理過一個搬過三次網域的站,內部連結還指著兩代之前的舊網址,一路重導,清乾淨、讓連結直接指向最終網址之後,爬蟲抓取的效率明顯改善。連結能一步到位,就不要讓它繞路。
2.3 title 屬性用在文字說不清楚的地方
連結的 title 屬性可以補充說明,特別適合圖示或非文字連結這種光看外觀不知道去向的情況。但它是輔助,不是拿來塞「點這裡」的地方。正確的用法像這樣:
<a href="/seo-checklist" title="查看完整的 SEO 檢查清單">SEO 檢查</a>title 寫的是目標頁的內容,和錨文字互相補強,而不是重複一句沒資訊量的話。
案例分享、教學專區這類頁籤切換區塊,是我看過最常把內容藏起來的地方。選 <a> 還是 <button>,直接決定了這些內容會不會被搜尋引擎讀到。
搜尋引擎會沿著 <a href> 指向的網址去抓,但不會把 <button> 當成一個可以進入的頁面。就算你用 onclick 切換內容,也建立不出一條可被索引的路徑。結果是各個頁籤內容被當成同一頁的一部分,無法各自被收錄;而且以 JavaScript 控制顯示與隱藏時,搜尋引擎往往只看得到初始顯示的那一個頁籤,其餘的可能完全不被索引,SEO 權重整批流失。
3.2 內容具獨立價值,就改用語意化的 a 連結
如果每個頁籤其實是不同主題、各有獨立內容,例如案例分享和衛教專區,正確做法是改用 <a> 連到各自的網址,外觀再用 CSS 模擬原本的互動效果:
<div class="tabs">
<a href="/cases" class="tab is-active">案例分享</a>
<a href="/education" class="tab">衛教專區</a>
</div>這樣搜尋引擎能把 /cases 和 /education 分辨成兩個獨立頁面,使用者在前進、後退時也能保留瀏覽紀錄,而視覺上的 hover 與 active 狀態完全可以靠 CSS 還原,體驗不打折。
如果頁籤只是同一頁裡不同區塊的顯示切換,不是不同頁面,那就用 <button role="tab">,並且遵守兩個前提:切換內容要實際存在於 HTML 結構裡,而不是用 JavaScript 事後注入;若某個頁籤的內容其實有獨立的 SEO 價值,還是應該拆成獨立頁面。判斷標準很單純:內容值不值得被單獨搜尋到。
| 頁籤性質 | 正確做法 | 被索引的結果 |
|---|---|---|
| 各頁籤是不同主題、各有價值 | 用 <a href> 連到獨立網址 |
每個頁籤都能被單獨收錄 |
| 同一頁的區塊顯示切換 | 用 <button role="tab"> 加 ARIA |
內容仍在 HTML,可被讀到 |
| 用 JS 事後注入隱藏內容 | 應避免 | 只有初始頁籤被索引 |
4. tab 的 ARIA 正確做法
選擇同頁切換的 <button> 之後,ARIA 屬性決定了螢幕閱讀器能不能正確理解這組頁籤。這一節談怎麼把它標對。
4.1 用 role 標出 tablist、tab 與 tabpanel 的關係
一組頁籤的骨架,是外層 role="tablist"、每個按鈕 role="tab"、每塊內容 role="tabpanel"。這三者標出來,輔助技術才知道它們是一組互相關聯的頁籤,而不是散落的按鈕與段落。
<div role="tablist">
<button role="tab" aria-selected="true" aria-controls="panel-1">最新文章</button>
<button role="tab" aria-selected="false" aria-controls="panel-2">熱門文章</button>
</div>
<div id="panel-1" role="tabpanel"> ...內容... </div>
<div id="panel-2" role="tabpanel" hidden> ...內容... </div>4.2 用 aria-selected 與 aria-controls 建立對應
aria-selected 標示目前選中的是哪個頁籤,aria-controls 把按鈕和它控制的內容區塊綁在一起。這兩個屬性讓螢幕閱讀器的使用者知道現在在看哪一塊、切換會影響哪裡。少了它們,頁籤對這群使用者來說就只是一排無法理解的按鈕。
4.3 禁用 JavaScript 後仍要看得到內容
我驗收頁籤有一條硬標準:把 JavaScript 關掉之後,所有頁籤的內容應該仍然看得到,即使不能互動。因為內容存不存在,和能不能互動,是兩件事。搜尋引擎要的是內容存在於 HTML 裡;互動只是給使用者的體驗。只要內容是實打實寫在結構裡、而不是靠 JavaScript 事後生出來,關掉腳本它就還在,搜尋引擎自然也讀得到。
5. 我驗收內部連結的三個檢查點
內部連結要顧的東西不少,但驗收時我把它收斂成三個可執行的檢查點,一次跑完就能抓出絕大多數問題。
5.1 掃一遍全站的錨文字
用爬蟲工具把全站的內部連結錨文字拉出來,搜尋「點我」「更多」「這裡」這類無意義字眼,逐一換成描述目標頁內容的文字。這一步能立刻找出那些被浪費掉的連結訊號,而且改動成本很低。
5.2 批次檢查連結的回應狀態
把所有內部連結批次跑一次狀態碼,找出回應 404 的失效連結,以及經過多次跳轉的重導鏈。前者修正指向,後者讓連結直接指到最終網址。改版之後這一步尤其不能省,它是連結能不能正常傳遞價值的基礎。
5.3 逐一檢視頁籤區塊的語意
找出網站上所有頁籤切換的區塊,一個個判斷它屬於「不同頁面」還是「同頁切換」,再對照該用 <a> 還是 <button> 加 ARIA。最後把 JavaScript 關掉重載,確認所有頁籤內容仍然看得到。這一步最容易被忽略,卻常常一次就救回一整批原本讀不到的內容。
6. 常見問題
6.1 錨文字寫「點我」真的會影響 SEO 嗎
會,只是影響的是你放棄的機會。「點我」不帶任何主題訊號,搜尋引擎讀不出連結去向,等於白白丟掉一次強化目標頁主題的機會。換成描述目標頁內容的文字,不需要額外成本就能把這個訊號補回來。
6.2 內部連結太多會不會被當成過度優化
重點不在數量,而在是否自然、對讀者是否有幫助。順著內容脈絡、指向真正相關頁面的連結,多一些沒有問題;為了塞關鍵字硬加、或整段堆滿同一組錨文字,才是風險。先服務讀者,連結的價值自然會在。
如果內容是用 JavaScript 控制顯示與隱藏,搜尋引擎通常只看得到初始顯示的那個頁籤,其餘可能讀不到。想讓每個頁籤都被讀到,不同主題的改用 <a> 連到獨立網址,同頁切換的則把內容都保留在 HTML 結構裡並補上 ARIA。
看內容性質。如果每個頁籤是不同主題、各自有搜尋價值,建議改成 <a> 連到獨立網址;如果只是同一頁的區塊切換,維持 <button> 但補上正確的 ARIA、並確保內容存在於 HTML 即可,不必一律重寫。
6.5 外部連結和內部連結,錨文字的寫法有差別嗎
描述性這個原則兩者相同,都要讓人看得出連結去向。差別在於,內部連結你完全掌控,適合自然帶入目標頁的主題字來強化站內關聯;外部連結則以誠實描述對方頁面內容為主,不必刻意鑲嵌自己的關鍵字。