谈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中去.