2014年5月1日 星期四

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

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

Wayne Fu 0 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 的調校。


文章標題最佳化系列:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章
TOP