-
两年前，我开始接触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