谈Web标准与SEO关系（三）
第一篇链接：谈web标准和seo关系（一）
第二篇链接：谈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标签中.它的语义化是最强的.它有很多的"子标签"来规范这个表格.例如一个完整表格的定义:
<table> <caption>新闻列表</caption> <thead> <tr> <th>新闻标题</th> <th>新闻作者</th> <th>占击次数</th> </tr> </thead> <tfoot> <tr> <td>文章总数:2</td> <td>作者数:1</td> <td>平均点击次数:40</td> </tr> </tfoot> <tbody> <tr> <td>web标准解释</td> <td>w3c</td> <td>50</td> </tr> <tr> <td>web标准解释一</td> <td>w3c</td> <td>30</td> </tr> </tbody> </table>
其中<thead>,<tbody>,</tfoot>分别表示了表格的头部,内容和底部,<caption>表示表格标题,<th>表示列标题,在html5中还可以用<summary>描述标签.
总结:
1.table适合用来呈现列表数据
2.table适合用来不用多层嵌套的简单布局
3.tabel的语义化是非常强的.该用的时候得用.不要被误导的"web标准"所困扰.
误区二:不正确的嵌套和移位.
SEO大家都能理解标题相关的内容或链接如果在html中靠前,那么这个页面所赋于的权重也是相对较高的,大家在不影响浏览者体验的情况可能会使用CSS来调整内容实际的位置,俗称"移形换位",这种方式既不影响浏览者的体验.又考虑到了搜引擎,在很多网站中这个技巧也被大量使用,但是在操作的过程中,却有很多操作欠妥的地方.先来看几个简单的例子:
比如显示一篇文章,有标题,内容.作者等信息,很多人的写法是这样的:
<div class="title"> <h1>新闻标题</h1> </div> <div class="cotent"> <p>新闻段落一</P> <p>新闻段落二</P> </div> <div> 新闻作者:张三 </div>
这种写法真的不在少数.包括很多较大的网站都在或多或少的存在这种写法.小网站就更常见了.它用"div"块级元素把相应的内容分隔开.然后用CSS来定义不同块的效果.这样即增加了不必要的嵌套,也稀释了内容块与内容块之间的相关性,对排名的影响很明显也是有负面影响的.其实仔细想一想.我们可以把这段代码写得更标准.更优雅一些.改进后的代码如下:
<div class="container">
<h1>新闻标题</h1>
<p>新闻段落一<p>
<P>新闻段落二</p>
<p class="des">作者:张三</p>
</div>
在CSS中
.container h1{属性}
.container p{公共属性}
.container .des{属性} 再来说"移形换位",这种方法在很多网站中也被普遍用到.具体操作方法gsa版主huxinyu写过这方面的文章.可以去Gsa版块查看,我以上面的代码为例:
<body> <h1>新闻标题</h1> ......(中间很多其它的内容和标签) <div class="container"> <p>新闻段落一<p> <P>新闻段落二</p> <p class="des">作者:张三</p> </body>
复制代码 这个的目的很明显,将<h1>标签提到<body>正文的最前面,以增加页面相关关键词的权重.然后利用CSS将<h1>标签的内容移到新闻段落上面的位置.这样浏览者是看不到<h1>标签移位了的.
搜索引擎以一种"看报纸"的方式来理解内容,在这段代码中,与<h1>标签关联性最强的还是<div class="container">里面的正文内容.当它读到了标题,却迟迟找不到标题相关的内容.试想:我在读报纸.标题在报纸在最上面.标题所对应的内容却在报纸的最下面,你肯定会觉得这报纸排版的效果特别差.你不会给他一个好的评价.同理,搜索引擎也不能很好的理解这种写法的用意.
如果我们一定要"移形换位",想提高页面权重.那么就来得彻底一些.我可以将<div class="container">这个块所有内容移到body正文前面.然后利于CSS来调整这个container在页面上的显示位置.而不是仅仅移动<h1>标签.这样即不会破坏上下文的关系.又兼顾了浏览者的体验.当然我不是特别推崇在网站在大量使用这种方式,他会使前端开发变得复杂,可维护性变差.
误区三:不正确的js方法应用
有没有见过下面这几种写法的代码:
(1)<a href="javascript:void(0)" onclick="dosomething()">投票</a> (2)<a href="javascrpt:dosomething()">好评</a> (3)<a herf="xx.html" onclick="dosomething();return false">第二页</a>
含义就不多解释了.第(1)和(2)种写法在网站中普遍存在.这三段代码的共同点就是当点击<a>标签的锚文本时,javascript的dosomething()方法会执行,但是对于搜索引擎来说,他们的含义就大不一样了.先来看一些知识点:
href是<a>标签的标准属性,它表示锚文本所指向的目标页面地址;onclick是<a>标签的事件.它表示单击<a>标签内的内容时所执行的程序代码,从程序角度来说.程序的执行都应该都事件来驱动.而很多前端开发人员都喜欢把一段js代码放在href属性中.当搜索引擎抓行到<a>标签时,它想顺着herf所指向的页面地址继续去索引.却发现这里是一段js代码.顺理成章.这个地方的链接也就成了死链接.影响了蜘蛛顺利索引网站.
解决办法:
1.如果我们仅仅是想让浏览来执行一段js代码来实现某个功能.最好的方式是用其它标签来替代,而不是用a标签,
比如:<span>投票</span>,这样就不会有这样的错误.
2.如果我想搜索引擎索引锚文本链接.但在用户点击这个锚文本时,又要js代码来实现其它功能,那么第(3)种代码的写法无疑是最好的.
比如:在ajax分页中.我们想实现无刷新换页.那么<a herf="xx.html">第二页</a>就不会有任何问题. 搜索引擎看到的是href中所指向的地址.而用户在点击时执行的是onclick事件.最后返回一个false,不会去执行xx.html.