符合SEO效果的网站前端页面实现注意要点

        最近繁忙于一个PR5大站项目的改版优化,确切的说和重新制作没什么两样。主要负责网站架构,内容功能的确定,网页设计以及前端页面实现。设计网页的时候决定了网站的一些SEO效果,如页面如何布局。页面实现的时候,主要是代码方面的优化,对SEO还是有满多注意的事项的。今天主要谈谈前端页面实现时候一些体会。

       首先JS或者一种JS框架(如Jquery,YUI)要熟练使用。小东北觉得Jquery是一个很好的框架集,自己可以写一些代码实现简单的效果,也可以从网上下载牛人写好的代码修改成自己需要的。的确JS会加大网页质量,影响一些SEO效果。但是从用户体验方面又是不可缺少的技术,小东北提倡合理使用JS就好。

       其次Html5+CSS3的应用。Html5确实不错,但是由于浏览器支持问题,这次页面实现使用较少。CSS3可以实现线性渐变,圆角(border-radius),阴影(box-shadow),文本阴影(text-shadow)。下面简单举个例子

.box { 
-moz-border-radius: 15px; /* Firefox */
webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
}

       当用代码可以实现圆角阴影效果的时候,这无疑是一个很大的进步。你可以想象如果这些效果用图片实现的时候是多么复杂和浪费资源,所以期待各大浏览器加快对Html5和CSS3支持的的步伐。

几点注意事项:

       1. 在写CSS代码时,有时候定义属性不起作用,大多数原因就是选择器的优先级使用不恰当(感兴趣可以看看《如何确定CSS选择器的优先级,及简洁高效的CSS规范》挺有帮助的文章)。

       2. 为了减少客户端对服务器的请求次数,一般大型网站中较小的图片(如按钮、标题图标、导航图标等)都采用CSS精灵(CSS Sprite)进行压缩合并。推荐一个在线CSS Sprite Generator:http://spritegen.website-performance.org。

       但是在合并后如果使用透明的图片时,IE6对透明格式图片支持不友好,实现的效果并不是想要的。这时候就要为IE6单独定义CSS样式,使用其他的图片,这时候就要考虑CSS Hack技术,小东北之前写过相关内容值得一看《CSS在IE6 EI7 IE8 Firefox下的兼容写法CSS Hack》。另外做完站时候如何选择不同格式的图片,之前也有一篇不错的文章《图像处理之JPG/PNG/GIF的区别用法》。

       最近博文更新频率不是很高,其实最近想法还是挺多的,只是时间有些紧,会尽量努力坚持写文章。最近这项目做的还是满累的,但是小东北觉得挺充实的,因为毕竟在实践中进步的才会更快一些。希望把自己的业务组的业务做得再好一些,加油吧~

2 Replies to “符合SEO效果的网站前端页面实现注意要点

发表评论