2014年9月14日

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

A+

(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 的領域,算是非常重要、每個站長都需要知道的一個概念,這部份的基礎知識請參考以下專業文章:



在實作上,簡單舉幾個使用的時機點:

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 標籤的功力一定大大提昇不少。


網頁技巧相關文章:

9 則留言:

  1. WFu WFu,午安安啊!

    很棒棒的分享吶!

    最近會在自己部落裡使用連結的「另開視窗」,

    其實很純粹是想讓自己在使用頁面時,可以更加順手的考量,

    倒是沒有想到,這可以更加強許多優點呢!

    就是,讓訪客停留的時間拉長。哈。。。

    回覆刪除
  2. <7550905818163418423>(以上內容請勿刪除,從括號之後開始留言)你好~是的,這一點主要是針對外部連結而言!我猜應該是你從書上看到拿來應用的吧 :)

    回覆刪除
  3. 解決了兩個積壓已久的難題:
     1.圖片另開視窗的批次
     2.blogger 難搞的錨點

    感恩的心,感謝有你!

    回覆刪除
  4. 解決了兩個積壓已久的難題:
     1.圖片另開視窗的批次處理,真的省事不少。
     2.blogger 難搞的錨點 - 唯二的解決方法是...
      a)不要用錨點。
      b)用完錨點就此生不再「HTML」它。

    感恩的心,感謝有你!
    (ps.剛剛小小失憶,沒打完就送出了...)

    回覆刪除
  5. <6535885879475298176>(以上內容請勿刪除,從括號之後開始留言)的確,都不用就不會有問題...XD

    不過,依照 Ala 以前的提問模式,會把這兩個問題積壓這麼久,倒是有點難想像~~XD

    回覆刪除
  6. WFu WFu,早安安!

    嗯,你猜錯啦!哈。。。。

    在網路有些人也會分享一些簡單的程式碼,

    那風雲海就從中去測試,也一邊著磨程式碼它想表達的意思,

    最早剛開始,還覺得那是多此一舉,

    但後來,覺得要讓自己更加順手的話,

    連結的另開視窗是很棒的選擇。

    ********

    還有,其實風雲海去買那本很像學生的課本,

    到現在都還沒有閱讀,天啊!!!

    不過,一定會讀它的,只是現在,嗯,還不想讀它。

    哈)))))))))

    回覆刪除
  7. <4433081349653023987>(以上內容請勿刪除,從括號之後開始留言)
    健忘模式開啟 + note提醒沒有無限期執行,就會是這樣的結果了 XD。

    事情總有輕重緩急之分,哈哈(遠目)

    回覆刪除
  8. 開大圖我覺得用燈箱就差不多夠用了
    既不用離開原網頁,也有關燈集中視覺的效果

    另外,HTML編輯器判斷A標籤的條件應該是有無http,https這類連線協議前綴
    例如用的像是//www.youtube.com/embed/UoECg7cOKJc 這種寫法,切換後就會自動幫你補https;或者補上目前網址(通常會是www.blogger.com?),這樣在寫網誌內文連結時會有一點麻煩。

    為了避免日後若修改域名還要重新修改,我都不輸入網域,只留下後面分層部分,讓瀏覽器自動去補全不足的部分。
    比如完整的網址是 http://domain.blogspot.com/YYYY/MM/archive_1.html
    href 裡只需要填 /YYYY/MM/archive_1.html,就可以成功連結,不用去管原本網域是什麼。
    不過用這寫法,切換編輯器之後一樣會爆炸,所以後面我就再也不用Rich Text了。

    回覆刪除
  9. <5504635414370468144>(以上內容請勿刪除,從括號之後開始留言)用燈箱的效果的確比較好,可惜很多人沒有裝、或是不會裝這個效果。另外沒辦法的是,多裝一個外掛要多消耗一些系統資源了~

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。