SEO優化CSS篇,細節決定成敗

前言:SEO在網站運營中的地位已經不言而喻瞭,SEO說難不難,因為隻要在網站制作過程中,把握一些套路,不要過於修飾就差不多瞭,這個方面站長基本都是知道的,但是SEO說簡單也不簡單,需要多觀察、思考,耐心的去研究細節,方能把網站的整體排名提高到一個檔次。如果對於SEO細節的把握得當,會起到非常好的收效。本人不才,將在以後的日子裡,發佈一系列SEO:細節決定成敗的文章,本文以CSS優化為例,介紹一些技巧,希望能和大傢一起學習探討SEO,同時也希望大傢不吝賜教,謝謝!

總的來說,DIV + CSS的網站標註設計,大傢應該有瞭很多的瞭解瞭,我整理瞭一下,符合設計標準簡單來講有以下好處:

提供最多利益給最多的網站用戶

確保任何網站文擋都能夠長期有效

簡化代碼、降低建設成本

讓網站更容易使用,能適應更多不同用戶和更多網路設備

當瀏覽器版本更新,或者出現新的網絡交互設備時,確保所有應用能夠繼續正確執行。

那麼,我們瞭知道這些好處,還需要在實際當中活學活用,今天的主題是以一個實例來體現css在SEO中的靈活運用,我發現,在大多數不怎麼運用標準甚至一些符合標準的網站裡,都犯有這點錯誤,哪一點?請繼續往下看。

先看圖:

我就不兜圈子瞭,從圖中我們看到有些標題是這樣的:4399小遊. . . 。這是一個因為長度過長而被省略的標題。

通常我們的一般是做成靜態頁面的,那麼我們在生成標題的時候會使用類似:{limit:title,12,. . .},相信大傢都看得懂,限制標題長度為12,過長的部分用. . .省略號代替。那實際該標題顯示在首頁或者當前頁的關鍵字就是4399小遊. . .,我們知道,搜索是讀源文件的,我們提取該頁的源文件分析:

搜索引擎看到的結果是這樣的:<li><a href=target=_blank title=4399小遊戲>4399小遊. . .</a></li>

而不是我們想像中的完整標題:<li><a href=target=_blank title=4399小遊戲>4399小遊戲</a></li>

那麼這樣做會有影響麼?答案是肯定的。站長們其實都知道,這樣做該鏈接的文字描述權重就會分到4399小遊…,而非4399小遊戲上瞭,當然盡管我們已經在<A>中用title描述瞭完整的標題。

如果這樣說還不明白的話,我們還可以這樣來解釋,很多平時喜歡交換鏈接的站長,使用的網站名不單單是為瞭帶流量,而是為瞭某個關鍵詞的權重和排名。SEO的靈魂就是鏈接,不管是外鏈還是內鏈,都有明顯的權重傳遞,如果我們限制瞭標題而替代以省略號,相信權重會大打折扣,這一點是毋庸置疑的。

瞭解瞭這一點,我們就會想對策。其實CSS 2.0中屬性<li>就很好的為我們解決瞭這個問題,一個很簡簡單的功能就能搞定瞭,我們在控制<li>的時候可以這樣寫(為瞭清楚明白,附以完整代碼):

以下為引用的內容:

<style type=text/css>
<!–
li {
width:20px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
/* firefox only */
li:not(p) { /* wtf is? pls let me know*/
clear: both;
}
li:not(p) a {
max-width: 17px;
float: left;
}
li:not(p):after {
content: …;
float: left;
width: 25px;
padding-left: 5px;
color: #df3a0e;
}

–>
</style>
<ul>
<li><a href= titile=4399小遊戲>4399小遊戲</a></li>
</ul>

這樣的話就輕松解決瞭問題。即便是超出的部分,也不會在源文件中被砍掉瞭,而是以完整的標題提供給搜索引擎去索引瞭。

其實文章前面我們也提到瞭,很多網站,尤其是以表格完成頁面主題的網站,在相關文章裡都會有標題超長出現,而大多數網站的處理方法就是截掉瞭超長部分,當然表格完成的頁面也可以使用此方法,道理是一樣的,大傢可以去試試。

div+css標準設計有很多地方很適合SEO優化,希望大傢慢慢的去摸索和嘗試。

此文隻是本人優化過程中的一點點體會,希望能起到拋磚引玉的作用,謝謝大傢!