2014年5月14日

Blogger 文章標題最佳化﹍(1) 超連結與 CSS 調校

A+
Blogger 文章標題在預設的狀態下,於首頁可以點擊代表文章網址的超連結。但進入文章頁面後,文章標題就只剩下文字的功能,無法再點擊。如果以站長的角度來看,這不是什麼大不了的事,不過以訪客的角度而言,情況可能略有不同。

以 WFU 的經驗,逛到一篇質量不錯的文章,想保存、分享、或稍後閱讀時,最簡單的的方式為對著文章標題按滑鼠右鍵,來複製文章網址的超連結。

因此,Blogger 的文章標題,在文章頁面沒有超連結這件事,將不利於訪客幫忙傳播、分享文章。為了改善這個狀況,以下就來說明如何修改範本,順便舉例讓文章標題比較美觀的 CSS 設定。



一、補充說明


或許很多情況下,不需要從文章標題複製連結,例如,直接從瀏覽器網址列複製網址不就好了?因此再花一點篇幅說明一下,最佳的方式還是讓訪客能從文章標題來複製文章網址,原因如下──

1. 留言網址

有時從留言進入文章,那麼網址就會像是類似以下的字串:
  • http://www.wfublog.com/2012/11/bulletin-board.html?showComment=1399591215594#c2680021458947764108

相信這樣的網址對於不熟悉網路知識的訪客,會有不小的困擾。


2. 網址亂碼

有時使用了非官方範本,或裝了不知名的程式、外掛等等,會讓網址出現亂碼或無意義字串,例如:
  • http://www.wfublog.com/#.TuomlFaZCSo

相信這樣的網址比起上一點,會更讓人困惑。


3. 網址放追蹤碼

許多第三方服務,為了追蹤連結點擊的成效,會在網址放追蹤碼,例如 RSS 閱讀器,點擊後的網址又更加地冗長,類似像以下:
  • http://www.wfublog.com/2014/05/blogger-avoid-third-party-widget-1.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+WfuBlog+%28WFU+BLOG+%E9%83%A8%E8%90%BD%E6%A0%BC%E8%AA%BF%E6%A0%A1%E8%B3%87%E6%96%99%E5%BA%AB%29



二、SEO 考量


實際上,「Blogger 在文章頁面,無法點擊文章標題」這件事會這麼設計,有其 SEO 上的考量。因為以搜尋引擎的角度,頁面上的每個連結都會傳遞權重。當處於文章頁面,文章標題又放了該頁面的連結,在搜尋引擎看來,這等於是自己頁面傳遞權重給自己,Google 可能會認為這是一個賣弄 SEO 技巧、愚弄搜尋引擎的行為,而導致對該頁面扣分

以上盡量用淺顯的文字敘述這件事,這篇「Self-referencing links」對於各種自我指向的連結,有更深入的分析。

雖說 Blogger 對於文章標題的處置符合 SEO 規範,但對 WFU 而言,SEO 固然重要,友善操作界面更為重要。若兩者發生牴觸時,WFU 寧願站在讀者體驗這一邊,反正搜尋引擎處理權重的因素有數百種,少了這一項根本差不到哪裡去。而且 SEO 規則天天在更改,其出發點也是站在讀者的體驗,說不定某些因素早已修改我們也不知道。

不過,對於本文這件事,WFU 還是有解決的方法,在文章頁面的文章標題連結,加上 rel='bookmark' 的參數,讓連結不傳遞權重,就可 SEO 與讀者體驗兼顧了!(詳細原理可參考這篇討論「What is meant by the rel="bookmark" link attribute?」)



三、修改文章標題超連結語法


根據「Blogger 文章區塊的程式碼」→「三、文章區塊」,我們可在範本中找到文章標題區塊的程式碼如下:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>


這段程式碼應該會找到兩段一樣的,一個是網頁版,一個是行動版,可以兩段都修改。

以上代表「文章標題」字串的程式碼為 <data:post.title/>,要完成本文的任務,在某些沒有超連結的 <data:post.title/> 字串,增加超連結語法即可。

然而,這並非最佳解,因為根據「Blogger 無預警轉換區域網址」事件,代表文章網址的 <data:post.url/> 字串,會將文章網址轉換為區域網址(例如 .tw);而我們提供給訪客複製的網址字串,還是保持 .com 會比較好。

既然要改了就徹底一點,修正為 <data:post.canonicalUrl/> 更佳。做個總結,原本的文章標題區塊,可以改成以下內容(紅字為變更的內容):

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.canonicalUrl'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.canonicalUrl'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.canonicalUrl' rel='bookmark'><data:post.title/></a>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

存檔後,在文章頁面的文章標題,就可產生超連結了!



四、修改文章標題字型


文章標題在大部份情況下,甚至比內文更重要,值得設定不同的字型來引起訪客注意。這部份可參考「網頁中英文字型設定最佳化」來進行設定。

以 WFU BLOG 為例,選擇的文章標題字型為標楷體(可自行改用其他字型),修改字型 CSS 的步驟如下:

1. 後台範本 → 自訂 → 進階 → 新增 CSS

2. 預設的文章標題應該位於 <h3> 標籤,請自行檢查「二、修改文章標題超連結語法」之中是否有 <h3> 標籤;如果不是的話,請自行置換對應的標籤。新增的字型 CSS 範例如下:

h3.post-title {
font-family: Arial, "全字庫正楷體", "TW-Kai", "標楷體", "BiauKai", DFKai-SB, sans-serif;
}



五、修改文章標題 CSS 效果


除了字型,文章標題也可發揮創意,增加一些 CSS 效果,變得美觀一些,例如增加陰影、去除底線等等。

1. 後台範本 → 自訂 → 進階 → 新增CSS

2. 新增的 CSS 範例如下:

h3.post-title { /* 文字陰影 */
text-shadow: 2px 2px 2px #ddd;
}
h3.post-title a { /* 超連結去除底線 */
text-decoration: none;
}


系列文第一篇為文章標題的簡單調校,之後會有更深入的主題,將進行 SEO 的調校。


文章標題最佳化系列:

10 則留言:

  1. wayne好細心啊! 這個都想到

    我之前在模擬讀者看我自己的文章的時候或是想要分享自己文章給朋友的時候往往操作手續有點多,要打開文章,反白網址列去分享,有時候在後台文章列表介面要找文章連結更是麻煩,還要點檢視打開該篇文章在反白網址列,但是現在改了你提供的設定方便多了,直接在標題上按右鍵就可以正確抓到文章連結快速分享或是新開視窗了。 謝謝你啊^^

    回覆刪除
  2. <2087469985418046654>(以上內容請勿刪除,從括號之後開始留言)雖然是有想到這點,但沒想過要發表這個主題,是因為阿冠點菜,才會有這篇出現 ^^

    回覆刪除
  3. <7177727146532168876>(以上內容請勿刪除,從括號之後開始留言) 原來是阿冠點的菜啊!可是怎麼還沒看她出現在這XD

    回覆刪除
  4. 建議WFU大,文章的字顏色對比可以強一點,或標個線?這樣對色弱色盲人土比較友善,我完全找不到紅字在哪。

    回覆刪除
    回覆
    1. 我的確沒想過這件事,針對色盲使用者的網頁設計,也是一個可以研究的主題,我會另外找時間發佈研究結果。

      刪除
    2. 比較快一點的方式就是選擇對比強一點的顏色,像我個人的話,白底黃字看得很辛苦,黑字配紅字也分不出來,若是顏色面積很大可能還分得出來,但是像"字"就不行了。其實不只這篇,蠻多篇我都有看不太出來的狀況,我有問非色盲者,他也說上面的字很不明顯。很多人設計網頁時都不會考慮到顏色的易讀性,但這蠻重要的,因為其實有色盲色弱的人數不少。手機也有色彩或色盲模式了

      刪除
    3. 以我的網站為例,我使用近黑色#0c0c0c的底,用近白色#e5e5e5的字,深色對我來說比較耐看。連結用綠色。文章裡的重點都是黃色,帶有警告的用紅色,如果是重點中的重點或是要快速閱讀的重點用藍色螢光筆。顏色再多就不好了。色盲的狀況很多,但把握"高對比"顏色就不會有什麼問題

      刪除
    4. 請問一下這個設定https會不能用嗎?我裝了好多次都沒辨法產生超連結。我的原始碼最前半是一樣的,但後半不一樣
      [a expr:href='data:post.url'][data:post.title/][/a]
      [b:else/]
      [data:post.title/]
      [/h3]
      [/b:if]
      有少幾行,還是我應該直接把這段用上面蓋過,我之前是直接整段蓋過就有了,但這次不曉得為什麼沒出現,可以幫我看看嗎?目前還原成最原始狀態。我怕改錯,找不到紅字在哪...
      https://www.old-yang03.blogspot.com

      刪除
    5. 不好意思喔,目前的排程很滿,針對色盲使用者的網頁設計,要過一陣子才有辦法進入排程,發佈時我會在這裡的討論串通知。

      目前的話,要麻煩先請朋友或家人,協助看本網站的文章,來分辨有顏色的文字、或程式碼了,不便之處敬請見諒。

      刪除
  5. 目前測試是兩段都蓋過後就產生超連結

    回覆刪除

張貼留言注意事項:

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