“最好的SEO就是無SEO”確實道出了很多SEO老鳥人的心聲。最近在網上看到一些關於web標准和SEO的關系,覺得寫的不錯,整理轉載一下以留翻閱。
要了解web標准和SEO的關系,必須得先了解什麼是”web標准”,估計大家去網上查了非常多的解釋文檔,還是有點霧裡看花,似懂非懂的感覺,我不想從網上抄一段話過來給大家,這樣最終還是無法理解,要理解web標准,還得從構建一個基本的網頁開始講起:
例如:我要寫一個最簡單的網頁,必須要使用html標記,比如:我要強調文字,我得用<strong>標簽,我要改變文字顏色,我得再加一個<font color=”顏色”>的標簽,我想另起一段,得用<>標簽,我不可能用<jacu>這個毫無意義的標簽來強調文字,因為根本沒有這種標簽,浏覽器也無法解析,於是W3C(萬維網協會,一個組織機構)就站出來了,對全世界互聯網從業者說:“大家都提點意見,我們來把這些標簽統一下,哪個能用哪些不能用;然後大家再給這些標簽一個統一的,合理的解釋,讓大家明白這些標簽是用來做什麼用的”,經過無次數討論之後。於是乎最終出台了html 1.0標准,經過後來的不斷的修改和更新,漸漸有了更多的網頁標准,如html 2.0…html 4.01,到現在大家網頁中最常使用的xmhtml1.0/1.1,以及還未正式出台的xmhtml 2.0標准,標准的更新都是向前兼容的,我們在制作網頁的時候,網頁頂部通常有這樣一句話:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 這個實際就是定義了你的文檔模型,是用xhtml 1.0標准去解釋的.
但是到了後來網頁排版越來越復雜,僅僅是靠這些html標記無法做出漂亮,美觀的頁面,必須還得輔助一些其它的工具,比如我想讓某個圖片偏移20px,又或者想文字間隔5px,僅僅靠html實現實在是比登天還難。這個時候W3C又坐不住了,於是乎又站出來呼吁:“我們再定義一些東西可能實現這個功能”,在經過無數次的討論之後,CSS 1.0的標准出台了。用這個可以很簡單的實現內容偏移,間隔等效果。經過發展,到後面的css 2.0,css 3.0。所有人在用CSS定義樣式的時候,都必須遵循這個標准。
再到了後面,人們又發現僅靠html和CSS還是不完美。它缺乏人機界面的交互,無法實現動態的效果。要是能讓網頁上的東西動起來就更完美了,於是w3c又出台了emascript標准,他規定了文檔對象模型接口。語法等內容.比如大家常用的javascript就是符合emascript標准的。
OK,到了現在一切似乎都完美了。有了html標准,有了css標准,也有了emascript標准,我們終於可以做出很好看的網頁了,我們把這些標准收聚在一起,就形成了web標准,那麼什麼樣的網頁才是符合web標准的?比如一段html是這樣寫的:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>demo</title>
</head>
<body>
<p><font color=”#ff0000″>正文內容</font><p>
<img src=”x.jpg” />
<dl>
<dt><h1>標題</h1></dt>
<dd>內容</dd>
<dd>內容</dd>
<dl>
<b>內容</b>
</body>
那麼這段代碼是否符合web標准呢,我們再來分析這些代碼,第一行你定義了你的文檔類型是xhtml 1.0,也就是說你的所有html標簽的寫法必須遵行這個標准,在body內的第一個<p>標簽中,font標簽已經在這個標准中被棄用了,color屬性也在這個標簽中被棄用了,所以這段話不符合web標准,再來看<img>標簽,它的align屬性定義了圖片的對齊方式,但缺少了alt屬性,在xhtml 1.0標准中,img是必須定義alt屬性的.所以這段代碼也不符合1.0的標准,再看dl標簽,dt定義了標題,嵌套了<h1>標簽,根據xhtml 1.0的定義。<dt>標簽中不允許嵌套<h1>標簽,所以同樣也不符合1.0標准,再看最後一個<b>標簽,謝天謝地。這個標簽終於符合web標准了。但是w3c已經說了。我們暫時保留這個標簽的意義。不過還是推薦大家使用<strong>標簽,這個語義性更強。在後面新的標准中,我們可能取消<b>標簽做為標准標簽。關於html標准的約束請大家查看相應文檔。
說到這裡。我想大家都明白了。這個頁面連xmhtml 1.0標准都不符合,那麼肯定也不符合web標准了,至於符不符合web標准,完全在於你定義的版本.但是這段段碼在浏覽器中是可以正常解析的,因為我們前面說過,標准都是向前兼容的,只是不符合你現在所定義的標准而已,那麼我該如何讓這段代碼符合我的web標准呢。只有兩種辦法。1.降低你的文檔模型的標准(這樣可能帶來更多的麻煩)2.重新修改你的代碼,比如把顏色放到style屬性中,img加上alt屬性.相比起來,我們更願意選擇第二種.
網絡上有一種解釋:web標准=div+css.不能用table布局.看了上面的文章,我們不難理解。這個概念純粹是混淆視聽.以偏概全.不能說table布局的網頁就不符合web標准,w3c從來沒有定義過用table布局就不符合標准。<table>標簽一直都是各個版本的標准標簽。雖然我們都是用div來布局,但我們要明白:別人推薦的做法不等於標准.
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標簽也起作用了,圖片也能顯示出來了,我們很奇怪為什麼這段代碼連標簽都沒寫對為什麼在浏覽器中卻能正確解析?而且似乎能“猜測”到錯誤代碼的真實意圖。原理就在於浏覽器在構建標簽樹的時候,使用了詞典分析模式和整理模式(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在外部條件相同的情況,顯然更容易獲得更好的排名。
在書寫代碼時還需要校驗一下是否真的符合標准了。我們可以利用W3C提供免費校驗服務(http://validator.w3.org/)。發現錯誤後逐個修改。在後面的資源列表中我們也提供了其他校驗服務和對校驗進行指導的網址,可以作為W3C校驗的補充。