熱烈祝賀臺州維博網絡的站長論壇隆重上線!(2012-05-28)    熱烈慶祝偉大的祖國60周年生日 點擊進來我們一起為她祝福吧(2009-09-26)    站長論壇禁止發布廣告,一經發現立即刪除。謝謝各位合作!.(2009-08-08)    熱烈祝賀臺州網址導航全面升級,全新版本上線!希望各位一如既往地支持臺州網址導航的發展.(2009-03-28)    臺州站長論壇恭祝各位新年快樂,牛年行大運!(2009-01-24)    臺州Link正式更名為臺州網址導航,專業做以臺州網址為主的網址導航!(2008-05-23)    熱烈祝賀臺州Link資訊改名為中國站長資訊!希望在以后日子里得到大家的大力支持和幫助!(2008-04-10)    熱烈祝賀臺州Link論壇改名為臺州站長論壇!希望大家繼續支持和鼓勵!(2008-04-10)    臺州站長論壇原[社會瑣碎]版塊更名為[生活百科]版塊!(2007-09-05)    特此通知:新臺州站長論壇的數據信息全部升級成功!">特此通知:新臺州站長論壇的數據信息全部升級成功!(2007-09-01)    臺州站長論壇對未通過驗證的會員進行合理的清除,請您諒解(2007-08-30)    臺州網址導航|上網導航誠邀世界各地的網站友情鏈接和友誼聯盟,共同引領網站導航、前進!(2007-08-30)    禁止發廣告之類的帖,已發現立即刪除!(2007-08-30)    希望各位上傳與下載有用資源和最新信息(2007-08-30)    熱烈祝賀臺州站長論壇全面升級成功,全新上線!(2007-08-30)    
便民網址導航,輕松網上沖浪。
臺州維博網絡專業開發網站門戶平臺系統
您當前的位置: 首頁 » HTML/XHTML/XML編程 » 把web標準和seo關系說透

把web標準和seo關系說透

論壇鏈接
  • 把web標準和seo關系說透
  • 發布時間:2011-04-06 14:34:20    瀏覽數:5595    發布者:sunhw0725    設置字體【   
兩年前,我開始接觸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結構應該為下(圖一)所示





瀏覽器為什么能把錯誤的代碼給正確解析出來呢?而且似乎能“猜測”到錯誤代碼的真實意圖。原理就在于瀏覽器在構建標簽樹的時候,使用了詞典分析模式和整理模式(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
娛樂休閑專區A 影視預告B 音樂咖啡C 英語階梯D 生活百科
網頁編程專區E AMPZF HTMLG CSSH JSI ASPJ PHPK JSPL MySQLM AJAX
Linux技術區 N 系統管理O 服務器架設P 網絡/硬件Q 編程序開發R 內核/嵌入
管理中心專區S 發布網址T 版主議事U 事務處理
陕西快乐10分玩法 今日快乐8开奖结果查询 香港精选六肖期期准 时时五分彩定位胆 广西快乐双彩24选7走势图 如何在互联网赚钱 最近排列五100期走势图 江苏7位数 手机捕鱼游戏平台下 海南麻将正版 免费精准5码中特