這個(gè)互聯(lián)網(wǎng)基礎(chǔ)性行業(yè)在經(jīng)歷了長(zhǎng)時(shí)間的發(fā)展變化之后,現(xiàn)在已經(jīng)慢慢步入理性的發(fā)展軌道,特比是如今在搜索引擎越來(lái)越掌控人們信息搜尋的今天,良好的用戶體驗(yàn)度及好的搜索引擎排名在整個(gè)網(wǎng)站建設(shè)過(guò)程中是重點(diǎn)需要考慮的方向了。
網(wǎng)站設(shè)計(jì)從過(guò)去的盲目跟時(shí)髦狀態(tài),如今面向用戶轉(zhuǎn)變及面向搜索引擎是不可逆的趨勢(shì)了。適應(yīng)搜索引擎也好,對(duì)搜索引擎友好也好,都在強(qiáng)調(diào)搜索引擎對(duì)網(wǎng)站的重要性—沒(méi)有搜索引擎,哪里來(lái)的訪客?用戶體驗(yàn)度也好,提升訪問(wèn)量也好,或者是提高頁(yè)面的訪問(wèn)深度,這種以搜索引擎及用戶適應(yīng)性為主體的網(wǎng)站設(shè)計(jì)的新理念,經(jīng)過(guò)許多成功網(wǎng)站的檢驗(yàn)而成為一種新的趨勢(shì)。

那么如何才能既顧及了搜索引擎的排名算法,同樣也提升良好的用戶體驗(yàn)度那?網(wǎng)頁(yè)設(shè)計(jì)應(yīng)考慮的SEO因素?下面幾條作為網(wǎng)頁(yè)設(shè)計(jì)師不得不重視。
1,代碼精簡(jiǎn)化,布局清晰流暢。
搜索引擎不喜歡大量的冗余代碼,盡可能用精簡(jiǎn)的代碼量來(lái)完成相同的功能是指導(dǎo)性標(biāo)準(zhǔn),比如table向DIV布局的轉(zhuǎn)變,css代碼的精煉化,在使用DIV布局是盡可能少的減少DIV層的嵌套等這些符合web2.0標(biāo)準(zhǔn)。
同時(shí)頁(yè)面布局的時(shí)候不要混亂,在著手做網(wǎng)頁(yè)靜態(tài)化之前就對(duì)整個(gè)網(wǎng)頁(yè)的層結(jié)構(gòu)有清晰的規(guī)劃,用盡可能合理的DIV結(jié)構(gòu)來(lái)把網(wǎng)頁(yè)給靜態(tài)化完是王道。參考標(biāo)準(zhǔn):一般來(lái)講頁(yè)面大小不要超過(guò)125K。
2, JS腳本、CSS腳本外部調(diào)用處理。
在靜態(tài)化過(guò)程中一些網(wǎng)站需要用到的Javascript及CSS樣式等統(tǒng)一整理成相應(yīng)的JS文件、CSS文件做外部外部調(diào)用,一般不要直接把把這些代碼寫在網(wǎng)頁(yè)中,這樣可最大化的減少頁(yè)面代碼量,更有利于網(wǎng)頁(yè)加載速度也有利于搜索引擎蜘蛛的抓取!同時(shí),在合并js代碼時(shí)只要不是JS文件過(guò)大,要盡量減少腳本文件個(gè)數(shù),這個(gè)也是一條準(zhǔn)則!
3,醒目清晰的導(dǎo)航系統(tǒng)
導(dǎo)航對(duì)搜索引擎來(lái)講是舉足輕重的,網(wǎng)站的主導(dǎo)航及次導(dǎo)航一般是全站通用,所以導(dǎo)航要盡量清晰化,明確化真正起到導(dǎo)航的作用。
另一方面,在處理導(dǎo)航的時(shí)候盡量使用文字做導(dǎo)航,盡可能的避免使用圖片或者flash等,若一定要用圖片請(qǐng)一定加上alt屬性。Flash則盡量避免,盡管Flash的表現(xiàn)效果特別好,但是目前搜索引擎還是無(wú)法讀取到Flash文件的,這是典型的顧忌用戶體驗(yàn)度而忽略的搜索引擎友好度。
4, 圖片與A鏈接標(biāo)簽加上屬性
現(xiàn)在搜索引擎還讀取不到圖片信息,因此在設(shè)計(jì)靜態(tài)化頁(yè)面時(shí)就要注意給所有圖片加上alt描述屬性,搜索引擎是可以抓取到圖片的alt屬性的。同時(shí)給圖片的alt屬性及a標(biāo)簽加上title屬性是符合W3C標(biāo)準(zhǔn),同時(shí)可以幫助用戶瀏覽。
在設(shè)計(jì)時(shí)一些欄目標(biāo)題類的是特別要注意的,這些是對(duì)搜索引擎起重要作用的地方,盡可能的減少圖片及特殊字體的使用,這些地方既不會(huì)嚴(yán)重影響用戶體驗(yàn)度還兼顧了搜索引擎的抓取!
5,頁(yè)面title等信息要完整
在對(duì)設(shè)計(jì)圖進(jìn)行靜態(tài)化的時(shí)候我們對(duì)每個(gè)頁(yè)面包換標(biāo)題、關(guān)鍵字(keywords)、描述(description)等都應(yīng)該完善并在程序處理時(shí)要注意同步差異化更新。設(shè)計(jì)師做好的模板在程序處理時(shí)一定要是跟頁(yè)面內(nèi)容相關(guān)!
6, HTML標(biāo)簽使用要合理
對(duì)css操作熟練的美工往往對(duì)同一個(gè)表現(xiàn)效果來(lái)說(shuō)使用任何一種HTML標(biāo)簽都能實(shí)現(xiàn),比如對(duì)標(biāo)題來(lái)說(shuō),用H1跟span標(biāo)簽都可以實(shí)現(xiàn)一樣的效果不會(huì)影響到用戶體驗(yàn),但是對(duì)搜索引擎來(lái)說(shuō)是天壤之別。對(duì)搜索引擎來(lái)講,h1-h6標(biāo)簽是判斷哪個(gè)是最重要的些是次要的參考依據(jù)。
一般來(lái)將一個(gè)頁(yè)面只能使用一個(gè)H1標(biāo)簽,可同時(shí)使用多個(gè)H2及H3標(biāo)簽來(lái)指明內(nèi)容的層次以及描述相似的內(nèi)容區(qū)域,H4-H6的標(biāo)簽基本可以忽略。
7, 頁(yè)面布局結(jié)構(gòu)要合理
這主要是一些瑣碎的注意事項(xiàng),做好了可以是用戶方面直接的找到內(nèi)容及搜索蜘蛛行(PS:這些就是所謂的站內(nèi)優(yōu)化)。
1) 面包屑型導(dǎo)航;
2) 樹(shù)狀扁平化結(jié)構(gòu);
3) 設(shè)置上一篇、下一篇文章;
4) 根據(jù)文章的關(guān)鍵詞設(shè)置“相關(guān)文章”欄目等。
8, 目錄化站點(diǎn)欄目
在靜態(tài)化的時(shí)候要注意站點(diǎn)欄目的目錄化處理,簡(jiǎn)單來(lái)講就是對(duì)不同的欄目設(shè)置不同的目錄,是站點(diǎn)在物理結(jié)構(gòu)上保持層次清晰,比如對(duì)一個(gè)簡(jiǎn)單的企業(yè)站來(lái)說(shuō):新聞中心、產(chǎn)品中心、在線服務(wù)等可在站點(diǎn)跟目錄設(shè)置news、products、services目錄來(lái)存放該欄目下的頻道頁(yè)、欄目頁(yè)、終端頁(yè)這些。同時(shí)在目錄劃分是盡量不超過(guò)三次,這樣可縮短url地址盡長(zhǎng)度,或者使用靜態(tài)URL或者偽靜態(tài)都行!
總之上面羅列的是在網(wǎng)頁(yè)設(shè)計(jì)時(shí)一些要注意到事項(xiàng),做好這些基本上就可以在網(wǎng)站建設(shè)及頁(yè)面靜態(tài)化的時(shí)候把用戶體驗(yàn)及搜索引擎友好度這些做的最好的平衡,可謂“魚與熊掌兼得”之舉。
本文有鄭州網(wǎng)站建設(shè)公司(http://www.371518.cn)原創(chuàng)首發(fā),轉(zhuǎn)載請(qǐng)注明出:http://www.371518.cn/article/show/70.aspx