过期域名预定抢注

 找回密碼
 免费注册

代碼也影響排名:HTML代碼優化的基本原則

[複製鏈接]
發表於 2009-9-26 10:44:30 | 顯示全部樓層 |閱讀模式
合法有效的HTML代碼' c( k7 I4 a; y; N2 f( z7 s
 許多網站設計者最常犯的錯誤便是當其網頁能夠在IE下正常顯示便認為其代碼正確無誤,甚至常看到有人在抱怨其網站排名不理想,到其網站簡單看一下便可發現HTML代碼中充斥各種各樣的錯誤,在那樣的代碼基礎上無論付出多少努力去優化網站結果都可能是付諸流水的啊!; ?9 F+ w  f7 x  T) d
3 H  s* _) n2 ]( l; `, b
  事實上,IE是一款對HTML代碼容錯能力甚高的的瀏覽器,——說句題外話,儘管我們可以有各式各樣的理由可以攻擊微軟,但微軟對其產品操作的易手性及可用性方面所做的努力是不容抹殺的。——Web頁面能夠在IE下正常顯示絕不意味著頁面的HTML代碼沒有問題,甚至可以推而廣之,Web頁面在多種瀏覽器下均可正常顯示也不意味著HTML代碼完全合法有效,畢竟哪個瀏覽器都要保證基本的容錯的功能,不然,就會發生即使僅僅因為網絡傳輸中的一點導致導致HTML頁面顯示不正常了,而這在網絡帶寬仍然緊張的今天仍是頻繁發生的。(媒體& U( `* z. G3 l

6 E8 i7 I, e% t5 P什麼是合法有效的HTML代碼
0 f. N" ~. O4 Z" _  R+ q" i4 i- _) t  簡單說來,我們的Web頁面是由HTML(Hypertext Markup Language : 超文本鏈接標示語言)元素構成的,即使對於ASP、PHP之類的動態頁面,其也是由SERVER將ASP或PHP語句渲染成相應的HTML元素並下傳到客戶機上;對於JavaScript之類則由客戶端將其轉換為HTML。
6 T  D, c4 x, U3 J, }. r7 F* x  w6 F0 T7 |- T7 G- z5 ~" I/ G
  同其他語言一樣,HTML也有自己的語法規則,無論是瀏覽器還是搜索引擎的Spider都在根據這些規則來分析網頁代碼中的內容。但很多時候,即使對熟練人員來說,在HTML頁面構建時仍然難免出些HTML代碼上的錯誤,更別提大部分所見即所得編輯器造成的HTML冗余臃腫問題了。# k. U+ f/ n9 t3 ~- }) Q

3 `7 m1 j4 v3 t* @. o9 u. z9 Q  如果頁面中不存在違背HTML標準語法規範的成分,即可被稱為合法有效的HTML代碼# S1 V# T/ n/ p: K; Z) A

; ^2 l1 f: E. c8 d合法有效的HTML代碼對SEO的重要性
5 l" T* |0 E* ^6 G! E  要使搜索引擎收錄我們的網頁,——在此基礎上才能談網站優化網站推廣——其前提是要讓搜索引擎的Spider能讀懂我們的Web文件。搜索引擎Spider閱讀網頁的根據便是HTML規範,通過對HTML代碼的分析,Spider才能判斷網頁內容,在此基礎上才能判斷針對相應關鍵詞的相關性。
- Y: K: p! K8 I7 W! f  P! k+ r# F
1 i1 h  T: D  Y, z: y  需要明確的是,搜索引擎Spider不同於瀏覽器的一點便是其容錯能力相對於瀏覽器要差不少,如果頁面代碼中存在其無法解釋的HTML代碼時,其便可能停止閱讀該頁面甚至可能停止在我們的網站內爬行,更嚴重的錯誤甚至會導致其同時也丟棄已經收集到的網站內其他頁面的內容信息。6 H, i9 O  Z2 ?; ]# y

4 z8 P% G5 u- N* T& k$ V  儘管如今如大主要搜索引擎也都在盡力提高Spider的容錯能力,讓其可以在HTML代碼出現一般性錯誤時不至影響對內容的收集。但很多時候,仍然會發生如漏了一個關閉標籤導致整個頁面的內容被忽略的情況。- J; T; m8 x; ^5 N5 q: P

" M# W8 J& ]8 e! q- f4 I. K  另一方面,合法有效的HTML也可以保證Web頁面可以在多種瀏覽器下被正確解釋,避免同一個頁面在IE下顯示正常在Mozilla下卻嚴重變形的情況(當然,不能完全避免),這對於提高網站的可用性方面也是有著極大好處的。5 @+ W) h! z4 H4 h$ h

! I0 j4 a  ?4 |! Z如何驗證HTML代碼的合法有效?  n% i$ U3 h. o3 e
  Internet有很多類似的免費服務可以幫我們驗證網頁代碼是否合法有效,其中最著名的即是 W3C HTML Validator ,這是由W3C( World Wide Web Consortium:萬維網聯盟)官方推出的免費服務項目,在其頁面上只需輸入待驗證的HTML地址或者上傳一個在本地機上的HTML文件即可,其會很快返回校驗結果,是否無誤,如有錯誤分別為哪些及如何改進等。6 W5 j  L) J$ r5 s% l( a, P' W

. }' v$ p# H2 x! V  同時,W3C HTML Validator也提供對CSS文件的驗證服務。
: h$ Y  e6 G5 q  f4 e' R. X; \, M3 L# l" l. ]; ]
一定要通過W3C的驗證麼?" y: m8 ]& [* ^- L! v
  對這個問題的答案則不那麼絕對。( J8 y2 t9 Z8 a& V/ y2 Y

3 ]; {+ i) G/ v! D+ O( D! o2 h  理論上說,合法的HTML代碼能夠使搜索引擎的Spider在更容易地收集網站頁面的內容信息。但另一方面,並不是所有的HTML代碼錯誤都會影響到Spider的爬行,也即是說,HTML存在少量的錯誤對Spider來說也是可接受的,那麼,一定要通過W3C認證麼?
2 k& y9 S7 r$ {7 o! w; V# f8 v
4 T/ j8 D% s4 v8 }  另一方面,如在Mark Daoust的測試中,甚至暗喻(未肯定地下結論)存在少量HTML代碼錯誤在頁面在Google排名中能更佔優勢,當然這存在很大爭議,但至少證明了存在少量HTML代碼錯誤並不影響網頁在SERP中的排名。
4 j3 V0 w/ e! `3 Q6 }
* }6 a7 W9 H% k; Q* r' z  個人觀點,如果您對HTML相對不那麼熟悉的話,倒也不必強求非得100%通過W3C的驗證,畢竟把更多的時間與精力放到真正應該努力的方向如創建內容與鏈接才是根本,但要保證HTML代碼中不存在大的嚴重性錯誤。當然,如果您對HTML語言較為精通,那麼,何妨稍花點功夫以確保其完全無誤呢?正如在上篇文章中所說的:- n+ ?  q1 |! [# S
; o: A) h6 i) w; E: r1 A: J& g
因此,我們要做的倒不一定非得通過W3C認證,但至少要保證其在各種瀏覽器下顯示正常,保證搜索引擎的Spider能夠正常分析。1 h5 }2 D* r0 @

9 P2 o& ^, R- ^提高HTML代碼的效率, g0 M. d8 V! r  p6 e# P; y
  前文我們提說過很多所見即所得編輯器造成的HTML冗余臃腫問題,這種情況在很多中文網站相當普遍。所見即所得編輯器如FrontPage、Dreamweaver,尤其在其對一個網頁進行修改的時候,往往會產生很多不必要的冗余代碼。當頁面的HTML文件在存在大量的冗余代碼時,文件便會變得臃腫,這不但會降低網頁的打開速度,損害到網頁的效率,同時也會嚴重影響到相當網頁的搜索引擎排名。( e5 ^5 T4 h- _  z
: C. M1 H  ^' O- W4 N4 s$ B' M
  與其把精力投入到一定通過W3C認證上,個人認為,倒不如把更多的精力放到精減代碼上,如引入CSS等,以實現代碼的乾淨簡潔。這樣的優化效果會更明顯。+ J0 K1 X. s, S; ^* ~: s6 O; P9 ?0 {

: ]- u0 L6 @" M. p1 e/ q4 ^《合法有效的HTML代碼》結束!
: I5 ?( u1 w9 s4 I2 R8 b$ v
, D, S- ]2 t/ d7 s3 c0 O7 w1 V3 Z9 |4 v( x' n" @5 l7 S8 A
在合法有效的HTML代碼一文中,我們談到過所見即所得編輯器造成的HTML冗余臃腫問題:所見即所得編輯器如FrontPage、Dreamweaver,可以幫助我們簡便快速地創作或編輯HTML頁面,但在生成「乾淨的」HTML代碼方面則是個弱項,尤其在其對一個網頁進行修改的時候,往往會產生很多不必要的冗余代碼。當頁面的HTML文件在存在大量的冗余代碼時,文件便會變得臃腫,這不但會降低網頁的打開速度,損害到網頁的效率,同時也會嚴重影響到相當網頁的搜索引擎排名。1 M: e) m0 O7 }! J- M. J
% M$ f$ I* x; O
盡可能使用最精簡的HTML代碼( Z1 J1 ^/ x8 g9 I" [
  要提高頁面的下載速度,降低服務器帶寬的壓力,需要我們盡可能地縮小頁面文件的「體積」,當然,這不能以減少頁面中具體內容為代價,也即是說應該在保證頁面可視部分不變的前提下,盡可能使用精簡的代碼,減小頁面HTML文件的字節數。
2 \9 q- K1 y$ @  X4 V+ s% P' _& T  Z/ h# a3 l, `
  事實上,在HTML中同一效果的實現可以有多種不同的解決辦法。比如說,如果我們需要在頁面中顯示「粗體」字,至少有兩種方式可以實現:<strong> 標籤或 <b> 標籤,很顯然,使用 <strong> 標籤要比使用 <b> 標籤多了5個字符,而如果考慮到HTML標籤必須成對出現的語法,相應的 <strong></strong> 標籤要比 <b></b> 多了10個字符。雖然某些HTML組織推薦使用<strong>標籤,但事實上,二者毫無區別,無論在頁面顯示還是SEO方面,那麼,為何不用效率更高的方式?
- R; _1 b$ O" V' @  e9 d8 K: Y0 J7 m. N: e  p8 S# H
盡可能避免冗余的嵌套標籤! a7 j% J) C6 E/ i7 r9 |( o( W4 G
  HTML代碼一個顯著的特徵便是其支持代碼的嵌套。但由此而來的另一個問題便是,所見即所得編輯器在修改某個格式時並不會將原格式刪除,而只是簡單地在原代碼中置入新的嵌套標籤,這樣不可避免地使HTML代碼變得臃腫。所以,要注意頁面HTML文件中冗余的嵌套代碼。
4 P6 A2 Z1 C: x/ |; g5 o0 m0 d  |' c3 e6 n- ~
  比如說下文的代碼:- A8 A& m  h+ \" h
, I. x  L( G, p; w2 @8 [3 f" j
<font face="細明體">這是</font>
, A) w- z& J4 {- A& t<font face="細明體"><strong>粗體</strong></font>
' V6 V6 J7 m8 i( G7 e<font face="細明體">示例</font>
, t7 G! B  Z- f3 O! i# [5 u8 }$ \( V* {2 z' y& D/ A/ R9 |7 G+ q
  這在使用所見即所得編輯器創作的網頁中是極其常見的,大家可以看出這類代碼的拙劣:<font>標籤不斷地在重複定義。類似上文的例子我們可以更有效地修改為:
/ w5 C  h8 M. u% G2 G9 C9 c6 h# z1 ]
<font face="細明體>這是<b>粗體</b>示例</font>
; p% D) o4 g- k; R
- T2 O3 e, @0 @( H6 p  可以看出相應的代碼減少了將近一半左右。: i1 U. y0 p- J0 x+ U- V
" {+ L8 Z( u0 M4 K% P
盡量使用CSS1 R  K6 |" ?3 K2 \; d8 E  E
  傳統上,當我們在HTML頁面中定義相應的格式時需使用如字體(<font>)、段落(<p>)標籤,在這些標籤之間是我們的內容部分,如文本、鏈接、圖像等。當使用所見即所得編輯器修改某一格式時,相應的新標籤便會被放入頁面的HTML文件中,這樣,就會產生很多重複的代碼。隨Web技術的發展,現在我們可以通過定義樣式表(CSS: Cascading Style Sheets)來實現,這樣可以增強代碼的復用,提高效率。( g) U7 W# I+ B' i* f

4 w* C, B% I# H* o8 Z; b  同時,CSS也可以帶來其他好處,如可以作為外部文件引用,這樣,會大大降低HTML頁面文件的大小;而當我們需要對頁面的某些格式調整時,不必一個個去改動每個頁面,只需調整CSS文件即可,等等。) d- ^" e' U9 t# d, T4 C

/ ]1 o& x3 F1 V; |( X5 X 8 E7 w3 |- `* ^: P% R* U" B2 L
總之,代碼也影響排名!如果你排名長期上不去,請你檢查下代碼問題,自身網站的問題,等等!
發表於 2009-10-3 08:56:11 | 顯示全部樓層
html最好優化的。。。。
回復 给力 爆菊

使用道具 舉報

發表於 2009-10-3 09:43:22 | 顯示全部樓層
代碼好像是對引擎有影響的。
回復 给力 爆菊

使用道具 舉報

發表於 2009-10-22 07:58:45 | 顯示全部樓層
現在總結出來代碼不能太複雜
回復 给力 爆菊

使用道具 舉報

發表於 2009-10-22 09:34:34 | 顯示全部樓層
代碼也影響排名!!!
回復 给力 爆菊

使用道具 舉報

發表於 2011-3-16 11:24:53 | 顯示全部樓層
學 習下啊。
1 h% y8 o  w& r" @
回復 给力 爆菊

使用道具 舉報

發表於 2011-3-18 14:40:20 | 顯示全部樓層
路過,贊一個!
回復 给力 爆菊

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 免费注册

本版積分規則

4um點基跨境網編創業社區

GMT+8, 2024-10-30 21:29

By DZ X3.5

小黑屋

快速回復 返回頂部 返回列表