fbpx
WordPress 黑色星期五推薦清單

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

這篇文章最後更新日期:2024 年 5 月 5 日
作者: Mack Chan

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

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

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


你將會學習得到以下知識和技能:

  • 了解 HTML 錨點 (Anchor) 是什麼?
  • 滿足訪客的「搜尋意圖」為最優先考慮
  • HTML 錨點 (Anchor) 的準備工作
  • 3 個主要的步驟流程
  • 設立 [#錨點名稱],作為被連結後的座標
  • 錨點名稱的命名原則參考
  • 實作練習:建立 HTML 錨點 (Anchor) 超連結

HTML 錨點 (Anchor) 是什麼?

HTML 錨點 (Anchor) 是什麼?
HTML 錨點 (Anchor) 是什麼?

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

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


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

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

新手應為為文章裡要加入適量的傳送門,如果您喜歡寫長文章的朋友,把一個主題寫好寫滿。但要切記人們只希望獲取「局部的資料」,而不是把你寫個「1 萬字文章」從頭到尾閱讀。

這時候,你應該按「常見的主題」,加入適量的錨點 (Anchor),讓訪客可以直接得到所需的有用資訊。

可能訪客停留時間會減少,但 Google 可以追蹤得到,訪客看完你的文章就解決了問題,沒有繼續搜尋其他第三方網站,也對 SEO 有加分。


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

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

以上方的例子作舉例,如果你製作了一個「年度的公眾假期活動推薦」,你應該在開首就提供一個快速索引,透過「錨點 (Anchor) 」連結到文章的「相關聯的章節」裡。

例如當訪客點擊「兒童節」的錨點連結,應該就會帶到兒童節的段落裡。訪客可以省略大量時間,不需要閱讀跟兒童節不相關的內容。


HTML 錨點 (Anchor) 的準備工作

HTML 錨點 (Anchor) 的準備工作
HTML 錨點 (Anchor) 的準備工作

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

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

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


3 個主要的步驟流程

3 個主要的步驟流程
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) 超連結

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

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

步驟一:
選取 [文字] 或 [圖片] 作為超連結的載體,然後建立超連結。

步驟二:
輸入「#錨點名稱」,等待系統彈出相關的信息。

步驟三:
點擊醒目的內部連結(Internal Link) 的按鈕,即可以加入錨點連結。


延伸閱讀:HTML 超連結 (Hyperlink) 是什麼?

HTML 超連結 (Hyperlink) 是什麼?實務應用例子
HTML 超連結 (Hyperlink) 是什麼?實務應用例子

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

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

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

如何在 WordPress 新增自訂 CSS (附加的 CSS)
如何在 WordPress 新增自訂 CSS (附加的 CSS)

當 WordPress 的佈景主題 和外掛在外觀設定上無法滿足我們的需求,站長們可能希望透過自行調整 CSS 語法來達到自己理想的視覺效果,這個時候應該怎麼辦?

WordPress 有提供內建的「自訂 CSS 語法」的設定,但前題是站長應該要對 CSS 和 HTML 語法有基礎的認知和實作能力,才適合自行調整這個部分,因為如果操作不當,可能引起網站無法正常運作,是個具有一定風險的操作。

瞭解 WordPress 新增自訂 CSS

常見問題 FAQ

錨點名稱的命名原則參考

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

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

如何建立 HTML 錨點 (Anchor) 超連結?

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

步驟一:
選取 [文字] 或 [圖片] 作為超連結的載體,然後建立超連結。

步驟二:
輸入「#錨點名稱」,等待系統彈出相關的信息。

步驟三:
點擊醒目的「內部連結 / Internal Link」的按鈕,即可以加入錨點連結。


參考資料和引用文獻:


我們提供市場上最新的網站架設
新聞、教學和相關知識,我們不會向用戶
發送垃圾和推廣內容,而你可以隨時「取消訂閱」。

WordPress 學員人數
15,000+ 人 (持續增加之中)

前往免費的學習社團
中文語系的 WordPress - Facebook 社團列表

在〈WordPress HTML 錨點是什麼?連結不同內容章節〉中有 3 則留言

    • 聞停 您好,你指的「跨文章」觀念是可以的,網址後方加上 [#錨點名稱] 即可,舉例如下。

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

      回覆

發表您的留言