谈Web标准与SEO关系（三）

第一篇链接：谈web标准和seo关系（一）

成都创新互联是一家专注于做网站、网站制作与策划设计,新泰网站建设哪家好?成都创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:新泰等地区。新泰做网站价格咨询:028-86922220

第二篇链接：谈WEB标准与SEO关系（二）

写了两篇关于Web标准的文章了,这篇结合我工作中的一些实践经历来与大家分享一些网站设计中常见误区,以及它对seo所产生的影响.这也是"说透"系列中最后一篇,希望能对大家有所帮助.也希望能听到大家不同的意见.

误区一: DIV+CSS强迫症

我工作中接触到一些前端开发人员,他们或多或少从网上也了解了一些SEO的知识,又或者在学习和从事SEO.对前端又缺乏了解的人.看到页面中用到几个"table"标签,立马就是满脸的不屑,然后一大堆理由说得头头是道.弄得你感觉"table"就是万恶之源,你在页面中用到了table你就显得很不专业.你的专业水准在他心里马上就降了一大半.他再不厌其烦的用了一大堆div和CSS把你的table给改写.这就是Div+CSS强迫症的表现.

table不适合用来做整体布局(并不表示不允许),这点已经得到大家的公认,有过前端经验的朋友都知道布局涉及到层次嵌套.用table嵌套来呈现结构会让你以后的布局的调整变得很困难.比如移动某个块的位置,调整左右块的距离等等,当嵌套的层次越多,你的调整越困难.再次嵌套的层次越深.解析dom所花费的时间越长,增加了客户端和搜索引擎的负担,这点我在第二篇文章中讲过,但是如果是用来呈现列表式的数据,比如数据报表,多列的新闻列表.个人简历等.这个地方用"table"来布局是最合适不过的了.但是很多人受到了"Web标准"不正确理论的影响.他宁愿用非常多的div,li和span来操作.也不用table.给自己的工作造成了很多的困扰.其实"table"在所有html标签中.它的语义化是最强的.它有很多的"子标签"来规范这个表格.例如一个完整表格的定义:

新闻列表
新闻标题	新闻作者	占击次数
文章总数:2	作者数:1	平均点击次数:40
web标准解释	w3c	50
web标准解释一	w3c	30

其中,,分别表示了表格的头部,内容和底部,表示表格标题,表示列标题,在html5中还可以用

描述标签.

总结:

1.table适合用来呈现列表数据

2.table适合用来不用多层嵌套的简单布局

3.tabel的语义化是非常强的.该用的时候得用.不要被误导的"web标准"所困扰.

误区二:不正确的嵌套和移位.

SEO大家都能理解标题相关的内容或链接如果在html中靠前,那么这个页面所赋于的权重也是相对较高的,大家在不影响浏览者体验的情况可能会使用CSS来调整内容实际的位置,俗称"移形换位",这种方式既不影响浏览者的体验.又考虑到了搜引擎,在很多网站中这个技巧也被大量使用,但是在操作的过程中,却有很多操作欠妥的地方.先来看几个简单的例子:

比如显示一篇文章,有标题,内容.作者等信息,很多人的写法是这样的:

新闻段落一

新闻段落二

新闻标题
新闻段落一
新闻段落二
作者:张三
在CSS中
.container h1{属性}
.container p{公共属性}
.container .des{属性}

谈Web标准与SEO关系（三）

新闻标题

新闻标题

新闻标题

标签提到正文的最前面,以增加页面相关关键词的权重.然后利用CSS将

标签的内容移到新闻段落上面的位置.这样浏览者是看不到

标签移位了的.
搜索引擎以一种"看报纸"的方式来理解内容,在这段代码中,与

谈Web标准与SEO关系（三）

新闻标题

新闻标题

新闻标题

标签提到正文的最前面,以增加页面相关关键词的权重.然后利用CSS将

标签的内容移到新闻段落上面的位置.这样浏览者是看不到

标签移位了的.搜索引擎以一种"看报纸"的方式来理解内容,在这段代码中,与

标签移位了的.
搜索引擎以一种"看报纸"的方式来理解内容,在这段代码中,与