談WEB標準與SEO關系(二)
***篇鏈接:談WEB標準與SEO關系(一)
***篇說到,web標準取決于我們在寫html/css/js時所定義的版本,比如我html用的是xhtml 1.0標準,那么我的html也應該是要符合xhtml 1.0規范的。但是事實似乎并不是這樣,互聯網上幾乎接近99.999%的網頁都無法通過驗證,總是有這樣或那樣的錯誤,w3c的官方網站:http://www.w3.org所有頁面都是可以通過驗證的,有興趣的朋友可以去測試下。
說到這里,我們的文章似乎走入了一個死胡同,既然這么多的網頁不符合web標準,他們同樣也能取得很好的排名和流量,那web標準與SEO到底還有啥聯系呢,這個還得從html結構和解析說起.
網頁設計中強調結構(html)和表現(css)分離,我們可以這樣去理解它們的概念。結構是一幢房子。是鋼筋水泥和磚堆成的架子,而表現是對結構的裝修和修飾,他就像裝修,給房子裝了地板,墻面抹了石灰和油漆。
沒有了結構,表現也就沒有了實際表現的價值,這也是為什么在xhtml 1.0 strict及其更高的標準中取消了<font color="#ccc" size="12">文本</font>或之類的標簽或性性,因為對于結構來說,它更像是一種表現,它應該呆在表現層也就是CSS之中,如果我們在xhtml 1.0 strict頁面應用了font標簽,實際上它也可以正確解析,因為在***篇中我們說過,標準都是向前兼容的。
我們再來理解瀏覽器和搜索引擎如何來解析我們的html,為什么在這里說到瀏覽器,因為在我看來搜索引擎和瀏覽器在解析html的時候它們的方法大致是一樣的,當網頁抓取下來之后,就開始了html的解析,它最終會把整個頁面解析成一棵擁有嚴格父子關系節點的dom樹。然后再呈現給用戶,比如當我寫了如下這段代碼:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>標題</title>
- </head>
- <body>
- <div id="top">
- <h1>這是標題<h1>
- <img src="xx.jpg"/>
- <p>這是一段<strong>文本</strong>內容<p>
- </div>
- <div id="container">
- <h2>這是另一個標題</h2>
- <p>這是另一段<strong>文本</strong></p>
- </div>
- </body>
- </html>
可以看到這是一段xhtml 1.0過渡標準下的html.卻有很多錯誤(錯誤包括:***個div中<h1>標簽沒有結束標簽.img沒有alt屬性。<p>標簽也沒有結束標簽),但是如果把這段代碼放到瀏覽器中去執行,卻可以看到正確的效果,<h1>標簽起作用了。P標簽也起作用了,圖片也能顯示出來了,我們很奇怪為什么這段代碼連標簽都沒寫對為什么在瀏覽器中卻能正確解析,如果我們假設這段代碼是沒有錯的,它正確的dom結構應該為所示。
瀏覽器為什么能把錯誤的代碼給正確解析出來呢?而且似乎能“猜測”到錯誤代碼的真實意圖。原理就在于瀏覽器在構建標簽樹的時候,使用了詞典分析模式和整理模式(html tidy)。
簡單的說,瀏覽器會把所有的標簽及屬性與內置的詞典里面的信息去匹配,如果匹配正常,就直接解析,如果匹配不正常。就啟用整理模式,整理模式會分析你錯誤的代碼并進行修復,比如將上面結尾處的<h1>,<p>標簽自動改為結束標記,又比如你寫入了一個<jiacu>文本</jiacu>的標簽對。這個根本匹配不到,也無法修復。它就會將這個無效的標簽對直接清除掉,僅保留里面的文字。
當然瀏覽將html解析成dom樹時它并不會更改你的html源代碼,它只是一種解析的動作,所以很多時候我們頁面的html錯誤我們不去做驗證,是不會發現這些錯誤的,因為瀏覽器已經自動給我們修復了。通常來說.瀏覽器對html中的錯誤保證了充分的兼容性。能幫你修正的就修正。多余的標簽或屬性能清除就清除,無法清除和修正的就自動幫你將標簽剔除以保證正常顯示。
但是“整理模式”并不是***的,我們不能苛求瀏覽器能幫我們修復所有的錯誤,所以很多時候當我們的頁面嵌套層次越來越深,標簽越來越多,內容越來越多的時候,在瀏覽器無法修正標簽的時候,它唯一能做的就是“將某個錯誤塊內的所有標簽全部去除,僅保留內容”。
從搜索引擎的角度來講,在分析內容之前它的前提也跟瀏覽器一樣要先構建一棵完整的dom樹,只有當這棵樹構建完成,搜索引擎才能確定頁面中上下文的關系,以及你在頁面中使用了哪些加權(如<strong>,<h1>)的標簽,以及它們的分布位置等等。但是搜索引擎在解析時更強調“內容塊”的概念,即一個標簽一個塊。還是以上html的例子。
當搜索引擎在構建這個dom樹時,當它解析到***個div內的<h1>標簽時,發現這里出現了錯誤,解析到P標簽的時候,又遇到了錯誤,這個時候為了正確構建這棵dom樹,它會啟用整理模式,但這個時候的模式可能并不是幫你修復錯誤,而是以“塊”為單位。查找錯誤塊(節點)的上級塊(節點)(如果上一級還有錯誤,則繼續往上一級查找),如果上一級塊沒有錯誤,則將這個上級塊內的所有子塊及子子塊有錯誤的標簽全部剔除,也就是說把<div id="top">之內的所有有錯誤的標簽全部剔除。
這樣一來,我們看到自己精心寫入的<h1>和<strong>標簽在解析后都不見了,整個塊的“權重”發生了偏移,根據html解析原理,我們很容易能得出一些結論:
1.當頁面節點層次越來越多的時候,我們要特別小心標簽層次的錯誤,越是接近頂層的的節點越是要小心,比如少寫了結束標簽,這個影響對seo也許是致命的.
2.不論你用什么布局,節點嵌套層次是越少越好,一來可以減小搜索引擎解析節點時的負擔,二來搜索引擎更容易確定節點之間(上下文)的關系,第二點對關鍵詞的加權很重要。
3.當標簽的屬性能用css替代時,則盡可能移到css中去.
4.瀏覽器和搜索引擎都允許html錯誤,但標準的html在外部條件相同的情況,顯然更容易獲得更好的排名。
敬請期待,下一篇。
【編輯推薦】