-
兩年前，我開始接觸SEO，那時候的學習熱潮讓我逛遍了國內大大小小的論壇和博客，把那些不知道是否有用或者無用的方法全用在了我的實踐中，但是隨著學習的深入。我對網路上流傳的各種方法產生了懷疑，當人盡皆知的發外鏈，寫軟文，堆關鍵字等等方法用盡後，我黔驢技窮，在排名上和流量我還是鬥不過人家，同時也不得不反思SEO更深層次，更有效的操作方法，在經歷了無數次的迂迴之後，我回到了我的老本行“程序和前端開發”，似乎一夜之間豁然開朗，我現在所做的不正是最好的SEO嗎？
誠實的說我的學習是比較封閉的，我沒有達到「最好的SEO就是無SEO」的境界，也沒有非常牛B的SEO實踐經歷，我常常思考的是如何把我現在的工作更好的融合到SEO中去，如果現在要我給SEO一個定義，那就是：網路+硬體+程式+網站結構+web標準+內容+人，網路人很多人都在討論「內容為王」的概念，卻忽視了其它的很多的因素。如果將這些因素都詳細解說一遍。估計可以出一本很厚的書了，這篇文章只想跟大家分享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標籤也起作用了,圖片也能顯示出來了，我們很奇怪為什麼這段程式碼連標籤都沒寫對為什麼在瀏覽器中卻能正確解析,如果我們假設這段程式碼是沒有錯的，它正確的dom結構應該為下(圖一)所示
前天16:58 上傳下載附件(16.49 KB)
瀏覽器為什麼能把錯誤的程式碼給正確解析出來呢？而且似乎能「猜測」到錯誤代碼的真正意圖。原理就在於瀏覽器在建構標籤樹的時候，使用了字典分析模式和整理模式（html tidy）。簡單的說，瀏覽器會把所有的標籤及屬性與內建的字典裡面的資訊去匹配，如果匹配正常，就直接解析，如果匹配不正常。就啟用整理模式，整理模式會分析你錯誤的程式碼並進行修復，例如將上面結尾處的<h1>，<p>標籤自動改為結束標記，又例如你寫入了一個<jiacu>文字</ jiacu>的標籤對。這個根本匹配不到，也無法修復。它就會將這個無效的標籤對直接清除掉，只保留裡面的文字。當然瀏覽將html解析成dom樹時它並不會更改你的html原始碼，它只是一種解析的動作，所以很多時候我們頁面的html錯誤我們不去做驗證，是不會發現這些錯誤的，因為瀏覽器已經自動幫我們修復了。通常來說.瀏覽器對html中的錯誤保證了充分的兼容性。能幫你修正的就修正。多餘的標籤或屬性能清除就清除，無法清除和修正的就自動幫你將標籤剔除以確保正常顯示。
但是「整理模式」並不是萬能的，我們不能苛求瀏覽器能幫我們修復所有的錯誤，所以很多時候當我們的頁面嵌套層次越來越深，標籤越來越多，內容越來越多的時候，在瀏覽器無法修正標籤的時候，它唯一能做的就是「將某個錯誤區塊內的所有標籤全部移除，僅保留內容」。
從搜尋引擎的角度來講，在分析內容之前它的前提也跟瀏覽器一樣要先構建一棵完整的dom樹，只有當這棵樹構建完成，搜索引擎才能確定頁面中上下文的關係，以及你在頁面中使用了哪些加權（如<strong>,<h1>）的標籤，以及它們的分佈位置等等。但搜尋引擎在解析時更強調「內容塊」的概念，也就是一個標籤一個塊。還是以上html的例子。當搜尋引擎在建構這個dom樹時，當它解析到第一個div內的<h1>標籤時，發現這裡出現了錯誤，解析到P標籤的時候，又遇到了錯誤，這個時候為了正確構建這棵dom樹，它會啟用整理模式，但這個時候的模式可能不是幫你修復錯誤，而是以「塊」為單位。找出錯誤區塊(節點)的上級區塊(節點)（如果上一層還有錯誤，則繼續往上一層查找）,如果上一區塊沒有錯誤，則將這個上級區塊內的所有子區塊及子子區塊有錯誤的標籤全部剔除，也就是說把<div id="top">之內的所有有錯誤的標籤全部剔除，最終構建的dom樹則為上面圖二所示(2011.4.5 修正：圖二中有一個小錯誤，左側的div標籤下方是還有img標籤的)。
這樣一來，我們看到自己精心寫入的<h1>和<strong>標籤在解析後都不見了，整個區塊的「權重」發生了偏移，根據html解析原理，我們很容易能得出一些結論：
1.當頁面節點層次越來越多的時候，我們要特別小心標籤層次的錯誤，越是接近頂層的的節點越是要小心，比如少寫了結束標籤，這個影響對seo也許是致命的.
2.不論你用什麼佈局，節點嵌套層次是越少越好，一來可以減少搜尋引擎解析節點時的負擔，二來搜尋引擎更容易確定節點之間（上下文）的關係，第二點關鍵字的加權很重要。
3.當標籤的屬性能用css替代時，盡可能移到css中去.
4.瀏覽器和搜尋引擎都允許html錯誤，但標準的html在外部條件相同的情況，顯然更容易獲得更好的排名。
寫這篇文章花了我近四個小時，有些地方講得還不是很透徹，在第三篇文章中再分享吧。
文章來源：光年論壇（轉載請註明出處連結及作者）
文章作者：newyhj