面向SEO的网站设计

来源:百度文库 编辑:16楼社区 时间:2021/01/27 10:49:11
面向SEO的网站设计
[日期:2007-07-13] 来源:  作者: [字体:大中小]
面向SEO的网页设计,并不是要通过改变网页设计去主动迎合搜索引擎,而是通过坚持使用Web标准、保证网页质量来得到搜索引擎的认可。
每个搜索引擎的排名算法各不相同,但可以肯定的是任何一种排名算法的目的都是让具有高质量、结构清晰、知名度高的网站排名靠前。所以,坚持Web标准的网页设计是SEO的基础。
导航设计
网站的导航是网站功能的最直观展示,因此在整个网页的设计中占有重要地位。同时,导航的样式设计,也为整个网站的样式设计确定了基调。
导航样式是多种多样的,从表现形式看主要有:文字导航、图片或flash导航以及带有图片背景的文字导航3类样式。
1.文字导航
文字导航是SEO推荐的导航方式,通过DIV+CSS可以方便地制作文字导航,如图20.7所示。

图20.7  文字导航效果
文字导航可以很容易被网络蜘蛛识别。网络蜘蛛按导航链接逐层深入,抓取下级网页。另外,采用文字导航会降低网页文件大小,加快网页打开速度,避免因文件过大而导致网站被网络蜘蛛错过。
2.图片或Flash导航
很多企业网站、设计网站都采用了Flash或图片导航(如图20.8所示),这类导航都具有很强的视觉冲击力,但并不是SEO推荐的导航方式,因为网络蜘蛛不能识别图片和Flash中的文字,而且也无法识别flash导航中的链接。因此,如果使用此类导航,还应在页面中配合文字导航使用。

图20.8  Flash导航效果
3.图片背景文字导航
在兼顾实用和形式的情况下,带有图片背景的文字导航是一个不错的选择(如图20.9所示),即较好地满足了视觉又采用了文字链接。

图20.9  图片背景文字导航示例
综合评价以上3类导航样式,建议用户采用文字导航或图片背景的文字导航,这将有助于改善网站性能和SEO。
帧结构
帧结构多应用于论坛、邮件等网站内部页面结构,帧结构的示例代码如下:







<body><br></body><br>
帧结构可实现在同一浏览器框架内不同帧结构内的页面调用,给网站开发者和用户带来便利,但是,某些浏览器不支持帧结构,而且大部分的搜索引擎也无法识别帧结构内的内容。因此,对于那些乐于被搜索引擎抓取的网页,最好不要使用帧结构。
图片优化
图片优化主要有两个方面:一是选择适合Web页面的图片格式,同时压缩图片大小;二是对需要表达含义的图片设置文字说明。
1.WEB图片格式
GIF和JPEG是适合在Web页面设计中使用的页面。GIF只限于256种颜色,适合对图片显示质量要求不高或单一色块图片,JPEG图片适合显示照片。
从SEO和用户体验角度来说,适合对图片按钮或网页结构上的图片使用GIF格式,因为JPEG图片加载时是逐行显示,而GIF是先显示图片轮廓在逐渐清晰内容。
2.alt和title属性
alt属性用于指定图片的替换文字,title属性用于设置当前对象的说明信息。
现在,用户使用搜索引擎已经不局限在文字搜索的范围,图片搜索逐渐被重视。搜索引擎是无法解析图片内容的,而带有alt和title属性是图片搜索引擎识别图片的主要依据,所以必须设置图片的alt属性和title属性。
在进行SEO优化时,适合将alt属性设置为图片本来的含义,而将title设置成指示性信息,示例如下:
主页
在本例中图片的alt属性设置为“主页”,作用是当图片不可显示时用户可以看到图片应该表达的含义。将title属性设置为“返回网站主页”,作用是当用户将鼠标指向图片时,提示给用户的信息。效果如图20.10所示。

图20.10  alt与title属性示例
CSS优化
CSS样式表控制着整个网页的样式。随着页面布局的复杂以及表现形式的丰富,CSS样式代码也急剧膨胀,导致网页文件变大。因此,需要对CSS文件进行优化。
对CSS的优化主要有以下几个方面:
1.属性设置
例如对margin、padding属性设置时,原代码如下:
margin:0px 0px 0px 0px;
优化后的代码如下:
margin: 0px;
本例中要实现的效果是将对象的外边界设置为0px,两个代码实现效果是一样的,显然后面的写法更简洁。
2.使用分组选择器
定义选择器样式时,经常会遇到不同选择器内容相同或类似的情况,代码如下:
h1 {
font-size: 18px;
color: #0000FF;
text-align: left;
}
h2 {
font-size: 18px;
color: #0000FF;
text-align: left;
}
可以使用分组选择器的方式,将样式相同的选择器放置在一个分组中定义,代码如下:
h1,h2 {
font-size: 18px;
color: #0000FF;
text-align: left;
}
3.使用类选择器
类选择器的好处是在样式中定义一次后,在HTML代码中,定义可重复应用。所以,在应用CSS进行网页布局时,除了基本的布局必须用id选择器定义外,其他部分的样式定义尽量使用类选择器定义,这也是优化CSS的一种方法。
主机优化
托管网页的主机性能对SEO也存在影响,要选择性能稳定的网页托管主机。
     使用稳定的主机
网站的访问者希望被访问的目标网站能够被快速地打开。同样,当网络机器人或网络蜘蛛正要光顾一个目标网站时,如果目标网站主机正处于瘫痪状态,那么对于网站来说可能会有两种后果:一是失去被网络蜘蛛获取的机会,二是网络蜘蛛判断此网站不存在,将从搜索引擎的索引数据库中将网站的信息删除,所以一定要使用稳定的网页托管主机。
     网站转移注意事项
更换网页服务器前,要确保目标主机上的网页目录和文件和更换前的主机保持一致。在测试通过后,再进入域名管理系统,修改DNS,指向新主机的IP地址。
域名解析一般需要几小时甚至更长时间,在此期间用户可以正常访问网站的网页内容,即使网络蜘蛛此时访问,也会抓取更新的网页内容。