(Pic from: elated.com)在所有 HTML 標籤之中，相信很多人第一個學會的就是超連結(A 標籤)語法吧！雖然超連結語法很簡單，不過其實也可以很複雜。若能了解 A 標籤的詳細操作方式與原理，可以在 SEO 上加分不少。
如果想更進一步精進網頁技巧，利用 A 標籤實現一些不常見的網頁效果，那麼可參考本篇的心得整理。
一、另開視窗的重要性(target="_blank")
這篇文章並非基礎教學，內容全部為進階概念，建議新手先閱讀線上教學「HTML A 標籤」來打個基礎。
超連結最常用的功能為另開視窗，參數為
1. SEO
有時看到一些網站的外部連結(連到自己網站以外的連結)，並沒有採用「另開視窗」的參數，這會有什麼影響呢？這代表當訪客按下超連結後，頁面立刻會刷新為外部網站頁面，那麼原本的網頁會被判定：
- 網頁停留時間結束
- 跳離率增加
相信有注意 Google Analytics 數據的站長就會了解，網頁停留時間短、跳離率偏高，都是對 SEO 比較負面的指標。
2. 使用者體驗
有些站長本身瀏覽網頁時，不習慣另開視窗，然後用 "上一頁"、"下一頁" 來切換頁面。因此在自己的網站上，也習慣不使用
以 WFU 的觀察來看，就算不考慮 SEO，恐怕「另開視窗」是佔多數、比較友善的「使用者體驗」。
因為訪客多半沒耐性，當沒有「另開視窗」時，在同一頁面只能靠不斷地按 "上一頁"、"下一頁" 來切換，會花費大量頁面重新讀取的時間；如果大部分頁面都是另開視窗的情況下，切換各個分頁比對內容以尋找資料，會是幫助訪客節省大量時間的機制。
根據這樣的概念，在本站文章內的連結，無論是內部或是外部連結，WFU 一律會「另開視窗」。
3. 圖片連結
延續上一點，WFU 有時逛到一些網站，想點圖片連結來看大圖，卻發現沒有「另開視窗」，而是在同頁面開啟了大圖，這就真的是很糟的使用者體驗了。
看完圖片一定得回到原文章頁面啊！那麼只好按上一頁，等待文章頁面重新載入一次，多浪費一次讀取文章的時間。現在讀者應該能明瞭，「另開視窗」是多麼的重要了。
4. 讓文章中的(圖片)超連結另開視窗
讀者也許會問，「可是我已經寫了幾百篇文章，有幾千個連結、幾千張圖片沒有使用另開視窗的語法，要怎麼辦呢？」使用簡單的 js 語法可以批次處理這樣的問題。
以下使用 Blogger 平台舉例，首先可參考「如何使用jQuery版本」，在範本中
接著在
<!-- 超連結另開視窗 start -->
<script>
$(".post-body a").attr("target","_blank");
</script>
<!-- 超連結另開視窗 end -->以上程式碼的作用為，將文章區塊中所有超連結、或有超連結的圖片，加上另開視窗參數。
二、Blogger 難搞的錨點
錨點是 A 標籤重要的功能之一，可惜在 Blogger 平台，你一定會用的一肚子火。這裡簡單帶過為何 Blogger 會異常的原理──
1. 文章編輯器
正常的錨點語法並不含網址，然而 Blogger 文章編輯器在切換「撰寫模式」與「HTML模式」後，會自動幫錨點新增錯誤的網址，導致錨點失效。
2. Blogger 更改網址後綴
為了解決切換模式後的錨點網址異常，有人會直接在錨點加上文章網址。然而在「Blogger 無預警轉換區域網址」事件後，台灣的區域網址從 .com 變成 .tw，這註定讓我們在錨點上所加的網址，無法適用所有網域，總會有某些訪客使用錨點時失效。
3. Blogger 使用錨點的唯一方法
要讓 Blogger 能正常使用錨點，請參考這篇完整解決方案「Blogger 文章編輯模式只要切換, 就可能產生異常現象?」。
三、REL="NOFOLLOW"
這個 A 標籤的參數
在實作上，簡單舉幾個使用的時機點：
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:this.innerHTML='WFU BLOG'">點我改變文字</a>其實這也不是什麼大不了的功能，因為大部分 HTML 標籤，只要加上 onclick="填入 js 語法"這樣的參數，點擊時一樣可以執行 js。那麼 A 標籤的這個用法有什麼優點呢？
A 標籤的文字、及滑鼠經過時，都有預設的顏色可以顯示，一看就知道是按鈕，可誘使訪客點擊。其他標籤想要模擬同樣情境的顏色，得另外設定多項 CSS 參數，使用上比較麻煩，因此利用 A 標籤來執行 js 的便利性在此，例如「多層樹狀標籤」，大分類、次分類的標籤文字就是利用這個原理來製作效果。
六、下載檔案
本站寫了不少小工具，有時讀者想下載 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 標籤的功力一定大大提昇不少。
網頁技巧相關文章：