超連結 A 標籤及錨點, 你不知道的操作技巧(HTML語法)

(Pic from: elated.com)在所有 HTML 標籤之中，相信很多人第一個學會的就是超連結(A 標籤)語法吧！雖然超連結語法很簡單，不過其實也可以很複雜。若能了解 A 標籤的詳細操作方式與原理，可以在 SEO 上加分不少。

如果想更進一步精進網頁技巧，利用 A 標籤實現一些不常見的網頁效果，那麼可參考本篇的心得整理。

一、另開視窗的重要性(target="_blank")

這篇文章並非基礎教學，內容全部為進階概念，建議新手先閱讀線上教學「HTML A 標籤」來打個基礎。

超連結最常用的功能為另開視窗，參數為 target="_blank"：

1. SEO

有時看到一些網站的外部連結(連到自己網站以外的連結)，並沒有採用「另開視窗」的參數，這會有什麼影響呢？這代表當訪客按下超連結後，頁面立刻會刷新為外部網站頁面，那麼原本的網頁會被判定：

• 網頁及網站停留時間結束計算
• 跳離率增加

相信有注意 Google Analytics 數據的站長就會了解，網頁(網站)停留時間短、跳離率偏高，都是對 SEO 比較負面的指標。


2. 使用者體驗

有些站長本身瀏覽網頁時，不習慣另開視窗，然後用 "上一頁"、"下一頁" 來切換頁面。因此在自己的網站上，也習慣不使用 target="_blank" 這參數。

以 WFU 的觀察來看，就算不考慮 SEO，恐怕「另開視窗」是佔多數、比較友善的「使用者體驗」。

因為訪客多半沒耐性，當沒有「另開視窗」時，在同一頁面只能靠不斷地按 "上一頁"、"下一頁" 來切換，會花費大量頁面重新讀取的時間；如果大部分頁面都是另開視窗的情況下，切換各個分頁比對內容以尋找資料，會是幫助訪客節省大量時間的機制。

根據這樣的概念，在本站文章內的連結，無論是內部或是外部連結，WFU 會選擇「另開視窗」。然而，內部連結另開視窗，不見得適合所有網站，這點要請讀者根據自己的網站性質評估。


3. 圖片連結

延續上一點，WFU 有時逛到一些網站，想點圖片連結來看大圖，卻發現沒有「另開視窗」，而是在同頁面開啟了大圖，這就真的是很糟的使用者體驗了。

看完圖片一定得回到原文章頁面啊！那麼只好按上一頁，等待文章頁面重新載入一次，多浪費一次讀取文章的時間。現在讀者應該能明瞭，「另開視窗」是多麼的重要了。


4. 讓文章中的(圖片)超連結另開視窗

讀者也許會問，「可是我已經寫了幾百篇文章，有幾千個連結、幾千張圖片沒有使用另開視窗的語法，要怎麼辦呢？」使用簡單的 js 語法可以批次處理這樣的問題。

以下使用 Blogger 平台舉例，首先可參考「引用 jQuery 的注意事項」，在範本中 </head> 之前安裝 jQuery。

接著在 </body> 前插入以下語法：

<!-- 外部超連結另開視窗 start -->
<script>
$(".post-body a:not([href*='" + location.hostname + "'])").attr("target","_blank");
</script>
<!-- 外部超連結另開視窗 end -->
以上程式碼的作用為，將文章區塊中所有外部的超連結、或外部超連結的圖片(只要圖片網址跟網站不是同網域)，都加上另開視窗參數。

二、Blogger 難搞的錨點

錨點是 A 標籤重要的功能之一，可惜在 Blogger 平台，你一定會用的一肚子火。這裡簡單帶過為何 Blogger 會異常的原理──

1. 文章編輯器

正常的錨點語法並不含網址，然而 Blogger 文章編輯器在切換「撰寫模式」與「HTML模式」後，會自動幫錨點新增錯誤的網址，導致錨點失效。


2. Blogger 更改網址後綴

為了解決切換模式後的錨點網址異常，有人會直接在錨點加上文章網址。然而在「Blogger 無預警轉換區域網址」事件後，台灣的區域網址從 .com 變成 .tw，這註定讓我們在錨點上所加的網址，無法適用所有讀者的網域，總會有某些訪客使用錨點時失效。


3. Blogger 正常使用錨點的唯一方法

要讓 Blogger 能正常使用錨點，請參考這篇完整解決方案「Blogger 文章編輯模式只要切換, 就可能產生異常現象?」。

三、REL="NOFOLLOW"

這個 A 標籤的參數 rel="nofollow" 屬於 SEO 的領域，算是非常重要、每個站長都需要知道的一個概念，這部份的基礎知識請參考以下專業文章：

• Blogger 官方操作說明
• 針對特定連結使用 rel="nofollow"
• 從NoFollow看SEO的未來

在實作上，簡單舉幾個使用的時機點：

1. 跟網站或頁面主題無關的連結

如果這個外部連結跟主題無關時，那麼這個連結多半是會被 Google 扣分，那麼建議使用 rel="nofollow" 參數，例如主題不相關的贊助商連結、主題不相關的交換連結等等。


2. 不存在的連結

連結出現 404 錯誤(頁面不存在)也是會被扣分，因此我在「404 錯誤頁面的友善設計」這個主題，使用了不存在的連結當作範例時，就必須使用 rel="nofollow" 參數。

此外，某些外部的縮網址連結，使用這類的免費服務很容易就收起來，說不定哪天連結失效了自己都不知道，乾脆使用 rel="nofollow" 可以放心一點。


3. 留言區塊的連結

因為總會有人留言順便打廣告，這些連結就成了不相關的內容，導致網頁被扣分。不過部落格平台可以不用擔心此事，因為平台多半已經預設留言區塊的連結都是 rel="nofollow"，只有自架站比較需要注意此事。

四、REL="AUTHOR" / "BOOKMARK"

1. 作者資訊

在「Google Authorship 作者資訊正式失效」事件後，在每篇文章網頁自行加上作者資訊，是唯一表彰作者身份的途徑，例如：

<a href="作者資訊網址" rel="author">作者名稱</a>
不過部落格平台可不必擔心，平台會自動加上此資訊，其他類型網站才需要注意此事。


2. 書籤標記

這一項用到的機會比較少，可參考「Blogger 文章標題最佳化__(1) 超連結與 CSS 調校」→「二、SEO 考量」，這是 WFU 曾用到的一個情境。

五、執行 javascript 語法

就像網址列能執行 js 語法一樣，超連結如果不填入網址，而是填入跟網址列一樣的 js 語法，那麼點擊時就能執行 js，例如以下：

<a href="javascript:alert('歡迎來到 WFU BLOG')">點我出現歡迎訊息</a>

執行效果如同下面這個連結：

點我出現歡迎訊息


其實這也不是什麼大不了的功能，因為大部分 HTML 標籤，只要加上 onclick="填入 js 語法" 這樣的參數，點擊時一樣可以執行 js。那麼 A 標籤的這個用法有什麼優點呢？

A 標籤的文字、及滑鼠經過時，都有預設的顏色可以顯示，且滑鼠自動出現手指圖示，一看就知道是按鈕，可誘使訪客點擊。其他標籤想要模擬同樣情境的顏色及效果，得另外設定多項 CSS 參數，使用上比較麻煩，因此利用 A 標籤來執行 js 的便利性在此。例如「多層樹狀標籤」，大分類、次分類的標籤文字就是利用這個原理來製作效果。

2014.9.30 補充：感謝 Sam 來信提醒，「回到頂端(Go Top)按鈕放在浮動導覽列實作」原本程式碼使用以上的 A 標籤形式來執行 js，但發現在 Chrome 以外的瀏覽器無法正常執行，這代表某些 js 放在 A 標籤的 href 屬性執行時，無法實現跨瀏覽器支援。因此 A 標籤執行 js 比較保險的作法，可能要用以下的形式：

<a href="javascript:" onclick="這裡放 js 程式碼">按鈕文字</a>

六、下載檔案

本站寫了不少小工具，有時讀者想下載 js 檔時可能會發現，js 檔內容會直接顯示在瀏覽器，無法出現「另存新檔」的視窗。

現在 HTML5 推出了這個新的屬性規格 "download"，就能強制將超連結的檔案網址，用「下載」的方式呈現，例如以下：

<a href="https://googledrive.com/host/0BykclfTTti-0ZHNDNWM5eTZ5T28/G+使用小秘訣.pdf" download="G+使用小秘訣">點此從 WFU BLOG 下載</a>
上面的語法可下載 "G+使用小秘訣.pdf" 這個檔案，預設的儲存檔名填入 download 的參數裡面即可(如藍色字串)，執行效果如同下面這個連結：

點此從 WFU BLOG 下載


讀者可以試著將檔案網址貼在瀏覽器執行，並不會造成「下載」的效果。

另外要注意的是，這個功能很實用，但很可惜根據「使用說明書」，支援的瀏覽器目前看來只有 Chrome 與 Firefox。

七、小結

以上整理的都是 A 標籤比較實用的語法及功能，雖然還有其他的用法，不過太冷門或用到機會不高的就不舉例了。相信看完本篇後，駕馭 A 標籤的功力一定大大提昇不少。

網頁技巧相關文章：