錨點連結是改善較長 WordPress 頁面或文章導覽的簡單但強大的工具。它們可讓使用者透過點擊連結快速跳到同一頁面上的特定區段，而無需捲動大量內容。錨點連結可以提升使用者體驗和 SEO，因此是長篇內容或單一頁面網站必須使用的功能。

本指南將教您如何使用 Classic Editor、Gutenberg Editor 和 WPBakery Page Builder 在 WordPress 中建立錨點連結。我們也會討論錨連結的結構、最佳實務和常見的使用案例。

什麼是錨點連結？

錨點連結是一種超連結，可將使用者導向同一頁面上的特定區段，而不是將他們導向不同的頁面。例如，在一篇冗長的部落格文章中，您可以建立一個表 內容 在頂部，每個連結都會跳到文章的相關部分。

範例：

<h2 id="section1">第 1 節：什麼是錨點連結？</h2>

<a href="#section1">前往第 1 節</a>

在這個範例中，當使用者按一下「前往第 1 節」時，他們會被直接帶到頁面中標題「第 1 節： 什麼是錨點連結？" 的位置。

使用錨點連結的好處：

1. 改善可讀性： 在長篇文章中，讀者可以快速跳到他們感興趣的部分，而不必無止盡地捲動。
2. 更好的導航： 錨點連結可用於在單一頁面網站上建立容易導覽的區段，例如"關於” “服務、「和」聯絡人。“
3. 增強使用者參與度： 如果使用者可以快速找到他們想要的資訊，他們就更有可能在您的頁面上停留更長的時間。
4. SEO 提升： Google 等搜尋引擎會使用錨點連結來更好地瞭解您的網頁結構，從而有可能提高您的 SEO 排名。

錨點連結的結構

錨點連結由兩個基本部分組成：錨點和錨點連結。 ID (識別碼) 和 連結.

1. ID (識別碼)

ID 是一個唯一的識別碼，您可以將其加入要連結到的 HTML 元素（如 標題 或 段落).舉例來說：

<h2 <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">id="section1"</mark>&gt;第 1 節：技術性 SEO</h2>

id= "section1" 使此標題可識別為 錨點.

2. 連結

可點選的部分，可將使用者導向 ID。它是使用標籤 # 接著是 ID.例如：

前往第 1 節。

的 href=" #section1″ 會告訴瀏覽器向下捲動到 ID 為 section1 的元素。

行動範例：

如果您要撰寫一篇關於 SEO, 您可以在每個主要部分加入錨點連結：

<h2 id="on-page-seo">網頁 SEO</h2>
<h2 id="off-page-seo">頁外 SEO</h2>
<h2 id="technical-seo">技術性 SEO</h2>

在文章的頂端，您就可以加入連結到這些部分的目錄：

<ul>
   <li><a href="#on-page-seo">網頁 SEO</a></li>
   <li><a href="#off-page-seo">頁外 SEO</a></li>
   <li><a href="#technical-seo">技術性 SEO</a></li>
</ul>

點選" "的使用者網頁 SEO" 將被直接帶到該部分。

為什麼要使用錨點連結？

1. 強化使用者體驗

讀者可以輕鬆地導覽到他們感興趣的內容，這對長篇內容尤其有用。這可減少沮喪感，讓您的網站更容易使用。

2. 在單一頁面網站上提供更好的導覽

對於單一頁面的網站，可以使用錨點連結來模擬導覽選單。按一下選單項目，使用者就會順暢地捲動到對應的部分，創造出完美的瀏覽體驗。

3. 改善 SEO

錨點連結有助於內部連結，這有助於 Google 等搜尋引擎更好地瞭解您的頁面結構。這可以改善您內容的索引，並帶來更好的排名。

4. 提高使用者參與度

讓使用者能夠快速找到他們要找的內容，可以增加他們在您網站上的停留時間，並降低跳出率，這對使用者參與度指標是有利的。

5. 無障礙

錨點連結也能讓您的網站更容易存取，讓殘障使用者或使用螢幕閱讀器的使用者更有效率地瀏覽您的內容。

如何在 WordPress 中建立錨點連結

以下是如何使用不同的 WordPress 編輯器建立錨點連結。

在經典編輯器中建立錨點連結

如果您使用 經典編輯器您必須手動編輯 HTML 來新增錨點連結。方法如下：

步驟 1：為您的目標元素加入唯一 ID

1. 在 Classic Editor 中開啟您要編輯的文章或頁面。
2. 切換到"正文"模式來編輯 HTML。

3. 找出您要連結的元素 (如標題或段落)，並加入唯一的 ID。例如

<h2 id="section1">第 1 節：什麼是錨點連結？

步驟 2：建立錨點連結

1. 切換回"視覺" 模式。

2. 在您文章的頂端 (或任何您想要連結的地方)，反白您想要點選的文字。

3. 按一下" "。插入/編輯連結工具列上的 " 按鈕。
4. 在 URL 欄位中，輸入 #section1 (您之前設定的 ID）。

<a href="#section1">前往第 1 節</a>

步驟 3：儲存與預覽

儲存變更後，您可以預覽頁面，以確保連結如預期般運作。按一下連結，頁面就會捲動到具有符合 ID 的區段。

在 Gutenberg 編輯器中建立錨點連結

Gutenberg 是 WordPress 的區塊編輯器，提供更精簡的方式來建立錨點連結。

步驟 1：為區塊新增 ID

1. 在 Gutenberg 中開啟您要編輯的文章或頁面。
2. 選擇要加入錨點的區塊（例如標題區塊）。
3. 在右側邊欄的 "進階找到"HTML 錨點" 欄位。

4. 輸入您的唯一 ID（例如 section2）。

步驟 2：新增錨點連結

1. 回到您的文章頂端或任何您想加入連結的地方。
2. 反白顯示您想要點選的文字，然後點選工具列上的連結圖示。

3. 在 URL 欄位中，輸入 #section2。

4. 按「Enter」建立連結。

步驟 3：儲存並測試

儲存您的文章並預覽。當您按一下時，連結應該會跳到具有錨點 ID 的區段。

在 WPBakery Page Builder 中建立錨點連結

WPBakery 是一款著名的 WordPress 拖放頁面建構工具。您可以使用此工具輕鬆建立錨點連結。

步驟 1：為元件新增唯一 ID

1. 在 WPBakery Page Builder 中開啟頁面或文章。
2. 按一下您要連結的元素，並進入其設定。

3. 在設定中，找到"元素 ID"欄位，並輸入唯一的 ID (例如 section1)。

步驟 2：建立錨點連結

1. 選取要連結的文字或按鈕。
2. 開啟連結設定並輸入 #第1節 作為 URL。

2. 儲存變更。

步驟 3：儲存與預覽

儲存您的工作後，預覽頁面以測試連結。

使用錨點連結的最佳實務

要充分利用錨點連結，請遵循這些最佳實務：

1. 確保唯一 ID

每個 ID 在頁面中都必須是唯一的。如果兩個元素有相同的 ID，瀏覽器就不知道該往哪裡捲動，連結也可能無法正常運作。

2. 避免使用特殊字元

ID 不應包含空格、標點符號或特殊字符。堅持使用字母、數字和連字符。例如，section-1 沒問題，但 section 1 或 section#1 可能會造成問題。

3. 使用清晰的錨文字

避免使用含糊不清的錨文字，例如「點選此處」或「瞭解更多」。取而代之的是，使用描述性文字，清楚地告訴使用者連結將帶領他們前往何處。舉例來說，「前往網頁 SEO 區段」的資訊性會更豐富。

4. 測試您的連結

在發表之前，請務必測試您的錨點連結。確保每個連結都能捲動到正確的區段。您瀏覽器的開發者工具可以協助診斷任何問題。

5. 避免裸露 URL

避免在文字中顯示原始的錨點 URL (如 https://example.com/#section1)。取而代之的是，使用清楚、描述性的連結文字，為使用者提供上下文。

錨點連結使用案例

錨點連結在許多情況下都很有用。以下是幾個常見的範例：

1. 目錄

對於篇幅較長的部落格文章，在開頭加入目錄可讓使用者不需捲動就能跳到特定部分。這可改善導覽功能，讓內容更容易消化。

2. 單頁網站

錨點連結是在單一頁面網站上建立導覽選單的好方法。按一下「關於我們」或「服務」等選單項目，使用者就會捲動到同一頁面上的這些部分。

3. 呼叫行動 (CTA) 按鈕

使用錨點連結將使用者引導至特定動作，例如填寫表單或檢視產品。例如，「瞭解更多」按鈕可連結至頁面下方的詳細部分。

4. 捲動至頂端按鈕

新增「捲動至頂端」按鈕可讓使用者快速返回長頁面的頂端，而無需手動捲動。

常見問題

1. 錨點連結與一般連結有何不同？

錨點連結會在同一頁面內導航，而一般連結通常會帶您到不同的頁面。錨點連結通常會強化長篇內容或單一頁面網站的導航功能。

2. 錨點連結對 SEO 有幫助嗎？

是的，錨點連結可以成為良好內部連結策略的一部分，幫助搜尋引擎瞭解您的頁面結構，並改善頁面的可存取性和使用者體驗。

3. 如何測試錨點連結？

最簡單的方法是按一下連結，看看它是否會帶您到正確的區段。您也可以使用瀏覽器開發工具來檢查錨點連結，並排除任何問題。

4. 有任何建立錨點連結的外掛程式嗎？

是的，許多頁面建立工具如 WPBakery 和 Elementor 都允許您輕鬆建立錨點連結。您也可以使用專門的目錄外掛程式，自動為標題產生錨點連結。

總結

錨點連結對於改善使用者導覽非常重要，尤其是長篇內容和單一頁面的網站。允許使用者直接跳到特定區段可增強可讀性、提高參與度，並對 SEO 有正面貢獻。無論您使用的是 Classic Editor、Gutenberg 還是 WPBakery Page Builder，添加錨點連結都是一個簡單的過程，可以顯著改善網站的用戶體驗。透過遵循最佳實務，例如使用獨特的 ID、清晰的錨文字，以及測試您的連結，您可以確保瀏覽順暢，並為您的訪客提供更好的可用性。