WordPress HTML 錨點是什麼？連結不同內容章節

這篇文章最後更新日期：2023 年 3 月 22 日 | 作者： Mack Chan

當你的 WordPress 網站已有不錯的文章數量，約 50 篇至 200 篇左右，這時候你「必須停下來思考一個問題」。網站的主題應該繼續擴闊更多單元？寫更多的文章嗎？不少研究顯示不少的網站的內容深度是嚴重不足，代表文章數量很多，但又不夠深入報道主題核心。

這次我們介紹新手常常忽視的「HTML 錨點 (Anchor) 」的應用，這個存在已久的功能，配合文章裡的「相關文章的超連結」，可以讓你建立主題架構緊密的的文章系列和整理文章。

錨點 (Anchor) 的應用可以用於單篇內容或外部的內容，讓訪客快速找到自己需要的優質內容和資訊，而非漫無目的地從數千字的內容裡發掘目標內容。

HTML 錨點 (Anchor) 是什麼？

這是從 HTML 1.0 的時代就存在的產物，大約有約 60 年歷史，是「超連結」的合作夥伴，單靠它們就可以建立一組有系統的網頁架構，然後大量的網頁集合起來，就是我們現在看到的「網站 / Website」的原型。

一篇長文章，應該部署合適的 HTML 錨點 (Anchor) 才是健康的現象，也能讓 Google 搜尋引導了解你網頁裡不同篇章的脈絡。

訪客希望快速找到「資料」，而非閱讀「所有內容」

新手應為為文章裡要加入適量的傳送門，如果您喜歡寫長文章的朋友，把一個主題寫好寫滿。但要切記人們只希望獲取「局部的資料」，而不是把你寫個「1 萬字文章」從頭到尾閱讀。這時候，你應該按「常見的主題」，加入適量的錨點 (Anchor)，讓訪客可以直接得到所需的有用資訊。可能訪客停留時間會減少，但 Google 可以追蹤得到，訪客看完你的文章就解決了問題，沒有繼續搜尋其他第三方網站，也對 SEO 有加分。

滿足訪客的「搜尋意圖」為最優先考慮

以上方的例子作舉例，如果你製作了一個「年度的公眾假期活動推薦」，你應該在開首就提供一個快速索引，透過「錨點 (Anchor) 」連結到文章的「相關聯的章節」裡。例如當訪客點擊「兒童節」的錨點連結，應該就會帶到兒童節的段落裡。訪客可以省略大量時間，不需要閱讀跟兒童節不相關的內容。

HTML 錨點 (Anchor) 的準備工作

為了怕新手不清楚使用《區塊編輯器》的介面，上方就是常見的示意圖片，你需要在區域一選取任意一個區塊，常見會使用「標題區塊」作為定點的位置。第二步就是在進階設定，輸入「HTML 錨點」的名稱。

區域一：

理論上，錨點可以設定在大部分的區塊之上，不限於「標題」，但一般最常見就是標題區塊。

區域二：

請輸入不含空格的一或多個字 (建議使用英數字元)，這能讓這個區塊的網址成為唯一網址，這便是錨點的作用。為區塊設定錨點後，便能在這個頁面中直接連結至這個區塊區段。

3 個主要的步驟流程

HTML 錨點 (Anchor) 的應用和平常我們使用的「超連結」是相同的，不過新手要先為希望到達的地方設立一個名稱，一般用「#」開頭，例如 Google 如果有一個錨點，指向他們的產品 (Product)，外觀會顯示如下。

原始網址：https://google.com
錨點網址：https://google.com#product

步驟一：指定 [目標物件]

[目標物件] 泛指在區塊編輯器裡的區塊 (Block) 大部分都適用。

步驟二：設立 [#錨點名稱]

點擊區塊編輯器右側的 [區塊設定]，在 [進階設定] 裡的 [HTML 錨點] 欄位輸入錨點名稱即可。

步驟三：連結 [#錨點名稱]

常見在 [文字段落]、[標題] 或 [圖片] 裡置入超連結，並加上「#錨點名稱」。

舉例：選取一個 [標題區塊] 作為超連結的觸發

在 HTML 和 WordPress 的世界裡，並沒有限制一定要套用在什麼區塊之上。但約定俗成的習慣是我們較傾向套用在 標題區塊 (Heading Block) 裡比較符合這個功能的作用。

如何套用 [超連結] 的教學

設立 [#錨點名稱]，作為被連結後的座標

錨點名稱的命名原則參考

✅ product
✅ product-name
✅ product01
❌ Product產品 (只支援英文和數字)
❌ Product_name (不能用底線)
❌ Product name (不能有空隔)

實作練習：建立 HTML 錨點 (Anchor) 超連結

當輸入「#錨點名稱」之時，會發現會彈出醒目的藍色連結提醒，這是內部連結的一種。理論上新手應該不太會遇到困難，重點是要如何理解這個觀念。

步驟一：

選取 [文字] 或 [圖片] 作為超連結的載體，然後建立超連結。

步驟二：

輸入「#錨點名稱」，等待系統彈出相關的信息。

步驟三：

點擊醒目的「內部連結 / Internal Link」的按鈕，即可以加入錨點連結。

延伸閱讀：HTML 超連結 (Hyperlink) 是什麼？

全世界數十億計的網頁 (Web Page) 都是透過超連結互相連結，一個網站可能只有 5 頁，也有大型媒體網站擁有 100,000 個頁面。當中每個頁面可能 1 個超連結也沒有，也有可能有超過 100 條超連結。所以我們現在資訊爆炸的時代，就是依賴這些頁面互相連結而成。

瞭解 HTML 超連結 (Hyperlink) 是什麼？

延伸閱讀：WordPress 新增自訂 CSS (附加的 CSS)

當 WordPress 的佈景主題 和外掛在外觀設定上無法滿足我們的需求，站長們可能希望透過自行調整 CSS 語法來達到自己理想的視覺效果，這個時候應該怎麼辦？WordPress 有提供內建的「自訂 CSS 語法」的設定，但前題是站長應該要對 CSS 和 HTML 語法有基礎的認知和實作能力，才適合自行調整這個部分，因為如果操作不當，可能引起網站無法正常運作，是個具有一定風險的操作。

瞭解 WordPress 新增自訂 CSS